Tailwind, Design Systems and CSS Modules - sgml/signature GitHub Wiki

TailWind

Design Systems

CSS Modules

Loading from a CDN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Example</title>
    <!-- Load Tailwind CSS from CDN -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <!-- Load Tailwind CSS Themer from CDN -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwindcss-themer.min.js"></script>
</head>
<body>
    <div class="p-6 bg-blue-500 text-white">
        <h1 class="text-2xl">Hello, Tailwind CSS!</h1>
        <p>Welcome to your themed webpage.</p>
    </div>
    <script>
        // Initialize Tailwind CSS Themer
        const themes = {
            default: {
                colors: {
                    primary: '#1da1f2',
                    secondary: '#14171a',
                },
            },
            dark: {
                colors: {
                    primary: '#ffffff',
                    secondary: '#000000',
                },
            },
        };

        tailwindCSSThemer(themes);
    </script>
</body>
</html>
⚠️ **GitHub.com Fallback** ⚠️