Tailwind Config Generator

The content array tells Tailwind CSS which files to scan for class names. Tailwind uses this to purge unused styles in production builds, resulting in tiny CSS bundles. Common patterns include './src/**/*.{js,ts,jsx,tsx}' for source files and './public/index.html' for HTML files. Missing paths are the #1 cause of styles not appearing in production.

Custom colors go in theme.extend.colors to add alongside defaults, or theme.colors to replace all defaults. Each color can be a hex string, an object with shades (50-950), or a CSS variable reference like 'var(--color-brand)'. Using theme.extend is recommended to keep Tailwind's built-in palette available.

Official Tailwind plugins add pre-built component and utility classes. @tailwindcss/forms resets default browser styles on form elements. @tailwindcss/typography adds the 'prose' class for rich text. DaisyUI adds 50+ component classes. tailwindcss-animate adds animation utilities compatible with Radix UI and shadcn/ui.

Tailwind's default breakpoints are sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). You can add custom breakpoints in theme.extend.screens. Tailwind uses min-width by default (mobile-first). Use 'max-sm' prefix for max-width queries. Custom screen names become responsive prefixes: '3xl:text-xl'.

theme replaces Tailwind's default theme entirely for that key. theme.extend merges your additions with Tailwind's defaults. Almost always use theme.extend — otherwise you lose all built-in colors, spacing, fonts etc. Only use theme (without extend) when you want a completely custom design system with no Tailwind defaults.