tailwind-configuration

Configure Tailwind CSS by creating or editing tailwind.config.js to define content paths, extend your theme, register plugins, and set core options like darkMode, prefix, important, and separator. This tells Tailwind where to scan for class usage and how to generate utilities.

Extending the theme merges your custom values with Tailwind's defaults, preserving built-in utilities. Overriding replaces defaults entirely. Use extend for adding custom colors or spacing while keeping the base palette; override only when you need complete replacement.

In tailwind.config.js, define the content array with glob patterns pointing to your template files—HTML, JSX, Vue, or other markup. Tailwind scans these paths to detect class usage and purges unused styles, reducing bundle size.

Yes, register Tailwind plugins in the plugins array of tailwind.config.js. Plugins let you extend Tailwind's utility set with custom, reusable utilities following Tailwind's patterns and ensuring consistency across your design system.

Set the darkMode option in tailwind.config.js to 'class', 'media', or a custom strategy. 'class' uses a class on the HTML element; 'media' respects system preferences. This enables dark mode utilities like dark:bg-gray-900 in your markup.

The content paths in tailwind.config.js may be incorrect or incomplete. Verify glob patterns match your project structure and file types. Check that paths include all directories with Tailwind class usage and that the build process runs before checking output.