Search code examples
webstormjittailwind-csspostcss

Tailwind CSS no autocomplete with 'jit' Just-In-Time mode


I am just trying out the new Tailwind CSS 'jit' mode and realized when switched Webstorm fails to autocomplete the Tailwind CSS classes. May there be a fix to this?

my tailwind.config.js;

module.exports = {
  mode: 'jit',
  purge: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  presets: [],
  darkMode: false, // or 'media' or 'class'
  theme: {...}
...

My postcss config (inside nuxt.config.js);

postcss: {
      plugins: {
        'tailwindcss': {},
        '@tailwindcss/jit': {},
        autoprefixer: {},
      }
    }

Solution

  • It's a known issue: with "jit" mode, code completion list is very limited, most of applicable CSS classes are not suggested. This will be fixed in the scope of WEB-50318, please follow it for updates.

    Note also that, when using latest tailwindcss versions, the completion includes unrelated CSS classes from some *.test.css files. This will be fixed with the next tailwindcss package update, see https://github.com/tailwindlabs/tailwindcss/issues/4393. Workaround: delete node_modules/tailwindcss/jit/tests/ folder, it's not needed.