Advanced Tailwind CSS

# Advanced Tailwind CSS

## tailwind.config.ts
```ts
import type { Config } from 'tailwindcss'
import plugin from 'tailwindcss/plugin'

export default {
  content: ['./src/**/*.{ts,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a5f',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      animation: {
        'fade-in':     'fadeIn 0.3s ease-out',
        'slide-up':    'slideUp 0.4s cubic-bezier(0.16,1,0.3,1)',
        'bounce-in':   'bounceIn 0.5s cubic-bezier(0.34,1.56,0.64,1)',
        'spin-slow':   'spin 3s linear infinite',
      },
      keyframes: {
        fadeIn:   { from: { opacity: '0' },                        to: { opacity: '1' } },
        slideUp:  { from: { opacity: '0', transform: 'translateY(16px)' }, to: { opacity: '1', transform: 'translateY(0)' } },
        bounceIn: { from: { transform: 'scale(0.8)' },             to: { transform: 'scale(1)' } },
      },
      backdropBlur: { xs: '2px' },
      screens: { '3xl': '1920px', 'xs': '380px' },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    plugin(({ addUtilities, addVariant, matchUtilities, theme }) => {
      // Custom utilities
      addUtilities({
        '.text-balance':     { 'text-wrap': 'balance' },
        '.scrollbar-none':   { 'scrollbar-width': 'none', '&::-webkit-scrollbar': { display: 'none' } },
        '.glass':            { 'backdrop-filter': 'blur(12px)', 'background': 'rgba(255,255,255,0.1)' },
      })
      // Custom variant
      addVariant('hocus', ['&:hover', '&:focus-visible'])
      addVariant('not-first', '&:not(:first-child)')
      // Dynamic utility
      matchUtilities(
        { 'grid-cols-fill': (value) => ({ 'grid-template-columns': `repeat(auto-fill, minmax(${value}, 1fr))` }) },
        { values: theme('spacing') }
      )
    }),
  ],
} satisfies Config
```

## Arbitrary values
```html
<!-- Any CSS value in brackets -->
<div class="top-[117px] bg-[#1da1f2] grid-cols-[1fr_auto_200px]">
<div class="[mask-image:linear-gradient(to_bottom,black_60%,transparent)]">
<div class="hover:[transform:scale(1.05)_rotate(2deg)]">
<div class="[&>svg]:stroke-2 [&_p]:text-gray-500">
```

## Container queries
```html
<!-- Parent must have @container -->
<div class="@container">
  <div class="@md:flex-row flex-col">...</div>
  <div class="@[400px]:text-lg">Arbitrary container bp</div>
</div>
```

## Group & Peer variants
```html
<!-- group: parent hover affects children -->
<div class="group">
  <h2 class="group-hover:text-blue-500 transition">Title</h2>
  <p  class="group-hover:opacity-100 opacity-0 transition">Revealed!</p>
</div>

<!-- peer: sibling state affects next sibling -->
<input id="cb" type="checkbox" class="peer hidden" />
<label for="cb">Toggle</label>
<div class="peer-checked:block hidden">Visible when checked!</div>
```

## Tailwind v4 (new syntax preview)
```css
/* @import instead of config --*/
@import 'tailwindcss';
@theme {
  --color-brand-500: #3b82f6;
  --font-sans: 'Inter', sans-serif;
  --animate-fade-in: fadeIn 0.3s ease-out;
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
}
```