Tailwind's JIT engine only generates CSS you actually use. This lesson covers the content configuration, plugin system, using Tailwind with React/Vue/Svelte, and measuring bundle size.
Tailwind's JIT engine only generates CSS you actually use. This lesson covers the content configuration, plugin system, using Tailwind with React/Vue/Svelte, and measuring bundle size.
Tailwind scans your source files for class names and only generates CSS for the ones it finds. The content array in tailwind.config.js tells it where to look.
export default { content: [ './index.html', './src/**/*.{js,ts,jsx,tsx,vue,svelte}', // Add any other files that contain Tailwind classes './node_modules/@your-org/ui/**/*.js', // third-party component libs ], // ...
} 'bg-' + color + '-500'. Tailwind can't find these at scan time. Instead, use the full class name: color === 'red' ? 'bg-red-500' : 'bg-blue-500'.npm install -D @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
export default { plugins: [ forms, // better default form element styling typography, // .prose class for rendering Markdown HTML ]
} function Button({ children, variant = 'primary' }) { const variants = { primary: 'bg-blue-600 text-white hover:bg-blue-700', secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200', }; return ( );
} clsx or cn (clsx + tailwind-merge) utility for conditional class composition in React/Vue. cn('px-4 py-2', isActive && 'bg-blue-600', isDisabled && 'opacity-50') — much cleaner than template literals.content array covers all files that use Tailwind classes.@tailwindcss/forms and @tailwindcss/typography. Apply the prose class to a block of text.npm run build and check the final CSS size. It should be under 20KB for most projects.Before moving on, make sure you can answer these without looking: