Dev server must be restarted to have classes applied with Snowpack
Problem
What version of @tailwindcss/jit are you using? 0.1.4 What version of Node.js are you using? 14.2.0 What browser are you using? Chrome What operating system are you using? macOS Reproduction repository https://www.youtube.com/watch?v=G6d-SXdcJXs Hi there ☺️ I tried to use this new JIT feature with a new React app built with Snowpack. Unfortunately, I cannot have Snowpack use Tailwind JIT properly. I think I might have missed something about the configuration process. When changing a class in a component, I have to stop and restart the dev server. Here are my config files: [code block] [code block] [code block] Thanks!
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Update Tailwind JIT Configuration for Snowpack
The issue arises because the Tailwind CSS JIT mode requires specific configuration to watch for changes in your CSS classes. If the configuration is not set up correctly, the development server does not recognize changes made to the classes, necessitating a manual restart.
Awaiting Verification
Be the first to verify this fix
- 1
Update Tailwind CSS JIT Version
Ensure you are using the latest version of Tailwind CSS JIT. The version 0.1.4 is outdated and may not support the latest features or bug fixes.
bashnpm install @tailwindcss/jit@latest - 2
Configure Tailwind CSS in Snowpack
Ensure your Snowpack configuration file (e.g., snowpack.config.js) is set up to include Tailwind CSS. This includes adding the Tailwind plugin to your PostCSS configuration.
javascriptmodule.exports = { plugins: ['@snowpack/plugin-postcss'], }; - 3
Add Tailwind JIT to PostCSS Configuration
In your PostCSS configuration file (e.g., postcss.config.js), ensure that you include the Tailwind JIT plugin. This allows Tailwind to watch for class changes.
javascriptmodule.exports = { plugins: [require('@tailwindcss/jit'), require('autoprefixer')] }; - 4
Check Tailwind CSS Configuration
Verify that your Tailwind CSS configuration file (tailwind.config.js) is set up correctly and includes the paths to all your template files. This ensures that Tailwind can generate the necessary styles.
javascriptmodule.exports = { purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], theme: { extend: {}, }, variants: {}, plugins: [], }; - 5
Restart Snowpack Dev Server
After making the above changes, restart your Snowpack development server to apply the new configurations.
bashnpm run start
Validation
To confirm the fix worked, modify a CSS class in one of your components and check if the changes are reflected in the browser without needing to restart the Snowpack dev server. If the changes appear instantly, the configuration is correct.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep