Not working with PNPM + Tailwind CSS Intellisense extension for VSCode

[TotalLag]

I think the issue is a combination of getting hoisted by pnpm and intellisense, but this is the only plugin vscode can't resolve when it's enabled:

[Error - 12:34:02 PM] Tailwind CSS: Can't resolve 'tailwind-scrollbar' in 'c:\Users\root\Documents\Web\<redacted>\packages\storybook-ui'
Error: Can't resolve 'tailwind-scrollbar' in 'c:\Users\root\Documents\Web\<redacted>\packages\storybook-ui'
    at _ (c:\Users\root\.vscode\extensions\bradlc.vscode-tailwindcss-0.8.7\dist\tailwindServer.js:130:7108)
    at c:\Users\root\.vscode\extensions\bradlc.vscode-tailwindcss-0.8.7\dist\tailwindServer.js:131:713
    at c:\Users\root\.vscode\extensions\bradlc.vscode-tailwindcss-0.8.7\dist\tailwindServer.js:134:400
    at eval (eval at create (c:\Users\root\.vscode\extensions\bradlc.vscode-tailwindcss-0.8.7\dist\tailwindServer.js:5:78), <anonymous>:15:1)
    at c:\Users\root\.vscode\extensions\bradlc.vscode-tailwindcss-0.8.7\dist\tailwindServer.js:134:400
    at eval (eval at create (c:\Users\root\.vscode\extensions\bradlc.vscode-tailwindcss-0.8.7\dist\tailwindServer.js:5:78), <anonymous>:27:1)
    at c:\Users\root\.vscode\extensions\bradlc.vscode-tailwindcss-0.8.7\dist\tailwindServer.js:134:7632
    at c:\Users\root\.vscode\extensions\bradlc.vscode-tailwindcss-0.8.7\dist\tailwindServer.js:134:400
    at eval (eval at create (c:\Users\root\.vscode\extensions\bradlc.vscode-tailwindcss-0.8.7\dist\tailwindServer.js:5:78), <anonymous>:15:1)
    at c:\Users\root\.vscode\extensions\bradlc.vscode-tailwindcss-0.8.7\dist\tailwindServer.js:134:400

Interestingly, it builds just fine and works as intended, but the error prevents other intellisense functions from working. My workaround has been to disable (comment out) the plugin during development and re-enable for builds.

I'm more curious why pnpm interferes for this and have tried the new exclusion patterns to no luck:

public-hoist-pattern[]='!*tailwind-scrollbar*'
hoist-pattern[]='!*tailwind-scrollbar*'

Another workaround that works:

npm install --no-package-lock --no-save tailwindcss tailwind-scrollbar

(this just manually installs the packages individually away from pnpm)

[adoxography]

Weird - it's working just fine for me using the same version of bradlc.vscode-tailwindcss (0.8.7), though I'm running Linux. Guess it could must have something to do with Windows on top of everything else. :thinking:

[TotalLag]

very possible. i'm running this in WSL1 (linux environment on windows) but it's weird that it's only this plugin. my best guess is how it's trying to require the lib's path? (or a combination of how symlinks work in WSL)

const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette');
const toColorValue = require('tailwindcss/lib/util/toColorValue');
const { flagEnabled } = require('tailwindcss/lib/featureFlags');

tried poking in other plugins to see how they access the libs, but haven't gotten too far.

[Shaker-Pelcro]

I have the same issue, intellisense for tailwind CSS stopped working after installing and enabling this plugin. I'm using Windows 11.

[iurynadin]

Same issue here. Intellisense for tailwind stopped working after installing on macOS Big Sur.

[designbyadrian]

macOS Ventura here, works fine!

Tailwind CSS IntelliSense 0.9.1 VS Code 1.74

Using prefixed Tailwind above, hence the ld-.

[Winprox]

Got it working by adding public-hoist-pattern[]=*tailwind-scrollbar* to .npmrc

• macOS Ventura 13.3.1
• PNPM 8.2.0
• tailwindcss 3.3.1
• tailwind-scrollbar 3.0.0
• Tailwind CSS IntelliSense 0.9.11
• VSCode 1.77.3

[redmondking]

Has anyone been able to bypass this?

I get this error during compile and tailwind doesn't build at all unless I comment the line out in the config file:

[nuxt:tailwindcss 5:19:46 PM]  WARN  Failed to load Tailwind config at: ./tailwind.config.js require(...)(...) is not a function

  at tailwind.config.js:33:62
  at evalModule (node_modules/jiti/dist/jiti.js:1:256443)
  at jiti (node_modules/jiti/dist/jiti.js:1:254371)
  at node_modules/tailwindcss/lib/lib/load-config.js:48:30
  at loadConfig (node_modules/tailwindcss/lib/lib/load-config.js:50:6)
  at node_modules/@nuxtjs/tailwindcss/dist/module.mjs:289:29
  at Array.map (<anonymous>)
  at setup (node_modules/@nuxtjs/tailwindcss/dist/module.mjs:286:19)
  at async normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:2112:17)
  at async installModule (node_modules/@nuxt/kit/dist/index.mjs:2415:95)

My tailwind.config.js :

import tailwindcssAnimate from 'tailwindcss-animate'

/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: ['class'],
    content: ['./pages/**/*.{ts,tsx,vue}', './components/**/*.{ts,tsx,vue}', './app/**/*.{ts,tsx,vue}', './src/**/*.{ts,tsx,vue}'],
    theme: {
        container: {
            center: true,
            padding: '2rem',
            screens: {
                '2xl': '1400px',
            },
        },
        extend: {
            keyframes: {
                'accordion-down': {
                    from: { height: 0 },
                    to: { height: 'var(--radix-accordion-content-height)' },
                },
                'accordion-up': {
                    from: { height: 'var(--radix-accordion-content-height)' },
                    to: { height: 0 },
                },
            },
            animation: {
                'accordion-down': 'accordion-down 0.2s ease-out',
                'accordion-up': 'accordion-up 0.2s ease-out',
            },
        },
    },
    plugins: [tailwindcssAnimate,
        require('tailwind-scrollbar')({ nocompatible: true })({ preferredStrategy: 'pseudoelements' })
    ],
}

The suggestion by Winprox does not work.

• WSL2
• NPM
• tailwindcss v6.11.4
• tailwind-scrollbar v3.1.0
• Tailwind IntelliSense v0.10.5

[adoxography]

Hey @redmondking, this looks unrelated. Notice the error:

WARN Failed to load Tailwind config at: ./tailwind.config.js require(...)(...) is not a function

Try changing

require('tailwind-scrollbar')({ nocompatible: true })({ preferredStrategy: 'pseudoelements' })

to

require('tailwind-scrollbar')({
    nocompatible: true,
    preferredStrategy: 'pseudoelements',
})

It's a single options object - it's not going to support chaining like that.

[redmondking]

Hey @redmondking, this looks unrelated. Notice the error:

WARN Failed to load Tailwind config at: ./tailwind.config.js require(...)(...) is not a function

Try changing

require('tailwind-scrollbar')({ nocompatible: true })({ preferredStrategy: 'pseudoelements' })

to

require('tailwind-scrollbar')({
    nocompatible: true,
    preferredStrategy: 'pseudoelements',
})

It's a single options object - it's not going to support chaining like that.

Thanks, this fixed it. I don't know how I missed this. All is well again.

[MrBns]

yeah.. Same from me.. Not working for me.