"I stopped writing CSS files three years ago. I've never moved faster."

Class names like .sidebar-wrapper-inner-container are dead. They are semantic drift waiting to happen.

Tailwind CSS is not "inline styles". Inline styles don't have constraints. Inline styles don't respond to hover states. Inline styles don't handle media queries.
Tailwind is an API for your Design System.

02. The JIT Compiler (Magic)

// arbitrary-values.jsx

In the old days (v2), Tailwind generated a 10MB CSS file and stripped unused styles later.
The JIT (Just-In-Time) Engine watches your files. It sees top-[117px] and instantly generates a single CSS rule: `.top-[117px] { top: 117px }`.

This means:

⚡ Zero development lag.
📦 Tiny production CSS bundles (only what you use).
🎨 Arbitrary values for when you need pixel-perfect precision.

03. Mobile-First Strategy

Tailwind forces you to think Mobile First. Unprefixed utilities (like `block`) target mobile. Prefixed utilities (like `md:flex`) target larger screens.

❌ Common Mistake

class="flex sm:block"

This means "Flex on mobile, Block on tablet". Usually inverted intent.

✅ Correct Thinking

class="block md:flex"

"Default is block (mobile). On medium screens and up, become flex."

04. Theme Extension & Config

Never override. Always extend. In your `tailwind.config.js`, use the extend key to preserve the default utilities while adding your own branding.

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: '#0fa9e6',
          dark: '#0c87b8',
        }
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      }
    }
  }
}

Now you can use `bg-brand` and `font-sans` in your markup.

05. CVA: The New BEM

"But my HTML is ugly!"
Soltuion: Use CVA (Class Variance Authority) to type-safe your components. It keeps your template clean and your logic centralized.

const button = cva("rounded-xl font-bold transition items-center justify-center", {
  variants: {
    intent: {
      primary: "bg-blue-500 text-white hover:bg-blue-600",
      secondary: "bg-gray-200 text-black hover:bg-gray-300",
    },
    size: {
      sm: "px-4 py-2 text-sm",
      lg: "px-8 py-4 text-lg",
    }
  },
  defaultVariants: {
      intent: "primary",
      size: "lg"
  }
})

06. Share the Speed

"If you think Tailwind is just inline styles, you haven't used the JIT compiler. The constraints are the feature, not the bug. #TailwindCSS #CSS"

Twitter / X

The Takeaway

Stop bike-shedding class names. Start shipping UI.

07. Utility Builder

Compose utility classes visually and watch the button transform instantly. This simulates the JIT engine applying styles.

Tool Token Composer

Mix and match Padding, Color, and Radius tokens.

import React, { useState } from 'react'; // ---------------------------------------------------- // 🎨 UTILITY BUILDER // ---------------------------------------------------- export default function TailwindBuilder() { const [padding, setPadding] = useState('p-4'); const [color, setColor] = useState('bg-blue-500'); const [rounded, setRounded] = useState('rounded-lg'); const [shadow, setShadow] = useState('shadow-lg'); const classString = `${padding} ${color} ${rounded} ${shadow} text-white font-bold transition-all duration-300 active:scale-95`; return ( <div className="bg-white dark:bg-[#111] text-gray-900 dark:text-gray-200 border border-gray-200 dark:border-gray-800 rounded-2xl overflow-hidden shadow-2xl p-8 flex flex-col md:flex-row gap-8 h-[500px]"> {/* Controls */} <div className="w-full md:w-1/3 space-y-6"> <div className="space-y-4"> <h3 className="text-xl font-bold">1. Select Tokens</h3> <div className="space-y-2"> <label className="text-xs font-bold uppercase text-gray-500">Color</label> <div className="flex gap-2"> {['bg-blue-500', 'bg-purple-500', 'bg-rose-500', 'bg-emerald-500'].map(c => ( <button key={c} onClick={() => setColor(c)} className={`w-8 h-8 rounded-full ${c.replace('bg-', 'bg-')} ring-offset-2 ${color === c ? 'ring-2 ring-gray-400' : ''}`}></button> ))} </div> </div> <div className="space-y-2"> <label className="text-xs font-bold uppercase text-gray-500">Padding</label> <div className="flex gap-2"> {['p-2', 'p-4', 'p-8', 'px-10 py-5'].map(p => ( <button key={p} onClick={() => setPadding(p)} className={`px-3 py-1 bg-gray-100 dark:bg-gray-800 rounded text-xs ${padding === p ? 'bg-sky-100 dark:bg-sky-900 text-sky-600' : ''}`}>{p}</button> ))} </div> </div> <div className="space-y-2"> <label className="text-xs font-bold uppercase text-gray-500">Radius</label> <div className="flex gap-2"> {['rounded-none', 'rounded-lg', 'rounded-full'].map(r => ( <button key={r} onClick={() => setRounded(r)} className={`px-3 py-1 bg-gray-100 dark:bg-gray-800 rounded text-xs ${rounded === r ? 'bg-sky-100 dark:bg-sky-900 text-sky-600' : ''}`}>{r}</button> ))} </div> </div> <div className="space-y-2"> <label className="text-xs font-bold uppercase text-gray-500">Shadow</label> <div className="flex gap-2"> {['shadow-none', 'shadow-md', 'shadow-xl', 'shadow-2xl'].map(s => ( <button key={s} onClick={() => setShadow(s)} className={`px-3 py-1 bg-gray-100 dark:bg-gray-800 rounded text-xs ${shadow === s ? 'bg-sky-100 dark:bg-sky-900 text-sky-600' : ''}`}>{s}</button> ))} </div> </div> </div> </div> {/* Visualization */} <div className="flex-1 bg-gray-50 dark:bg-black/50 border border-gray-200 dark:border-gray-800 rounded-2xl flex flex-col items-center justify-center relative p-8"> <button className={classString}> Tailwind Wrapper </button> <div className="absolute bottom-8 w-full max-w-md bg-gray-900 text-gray-200 p-4 rounded-xl font-mono text-sm break-all text-center"> className="{classString}" </div> </div> </div> ); }

Tailwind CSS: Utility Architecture 🎨