CODEWITHSUNDEEP
csslaravelvisual-studio-codetailwind-css
Joshua Chen
Joshua Chen

Reputation: 11

vscode tailwind css intellisense not working

I have a problem. I'm learning laravel 8 and tailwind CSS. and as title vscode tailwind CSS Intellisense not working. My tailwind CSS version is 2.2.15. tailwind.config.js like the photo. enter image description here output no error enter image description here

so what can I do about this issue?

Upvotes: 1

Views: 8480

Answers (5)

GoodM4ven
GoodM4ven

Reputation: 111

Tailwind CSS IntelliSense extension doesn't work until you have a configuration file in your workspace, as its description clearly states!

You'll be fine even if you're just using the CDN, but you have to create a tailwind.config.js file in your project's root directory, containing the defaults at least:

module.exports = {
    content: ["./src/**/*.{html,js}"],
    theme: {
        extend: {},
    },
    plugins: [],
};

Also, and since you're working with Laravel, I guess you need to add Blade files to be recognized by the extension through this VSC setting (in settings.json):

"tailwindCSS.includeLanguages": {
    "blade": "html",
},

Moreover, this extension can offer intellisense in CSS files. So such files need to be binded too:

"files.associations": {
    "*.css": "tailwindcss",
},

One final note: The content paths are what going to be processed by Tailwind's JIT engine; understanding it is crucial!

Update: In my current setup, it also won't work until I run the project folder as a "VSC workspace".

Upvotes: 11

lazydeath
lazydeath

Reputation: 1

Using '' instead of "" might work.

Upvotes: -1

Alex Miller
Alex Miller

Reputation: 1

For me, it seems to be an issue with one of my extensions.

I needed to uninstall the "Emmet Live" extension and install the "Mithril Emmet" extension.

As some other answers have suggested, make sure you also put the following in your settings.json:

"tailwindCSS.emmetCompletions": true,
  "editor.inlineSuggest.enabled": true,
  "editor.quickSuggestions": {
    "strings": true
  },
"css.validate": false

Upvotes: 0

adithyan.cs
adithyan.cs

Reputation: 171

i had same the issue while working on tailwind with laravel.
unInstalling and reinstalling tailwind intellisense extension solved my problem.
also , dont forget to add the following in the part of your blade file : 

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

Upvotes: 0

SMBassett
SMBassett

Reputation: 1

Possible Solution

Disable a single VS Code Extension called: "Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets"

Evidence

Tailwind CSS IntelliSense was not working in my Angular project. I had installed Tailwind CSS using their instructions:

Click here

MY VERSIONS

  • VS Code: 1.62.3
  • Tailwind CSS: 3.0.1
  • Angular: 13.0.3

I disabled the extension, mentioned as my "Possible Solution" above, and Tailwind CSS IntelliSense worked instantly.

Demo of Tailwinds CSS IntelliSense in my Angular project

Upvotes: 0

Related Questions