tailwind.config.js points to the right templates and that you are using standard class names prevents these styles from being stripped out of the final CSS bundle.
Verify Your Content Paths
The most common reason for missing colors is an incorrect path in thecontent array within your tailwind.config.js file. Tailwind needs to know exactly which files to scan for class names so it can generate the corresponding CSS utilities. If this path is wrong, Tailwind will not see your HTML or template files, and all color classes will be excluded from the output.
You must ensure that the glob patterns match your actual project structure. For example, if you are using a framework like Next.js, Vue, or Svelte, the paths might differ slightly from a standard static HTML setup. A typical configuration looks like this:
module.exports = {
content: [
"./src/**/*.html",
"./src/**/*.js",
"./src/**/*.jsx",
"./src/**/*.ts",
"./src/**/*.tsx",
],
theme: {
extend: {},
},
plugins: [],
}Check for Dynamic Class Names
Tailwind’s JIT (Just-In-Time) compiler relies on static analysis to detect which utilities you are using. It cannot guess class names that are constructed at runtime using string concatenation or variables. If you write code likeclassName={bg-${colorName}}, Tailwind will not see the full string during the build process and will omit that color style.
To solve this, you should use arbitrary values or define the colors explicitly in your configuration. Using arbitrary values allows you to use any valid CSS color value directly in your markup. For instance, instead of relying on a predefined palette, you can write:
<div class="bg-[#1a1a1a]">
<p>This background will always load.</p>
</div>theme.extend.colors object in your config file. This ensures that the specific color utilities are generated even if they are not part of the default palette. This approach is safer than dynamic string construction because it keeps the class names static and visible to the scanner.
Inspect Your Purge Configuration
In older versions of Tailwind, thepurge option was used to remove unused CSS. In newer versions, this has been replaced by the content option, but legacy projects might still have residual purge settings causing issues. Ensure that your configuration does not accidentally exclude certain file types or directories from the scanning process.
If you have moved your assets to a different folder, such as changing from pages to app in Next.js, you must update the paths accordingly. Failure to do so results in a production build that strips out almost all styling, including colors. Verify that your CI/CD pipeline uses the same configuration file as your local development environment. Sometimes, developers update their local config but forget to push the changes to the repository, leading to broken builds in staging or production environments.
Clear Cache and Restart
Build tools often cache previous outputs to speed up subsequent builds. If you recently changed your configuration or added new colors, the old cache might still be serving the outdated CSS. Clearing this cache forces the build system to re-scan your files and regenerate the stylesheet. Depending on your setup, you might need to delete the.next folder in Next.js, the node_modules/.cache directory in Vite or Webpack, or simply restart the dev server. For Create React App users, stopping the process and running it again usually suffices. If you are using a custom PostCSS setup, ensure that the Tailwind plugin is processing the files correctly and not encountering errors that silently fail.
Verify Color Definitions
Sometimes the issue is not with the build process but with how the colors are defined. If you are trying to use a color that does not exist in the default Tailwind palette, you must define it first. Common mistakes include using non-standard hex codes without brackets or misspelling the color name. Check your browser’s developer tools to see if the CSS rule for the color is present in the computed styles. If the rule is missing entirely, the problem lies in the generation phase. If the rule is present but overridden, check for specificity conflicts with other CSS files. You can also try adding!important temporarily to confirm if it is a specificity issue, though this is not a long-term solution.
How do I add custom colors?
Add a colors object inside theme.extend in your tailwind.config.js file. Define key-value pairs where the key is the color name and the value is the hex code or RGB string.
Why are my colors working locally but not in production?
This usually indicates that your production build configuration has different or missing content paths. Ensure that your deployment script uses the correct environment variables and that the build command matches your local setup.
Frequently Asked Questions
Why are my colors working locally but not in production?
This usually indicates that your production build configuration has different or missing content paths. Ensure that your deployment script uses the correct environment variables and that the build command matches your local setup. Check the logs of your CI/CD pipeline for any warnings about unused styles.
Can I use arbitrary values for all colors?
Yes, you can use square brackets like bg-[#ff0000] for any valid CSS color. This bypasses the need for predefined tokens and guarantees the style is included. However, excessive use can increase your bundle size if not managed carefully.
How do I debug missing Tailwind classes?
Open your browser’s developer tools and inspect an element. Look at the computed styles to see if the color property exists. If it is missing, check your terminal for build errors or warnings related to file scanning.
What if I am using a CSS framework alongside Tailwind?
You may encounter specificity conflicts that override your Tailwind colors. Use the layer directive in Tailwind to control the order of styles. Ensure that Tailwind’s base layer is imported after any reset styles from other libraries.
Does restarting the server fix all issues?
Restarting helps clear memory caches and reloads configuration files, which solves many dynamic issues. However, if your content paths are fundamentally wrong, a restart will not help. Always verify your configuration file syntax first.