[JIT]: JIT not working properly. like flex classes (next js)
Problem
What version of Tailwind CSS are you using? v2.1.1 What build tool (or framework if it abstracts the build tool) are you using? next.js 10.1.3 What version of Node.js are you using? v14.15.1 What browser are you using? Firefox, Chrome What operating system are you using? macOS Reproduction repository https://github.com/MuttakinHasib/tealeaf Describe your issue JIT not working properly... when i use classs like w-20 or flex classes its not working properly @adamwathan can you check my repo ? is it bug or i missed something ?
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Upgrade Tailwind CSS and Configure JIT Mode
The issue arises because Tailwind CSS v2.1.1 has limited support for Just-In-Time (JIT) mode, which may not fully support all utility classes like 'w-20' and 'flex' as expected in Next.js 10.1.3. Upgrading to a newer version of Tailwind CSS that has improved JIT support will resolve this issue.
Awaiting Verification
Be the first to verify this fix
- 1
Upgrade Tailwind CSS
Update your Tailwind CSS version to the latest stable version to ensure full compatibility with JIT mode.
bashnpm install tailwindcss@latest - 2
Enable JIT Mode
Ensure that JIT mode is enabled in your Tailwind CSS configuration file (tailwind.config.js). This will allow you to use utility classes dynamically.
javascriptmodule.exports = { mode: 'jit', purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], theme: { extend: {}, }, variants: {}, plugins: [], }; - 3
Clear Cache and Rebuild
After upgrading and configuring JIT mode, clear your build cache and restart your Next.js development server to apply the changes.
bashnpm run dev - 4
Test Utility Classes
Verify that the utility classes such as 'w-20' and 'flex' are now functioning correctly in your application. Check the rendered output in the browser.
noneInspect elements in the browser to see if the classes are applied correctly.
Validation
Confirm that the utility classes work as expected by checking the layout in your application. If the classes are applied correctly and the layout reflects the intended styles, the fix is successful.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep