JIT mode is not picking up changes unless I change tailwind.config.js file
Problem
What version of Tailwind CSS are you using? v2.2.4 What build tool (or framework if it abstracts the build tool) are you using? postcss-cli v8.3.1 What version of Node.js are you using? v14.15.5 What browser are you using? Firefox What operating system are you using? Windows Reproduction repository https://github.com/MohammadxAli/tailwind-test-repo Describe your issue Sometimes tailwind in `jit` mode is not adding classes to final CSS when I'm adding them to my HTML files unless I edit the `tailwind.config.js` file, I usually comment and uncomment some line in that file and all of sudden I see the class has been added to the CSS file, I had this very same issue on my Next.js project as well. I made a new reproduction repository and tested things there, it was all good and working. Not really sure why it's not working on my own projects at some point. This may sound stupid but maybe tailwind is not picking up changes as the project get's more complicated? I made this issue to know if anyone had some similar experience or not, so maybe someone can guide me on how to resolve this.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Ensure JIT Mode Reactivity in Tailwind CSS
The Just-In-Time (JIT) mode in Tailwind CSS relies on a file watcher to detect changes in your HTML files. If the watcher is not functioning correctly, it may not pick up changes unless the configuration file is modified. This can occur due to issues with the file watcher, caching, or the complexity of the project structure that may prevent Tailwind from detecting all relevant files.
Awaiting Verification
Be the first to verify this fix
- 1
Update Tailwind CSS and PostCSS
Ensure that you are using the latest versions of Tailwind CSS and PostCSS, as updates may include bug fixes and improvements related to JIT mode.
bashnpm install tailwindcss@latest postcss@latest - 2
Check File Watcher Configuration
Verify that your file watcher is correctly set up in your build tool. If using PostCSS, ensure that it is configured to watch all relevant files (HTML, JS, etc.) for changes.
bashpostcss src/styles.css -o dist/styles.css --watch - 3
Modify Tailwind Configuration
Ensure that your `tailwind.config.js` file includes all necessary paths to your template files. This allows Tailwind to know where to look for class names.
javascriptmodule.exports = { purge: ['./src/**/*.{html,js}'], theme: { extend: {}, }, variants: {}, plugins: [], }; - 4
Clear Cache
Sometimes, cached files can cause issues. Clear any caches related to your build tool or Tailwind CSS to ensure it picks up the latest changes.
bashnpm cache clean --force - 5
Restart Development Server
After making the above changes, restart your development server to ensure that all configurations are reloaded and changes are applied.
bashnpm run dev
Validation
To confirm the fix worked, make a change in your HTML file by adding a new Tailwind class. Save the file and check if the class is reflected in the generated CSS without needing to modify `tailwind.config.js`. If the class appears, the issue is resolved.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep