Classes duplicate in auto-complete as you save when using Tailwind JIT

[negcx]

I expect this is related to using JIT. It seems each time you save, JIT generates a new stylesheet perhaps, and it is then pulled into the VS Code extension. After developing for an hour or so, VS Code starts grinding to a halt when you want to type a class name as it seems to have a massive list.

[bradlc]

Hey @negcx. Are you able to share a project repository that reproduces this? Also, which operating system, VS Code version, extension version, and package manager are you using? Thanks!

[fredericseiler]

Hi,

I can confirm this bug with JIT + file watcher.

• macOS Big Sur 11.3.1
• VS Code 1.56.0
• Tailwind CSS IntelliSense 0.6.3
• npm 7.11.1
• Tailwind CSS 2.1.1

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    mode: 'jit',

    purge: [
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography')
    ],
};

[bradlc]

Is your project public @fredericseiler?

Also when this is happening (duplicated completions) are you also seeing duplicated hover previews, diagnostics and/or color decorators?

[fredericseiler]

Some screenshots with a class conflict:

Hover preview

Quick action

Problems (this one is fine)

(not quite sure what you mean by "diagnostics and/or color decorators")

Unfortunately, the project I'm working on is private.

I can quickly setup a public repo (with the Laravel framework) if you want, but the main things are:

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "TAILWIND_MODE=build mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.3.1",
        "@tailwindcss/typography": "^0.4.0",
        "alpinejs": "^2.7.3",
        "laravel-mix": "^6.0.6",
        "postcss": "^8.1.14",
        "tailwindcss": "^2.0.1"
    }
}

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ])
    .version();

and the tailwind.config.js mentioned earlier:

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    mode: 'jit',

    purge: [
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography')
    ],
};

[fredericseiler]

So, I just restarted VSCode, and the bug seems to have vanished, even after several css rebuilds under watcher... 🤷‍♂️

[bradlc]

I have just pushed out a potential fix for this in v0.6.4 🤞 I have not been able to reproduce the issue at all yet though. Please update the extension and let me know if the problem persists. If anybody is still seeing this a repository which reproduces the issue would be much appreciated, thanks!

[fredericseiler]

I tried everything to reproduce it, in vain. I suspect it happened while I was toggling JIT mode on/off with Laravel Mix file-watcher running, but then again, can't confirm it.

[sergio101]

hi, @bradlc .. I just installed v0.6.4 and everything seems to be working fine now. Thanks!

[bradlc]

Anyone still seeing this since v0.6.4? 👀

[bradlc]

I'm going to assume this is resolved then 🤞 If not please open a new issue, thanks!