[JIT] Tailwind does not update classes after saving in NextJS
Problem
What version of Tailwind CSS are you using? 2.1 What build tool (or framework if it abstracts the build tool) are you using? "next": "10.1.3", What version of Node.js are you using? v14.15.1 What browser are you using? chrome What operating system are you using? macOS for M1 Reproduction repository https://github.com/mwarger/next-tailwind-jit-repro Describe your issue I've also put reproduction instructions in the repro repo. It seems that changes made while in `jit` mode are not being picked up. As it stands now, with `jit` mode enabled, only initial styles are applied, and kept. Any changes or additions result in loss of styles. Please advise. Thanks!
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix Tailwind JIT Mode Not Updating Classes in Next.js
The issue arises because Tailwind CSS JIT mode requires a specific configuration to properly watch for changes in your files. In Next.js, if the `purge` option is not correctly set or if the JIT mode is not properly configured, Tailwind may not detect changes in your CSS classes, leading to the behavior where only initial styles are applied.
Awaiting Verification
Be the first to verify this fix
- 1
Update Tailwind Configuration
Ensure that your `tailwind.config.js` file is properly configured to enable JIT mode and to watch the correct files for changes.
javascriptmodule.exports = { mode: 'jit', purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], theme: { extend: {}, }, variants: {}, plugins: [], }; - 2
Install Latest Versions
Make sure you are using the latest compatible versions of Tailwind CSS and Next.js. Update your dependencies in `package.json` and run the installation.
bashnpm install tailwindcss@latest next@latest - 3
Clear Cache
Sometimes, caching issues can prevent changes from being reflected. Clear the Next.js cache by deleting the `.next` folder in your project directory.
bashrm -rf .next - 4
Restart Development Server
After making the above changes, restart your Next.js development server to ensure all configurations are reloaded.
bashnpm run dev - 5
Verify File Watching
Check if Tailwind is correctly watching your files by making a change in one of your CSS classes and observing if the changes are reflected in the browser without a full reload.
Validation
To confirm the fix worked, make a change to a Tailwind class in your component or CSS file and save it. The changes should be reflected in the browser immediately without needing a full page reload. If the styles update correctly, the issue is resolved.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep