VS code Intellisense support is not working

This issue has been tracked since 2022-11-16.

Description: Intellisense support is not working

Version

@nuxtjs/tailwindcss: ex: v6.1.3
nuxt: v3.0.0-rc.13

Reproduction Link

Fork this repository: https://github.com/lagamura/nuxt-app-tailwind-module
and run npm install

Steps to reproduce

install nuxt 3 rc by npx nuxi init nuxt-app
run npm install --save-dev @nuxtjs/tailwindcss and follow the setup instructions
run npm install
install tailwindcss extension in vs code
follow the instructions in docs to activate intellisense

What is Expected?

IDE intellisense support, autocomplete, hover etc.

What is actually happening?

Editor support not working, although if I add the tailwind.config.js file in the directory it works fine, but this may create a conflict between .nuxt/tailwind.config.cjs file.

DDiran wrote this answer on 2022-11-16

Same here! Followed the steps above and got the following error:

[.nuxt/tailwind.config.cjs] Building...
[Error - 09:59:35] Tailwind CSS: Cannot read properties of null (reading '__isOptionsFunction')
TypeError: Cannot read properties of null (reading '__isOptionsFunction')
    at /Users/MyUsername/.vscode/extensions/bradlc.vscode-tailwindcss-0.9.1/dist/tailwindServer.js:712:9720
    at Array.map (<anonymous>)
    at /Users/MyUsername/.vscode/extensions/bradlc.vscode-tailwindcss-0.9.1/dist/tailwindServer.js:712:9705
    at _require.Ks.default.require (/Users/MyUsername/.vscode/extensions/bradlc.vscode-tailwindcss-0.9.1/dist/tailwindServer.js:178:45097)
    at require (node:internal/modules/cjs/helpers:102:18)
    at /Users/MyUsername/.vscode/extensions/bradlc.vscode-tailwindcss-0.9.1/dist/tailwindServer.js:712:10084
    at Generator.next (<anonymous>)
    at /Users/MyUsername/.vscode/extensions/bradlc.vscode-tailwindcss-0.9.1/dist/tailwindServer.js:1:1219
    at new Promise (<anonymous>)
    at Xt (/Users/MyUsername/.vscode/extensions/bradlc.vscode-tailwindcss-0.9.1/dist/tailwindServer.js:1:1039)

xiBread wrote this answer on 2022-11-18

I found that the generated plugins array in .nuxt/tailwind.config.cjs becomes [null] if you have any plugins for some reason. Current workaround is to use the tailwindcss:config hook.

// nuxt.config.ts
import type { Config } from "tailwindcss";

export default defineNuxtConfig({
	hooks: {
		"tailwindcss:config": (config: Config) => {
			config.plugins?.push(...);
		}
	}
})

This won't provide IntelliSense for any plugins, but it will have everything else.

ExEr7um wrote this answer on 2022-11-25

Related: #565

abbadanor wrote this answer on 2022-12-19

#567 (comment) did not work for me. This did:

// nuxt.config.ts
import tailwindForms from '@tailwindcss/forms'
export default defineNuxtConfig({
    tailwindcss: {
        config: {
            plugins: [
                tailwindForms({ strategy: 'base' })
            ]
        }
    }
})

tberk wrote this answer on 2023-01-06

Changing the import style fixed for me. (Webstorm)

// tailwind.config.js
// changed this
import defaultTheme from 'tailwindcss/defaultTheme'

// to this
const defaultTheme = `require('tailwindcss/defaultTheme')

Your Name

Your Comment

More Details About Repo

Owner Name	nuxt-modules
Repo Name	tailwindcss
Full Name	nuxt-modules/tailwindcss
Language	TypeScript
Created Date	2019-04-04
Updated Date	2023-03-29
Star Count	1285
Watcher Count	12
Fork Count	157
Issue Count	57

YOU MAY BE INTERESTED

Issue Title	Created Date	Updated Date