Today, I took the leap and upgraded from tailwind v2 to v3 for my react app. The upgrade process went smoothly, but now I'm facing an issue where additional tailwind CSS classes added in development are not being picked up after recompilation following "npm start". This behavior is attributed to the JIT engine.
I expected tailwind to automatically detect changes and apply the desired CSS classes. However, when I attempted to switch the base class from "basis-1/2" to "basis-3/4", since I had not included the class "basis-2/5" in the initial build, although the class name appeared on the div after a hot reload, the actual class was not loaded into the stylesheet.
Upon investigation using Chrome tools, it became apparent that the class name was appended to the div element but its value was not present in the recompiled stylesheet: target css class
I speculated that including all CSS classes during development and purging them once in production might resolve the issue. However, further research indicated that the size of the tailwind CSS bundles has become too large to be fully loaded during the development phase.
I also attempted varying file paths in the content array within the tailwind.config.js file, but this did not provide a solution.
Any assistance or advice on this matter would be greatly appreciated, and I am more than willing to test out any suggestions provided.
Key files:
Package.json
{
// Package dependency details
}
tailwind.config.js
// Tailwind configuration
index.js
// React component imports and rendering setup
postcss.config
// PostCSS configuration with tailwind and autoprefixer
assets/tailwind.css
// Tailwind CSS imports