JIT mode for Tailwind not working in localhost preview in Next JS

Question

I'm building a Next JS website and running Tailwind with JIT. This is my tailwind.config.js:

  module.exports = {
  mode: "jit",
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  extend: {},
  plugins: [],
  };

Problem is that every time I write new code I have to restart my server and run 'npm run dev' because it's not updating my CSS on http://localhost:3000/.

I also get a warning when I run my server:

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.

Any ideas what might be causing this? Thanks!

Answer 1

Since JIT mode generates your CSS on-demand by scanning your template files, it’s crucial that you configure the purge option in your tailwind.config.js file with all of your template paths, otherwise, your CSS will be empty. replace your purge entry with the following:

    purge: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx,vue}"],

Answer 2

Check out this https://tailwindcss.com/docs/just-in-time-mode#styles-don-t-update-when-saving-content-files

You can also add TAILWIND_MODE=watch to your .env file.

I hope it's work because when i delete this, i am also facing same error.

And this warning is fine. It just a message

Answer 3

I had the same issue, After removing all inline tailwind classes and put them in CSS files with @apply it gets to work well.

Maybe tailwind compiles CSS before Next server renders components.

Answer 4

fixed this, just edit the 'purge' property in your tailwind.config.js file a little by adding the correct path like this './public//*.html', './src//*.{js,jsx,ts,tsx,vue}',

and you're good to go.

Answer 5

in Nuxtjs, I added:

@import url('tailwindcss/dist/tailwind.min.css');

in to file: ~/assets/css/tailwind.css