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

user_12777068 0
Viewed 9474

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!

tailwind-css next.js jit
7 Answers
user_85916120

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}"],
user_154219830

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.

user_59542480

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.

user_173426620

in Nuxtjs, I added:

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

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

user_96603460

Check your CSS, tailwind can die if you have @charset "UTF-8"; in CSS file

user_89543910

In my case tailwind wasn't the problem - it turns out one of my components had a memory leak due to a timer.

Test tailwind on a completely separate page/component and see if the hot-refresh works. If it works on one page and not another - you most likely have a memory leak.

user_137146860
Related