Tailwind CSS JIT Engine Removes Unused Custom Colors

This repository demonstrates a subtle bug in Tailwind CSS where unused custom colors defined in theme.extend.colors are removed by the JIT engine during the build process. This can lead to runtime errors if those colors are later referenced in your application.

Setup

1. Clone the repository.
2. Run npm install to install dependencies.
3. Run npm run build to build the Tailwind CSS file.

Bug Description

The bug.js file shows how defining a custom color that's not referenced anywhere in the HTML or CSS results in the color being removed. Attempts to then use this missing color will lead to a runtime error.

Solution

The bugSolution.js file demonstrates the solution. By ensuring that at least one instance of each custom color is referenced in your project (e.g. via a small hidden element), the JIT engine will correctly keep the color definition in the generated CSS. Another solution is to explicitly use @layer base to ensure that the color is added even if not used in the components.

Conclusion

This uncommon error highlights the importance of ensuring all custom Tailwind CSS configurations are actively used within your project to avoid unexpected behavior during build and runtime.