Customization and Theme

@import "tailwindcss";

@theme {
  /* Custom colors */
  --color-brand: #d4af37;
  --color-brand-light: #f8efb6;
  --color-surface: #ffffff;
  --color-on-surface: #0f172a;

  /* Custom fonts */
  --font-display: 'Cal Sans', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Custom spacing */
  --spacing-18: 4.5rem;
  --spacing-88: 22rem;

  /* Custom breakpoints */
  --breakpoint-xs: 480px;
  --breakpoint-3xl: 1800px;

  /* Custom border radius */
  --radius-card: 0.875rem;

  /* Custom shadows */
  --shadow-card: 0 2px 8px 0 rgb(0 0 0 / 0.08);

  /* Custom animations */
  --animate-fade-in: fade-in 0.3s ease-out;
  --animate-slide-up: slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Custom keyframes */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { transform: translateY(1rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

<h1 class="font-display text-brand">Custom heading</h1>
<div class="bg-surface text-on-surface shadow-card rounded-card p-6">Card</div>
<div class="animate-fade-in">Fades in</div>
<div class="mt-18 max-w-[88rem]">Custom spacing</div>

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx,vue}'],
  theme: {
    // 'extend' merges with defaults; top-level REPLACES defaults
    extend: {
      colors: {
        brand: {
          DEFAULT: '#d4af37',
          light: '#f8efb6',
          dark: '#b8960e',
        },
        surface: 'var(--color-surface)',
      },
      fontFamily: {
        display: ['Cal Sans', ...defaultTheme.fontFamily.sans],
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      },
      screens: {
        'xs': '480px',
        '3xl': '1800px',
      },
      borderRadius: {
        'card': '0.875rem',
      },
      boxShadow: {
        'card': '0 2px 8px 0 rgb(0 0 0 / 0.08)',
      },
      keyframes: {
        'fade-in': {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        'slide-up': {
          '0%': { transform: 'translateY(1rem)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
      animation: {
        'fade-in': 'fade-in 0.3s ease-out',
        'slide-up': 'slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),
  ],
}

// tailwind.config.js
module.exports = {
  theme: {
    // REPLACES all default colors — only these exist
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#fff',
      primary: '#3b82f6',
    },
    // REPLACES all default spacing
    spacing: {
      '0': '0',
      '1': '4px',
      '2': '8px',
      '4': '16px',
    }
  }
}

@import "tailwindcss";

/* Static custom utility */
@utility content-auto {
  content-visibility: auto;
}

/* Dynamic custom utility (matches theme keys) */
@theme {
  --tab-size-2: 2;
  --tab-size-4: 4;
  --tab-size-github: 8;
}

@utility tab-* {
  tab-size: --value(--tab-size-*);
}

/* Functional utility */
@utility scrollbar-hide {
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
}

<div class="content-auto">...</div>
<div class="tab-4">...</div>
<div class="scrollbar-hide overflow-y-auto h-64">...</div>

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, addComponents, theme, matchUtilities }) {
      // Static utilities
      addUtilities({
        '.scrollbar-hide': {
          'scrollbar-width': 'none',
          '&::-webkit-scrollbar': { display: 'none' },
        },
        '.content-auto': {
          'content-visibility': 'auto',
        },
      })

      // Dynamic utilities (tab-1, tab-2, tab-4, etc.)
      matchUtilities(
        { 'tab': (value) => ({ 'tab-size': value }) },
        { values: theme('spacing') }
      )
    })
  ]
}

@import "tailwindcss";

/* Custom variant based on a data attribute */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

/* Custom variant combining states */
@custom-variant hocus (&:hover, &:focus);

/* Custom variant for a specific parent */
@custom-variant sidebar-open (.sidebar-open &);

<button class="hocus:bg-blue-700">Hover or focus</button>
<nav class="hidden sidebar-open:block">Visible when sidebar is open</nav>

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('hocus', ['&:hover', '&:focus'])
      addVariant('dark', '[data-theme="dark"] &')
      addVariant('sidebar-open', '.sidebar-open &')
    })
  ]
}

/* v4 plugin registration */
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

/* v4 */
@plugin "tailwindcss-animate";
@plugin "tailwind-scrollbar";

@import "tailwindcss";

/* Individual classes */
@source inline("text-red-500 text-green-500 text-blue-500");

/* Brace expansion: bg-red-100 through bg-red-900 in steps of 100 */
@source inline("bg-red-{100..900..100}");

/* With variants */
@source inline("{hover:,}text-blue-{500,600}");

/* Exclude classes from ever being generated */
@source not inline("container");

// tailwind.config.js
module.exports = {
  safelist: [
    'text-red-500',
    'bg-green-100',
    {
      pattern: /bg-(red|green|blue)-(100|500)/,
      variants: ['hover', 'focus'],
    },
  ],
}

@import "tailwindcss";
@source "../node_modules/my-ui-lib/**/*.js";
@source "./templates/**/*.html";

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{html,js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
    './app/**/*.{js,jsx,ts,tsx}',
    // External library
    './node_modules/my-ui-lib/dist/**/*.js',
  ],
}

@theme {
  --color-brand: #d4af37;
}

/* In CSS */
.my-element {
  color: var(--color-brand);
}

<!-- As Tailwind class -->
<p class="text-brand">Gold text</p>

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: 'var(--color-brand)',
        // For opacity support, use hsl channel approach:
        primary: 'hsl(var(--primary-hsl) / <alpha-value>)',
      }
    }
  }
}

/* globals.css */
:root {
  --color-brand: #d4af37;
  --primary-hsl: 217 91% 60%;
}

<div class="[mask-type:luminance]">...</div>
<div class="[content-visibility:auto]">...</div>
<div class="[scroll-snap-align:start]">...</div>
<div class="[writing-mode:vertical-rl]">...</div>
<div class="[-webkit-text-stroke:1px_black]">...</div>

<div class="hover:[transform:perspective(500px)_rotateY(6deg)]">3D hover</div>
<div class="lg:[column-count:3]">3 columns on large screens</div>

/* In CSS */
.custom-element {
  background-color: theme('colors.blue.500');
  padding: theme('spacing.4');
  border-radius: theme('borderRadius.lg');
  font-family: theme('fontFamily.sans');
  max-width: theme('screens.lg');
}

.custom {
  background-color: theme('colors.blue.500 / 50%');
}

@media screen(md) {
  .custom { display: flex; }
}

/* Equivalent to: */
@media (min-width: 768px) {
  .custom { display: flex; }
}