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>

Plugin

Code

// tailwindcss-bulma-plugin.js

const plugin = require('tailwindcss/plugin');

module.exports = plugin(function({ addUtilities }) {
  addUtilities({
    '.is-primary': {
      '@apply bg-blue-500 text-white': {}
    },
    '.is-link': {
      '@apply bg-blue-300 text-white': {}
    },
    '.is-info': {
      '@apply bg-teal-300 text-white': {}
    },
    '.is-success': {
      '@apply bg-green-500 text-white': {}
    },
    '.is-warning': {
      '@apply bg-yellow-500 text-white': {}
    },
    '.is-danger': {
      '@apply bg-red-500 text-white': {}
    },
    '.is-small': {
      '@apply text-sm': {}
    },
    '.is-medium': {
      '@apply text-base': {}
    },
    '.is-large': {
      '@apply text-lg': {}
    },
    '.button': {
      '@apply py-2 px-4 font-semibold rounded-lg shadow-md': {}
    },
    '.container': {
      '@apply mx-auto max-w-screen-lg': {}
    },
    '.columns': {
      '@apply flex flex-wrap -mx-4': {}
    },
    '.column': {
      '@apply flex-1 px-4': {}
    },
    '.navbar': {
      '@apply flex items-center justify-between p-4 bg-gray-800 text-white': {}
    },
    '.navbar-item': {
      '@apply px-4 py-2 hover:bg-gray-700': {}
    },
    '.navbar-burger': {
      '@apply block lg:hidden p-4': {}
    },
    '.navbar-menu': {
      '@apply hidden lg:flex lg:items-center lg:w-auto': {}
    }
  }, ['responsive']);
});

Config

// tailwind.config.js

module.exports = {
  // other config options...
  plugins: [
    require('./tailwindcss-bulma-plugin')
  ]
};

Games

⚠️ **GitHub.com Fallback** ⚠️