CODEWITHSUNDEEP
nuxt.jstailwind-css
ajobi
ajobi

Reputation: 3116

Problematic code completion of tailwindcss in IntelliJ IDEA

I would like to use nuxtjs together with tailwindcss for my frontend project. I have integrated tailwindcss via module like this:

  buildModules: [
    // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
    '@nuxtjs/tailwindcss'
  ],

The tailwindcss works now, but the code completion does not. There are two Intellij IDEA plugins which indeed do add a code completion for tailwind - but when I start to customize the tailwind.config.js file they fail, because they only suggest classes based on the default tailwind configuration (they don't recognize my own classes AND they suggest classes which are not available anymore because I have removed them via config file).

I could make a very similar setup work with react's nextjs - because this framework created an output css file in the .next folder, and IDEA could pick up on that. This then inspired me so I tried to remove the @nuxtjs/tailwindcss module, and set up the tailwindcss manually via postcss build option in nuxt. No file was created in the .nuxt folder, not even when I added the extractCSS: true option there.

I would like to achieve the result from nextjs in nuxtjs too. Does anyone have an elegant solution for that?

PS: I would like to stay with IDEA, and I would like to avoid manually creating tailwind output via console somewhere in my project everytime my tailwind configuration changes.

Upvotes: 1

Views: 3608

Answers (2)

Luis Lucas
Luis Lucas

Reputation: 1

Try do npm install -D tailwindcss@latest in same probject.

for here "webstorm/IntelliJ IDEA" first detect "tailwind css" when "tailwind css" are as dependencies in package.json - plugin not understand nuxt-tailwindcss :D

Upvotes: 0

ajobi
ajobi

Reputation: 3116

To this day I have not found a perfect answer to this. The solution I use is the one that generates the tailwind styles inside a hidden (git ignored) folder. That allows IDEA to pick up on the styles correctly. The only disadvantage is that you have to re-build the styles if you change configuration (which almost never happens besides the very start of the project).

So having the tailwind setup inside assets/css/tailwind.css, I will have a script like this:

"scripts": {
  "tailwind": "npx tailwindcss build assets/css/tailwind.css -o .tailwind/tailwind.css"
},

The IDEA will then be able to pick up classes from .tailwind/tailwind.css directory.

Upvotes: 6

Related Questions