[v4] importing tailwindcss/utilities breaks hmr
Problem
Im using: - tailwind v4.0.0-alpha.17 ( @tailwindcss/postcss ) - nuxt v3.12.3 - sass v1.77.8 The following code works perfectly: [code block] But whenever i try and import the utilities from tailwind like so: [code block] The HMR stops working, it does still say that the HMR got updated but it wont actually apply the changes to the front-end. Whenever i save my main scss file, the changes actually get applied.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix HMR Issues with TailwindCSS Utilities in Nuxt
The issue arises because TailwindCSS utilities are being imported in a way that conflicts with the Hot Module Replacement (HMR) mechanism in Vite. This can cause Vite to not properly track changes in the utility classes, leading to a situation where updates are not reflected in the front-end despite HMR indicating an update.
Awaiting Verification
Be the first to verify this fix
- 1
Update TailwindCSS Configuration
Ensure that your TailwindCSS configuration is set up correctly to enable JIT mode, which improves HMR performance. This can be done by modifying your tailwind.config.js file.
javascriptmodule.exports = { mode: 'jit', purge: ['./pages/**/*.{vue,js,ts,jsx,tsx}', './components/**/*.{vue,js,ts,jsx,tsx}'], // other configurations }; - 2
Import Tailwind Utilities Correctly
Instead of importing all utilities at once, import only the necessary utilities in your main SCSS file. This can help Vite track changes more effectively.
scss@import 'tailwindcss/utilities'; - 3
Check Vite Configuration
Ensure that your Vite configuration in nuxt.config.js is set up to support HMR correctly. You may need to add specific settings to optimize HMR for TailwindCSS.
javascriptexport default { vite: { server: { hmr: { overlay: false } } } }; - 4
Clear Cache and Restart Dev Server
Sometimes, stale caches can cause issues with HMR. Clear the cache and restart your Nuxt development server to ensure all changes are applied correctly.
bashnpm run dev -- --clear-cache
Validation
To confirm the fix worked, make a change in your SCSS file that includes TailwindCSS utilities and save it. Check if the changes are reflected in the browser without needing a full page reload. If HMR updates are applied correctly, the issue is resolved.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep