ConfigGenerator

Tailwind CSS Config Generator

Generate production-ready tailwind.config.js, safely configure content paths, and optimize plugins.

Paths to all of your template files so Tailwind can tree-shake unused styles.

- Adds instructions and configs for automatic Tailwind class sorting.

Classes that should never be purged, even if they aren't found in your templates.

Classes that should never be generated (e.g. if they conflict with a legacy CSS library).

Overrides the default 'primary' color token.

Overrides the default sans-serif font stack.

- Export theme colors to CSS variables instead of hardcoded hex values (Great for whitelabeling).
tailwind.config.ts
1

Overview

How to configure Tailwind CSS for Production

Tailwind CSS relies on its configuration file to tree-shake unused styles and define your entire design system. A misconfigured Tailwind setup can lead to massive, slow-to-load CSS bundles or mysteriously missing styles in production.

Best Practices

  • Avoid dynamic class names: Tailwind scans your files for unbroken strings. If you construct classes dynamically like `<div className={`bg-${color}-500`}>`, Tailwind will NOT generate the CSS for it. Always use full class names.
  • Use CSS Variables for Theming: Instead of hardcoding hex colors in `tailwind.config.ts`, map them to CSS variables. This allows you to create dynamic themes (like user-customizable whitelabeling) without needing to recompile the Tailwind CSS.

Common Mistakes

  • Missing content paths: If you forget to include a directory in your `content` array (like `./components/**/*.{js,ts,jsx,tsx}`), Tailwind won't scan it and will purge those classes from your production CSS.
  • Safelisting too much: Safelisting prevents classes from being purged. If you safelist a large pattern like `bg-*-500`, you will generate megabytes of unused CSS. Only safelist classes when absolutely necessary.
  • Scanning node_modules: Never include `node_modules/**/*.{js,ts}` in your content paths. It will severely slow down your build times. Only target specific UI libraries if required.

Frequently Asked Questions

Why are my Tailwind styles missing in production?
99% of the time, this is due to incorrect `content` paths in `tailwind.config.js`. Tailwind scans the files listed in `content` and only includes classes it finds. If a file isn't scanned, its classes are removed.
Should I use CSS variables in Tailwind?
Yes, especially if you want to support dynamic theme switching (like multiple brands or light/dark modes) without overriding the entire config. You can map Tailwind color tokens to CSS variables like `var(--color-primary)`.
How do I add custom fonts to Tailwind?
Extend the `fontFamily` property in `theme.extend`. If you overwrite `fontFamily.sans`, it becomes the default font across your entire application.
What is the Prettier Tailwind plugin?
`prettier-plugin-tailwindcss` is an official plugin that automatically sorts your Tailwind classes in a logical order (e.g. layout, sizing, typography, colors). It makes your code significantly more readable and is highly recommended.