Day 5: Production Optimization | Tailwind CSS in 5 Days

How Tailwind Removes Unused CSS

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.

tailwind.config.js — content is critical

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
  ],
  // ...
}

⚠️

Dynamic class names break purging. Don't build class names with string concatenation: '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'.

Tailwind Plugins

Built-in and community plugins

npm install -D @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

tailwind.config.js

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
  ]
}

Typography plugin usage

Tailwind with React

React component

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 (
    
  );
}

💡

Use the 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.

📝 Day 5 Exercise

Optimize and Ship a Production Site

Confirm your content array covers all files that use Tailwind classes.
Install @tailwindcss/forms and @tailwindcss/typography. Apply the prose class to a block of text.
Avoid any dynamic class construction in your code. Find one and fix it if present.
Run npm run build and check the final CSS size. It should be under 20KB for most projects.
Ship the project to Netlify or Vercel.

Day 5 Summary

Tailwind only generates CSS for class names found in files listed in content.
Never build class names dynamically — use full class names and conditionals instead.
@tailwindcss/typography's prose class beautifully styles any HTML content.
clsx + tailwind-merge is the standard way to compose conditional classes in component frameworks.

→

← Previous

Day 4: Dark Mode and Custom Themes

Course Complete

Back to Tailwind CSS in 5 Days

→