TailwindCSS IntelliSense in VSCode is not working when I use it with the TailwindCSS "Play CDN". I don't use any more configuration.
I installed TailwindCSS IntelliSense and then created a sample project following the Play CDN guide, but neither autocompletion, hinting, nor any other features that TailwindCSS IntelliSense should provide are working.
This is a kind of work around:
Just create a file tailwind.config.js in root directory of project. And it will work as charm.
Even if there is no content inside the file, the Tailwind intellisense will work while using Play CDN of tailwind.
module.exports = { content: ['./src/**/*.{html,js}'], theme: {}, }; 
tailwind.config.js fileI’m using Tailwind via CDN and IntelliSense wasn't working either. I fixed it by creating a minimal:
tailwind.config.js:
module.exports = {
content: ["./**/*.html"],
};
And adding this to .vscode/settings.json:
{
"editor.quickSuggestions": { "strings": true },
"tailwindCSS.includeLanguages": { "html": "html" },
"tailwindCSS.experimental.configFile": "./tailwind.config.js"
}
Here's how I fixed it for Tailwind CDN usage...
All you need to do, is to just add this @import "tailwindcss"; to your css file.
This would help bridge gap for Intellisense and the editor will recognize tailwind classes. Then add the CDN Link in your html:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
Now your IntelliSense should show Tailwind classes properly in the editor, and Tailwind will also work in the browser.
Do not use the CDN for project development, and especially avoid including it in production.
The CDN generates the CSS on every single page load. This is a disadvantage for production projects because it adds extra load for every client on every page load and slows down page rendering.
Another reason is that generating TailwindCSS's CSS is not needed every time - it only needs to happen when the class names in your source files change, so it only needs to be generated once per build.
Every Tailwind plugin works this way, and a watch mode is provided for development so you don't have to manually recompile endlessly while working.
If you don't want to use Node and npm, then clearly it's better to choose the Standalone version. It's just an executable file that you download and run. If you choose one of these installations instead of the CDN from the start, the question wouldn't even arise, because they require at least a minimal configuration.
If you have no issues with Node and npm, in addition to the CLI, two plugins are also available - you can use either one depending on your project.
The reason is that TailwindCSS IntelliSense detects the package.json in your project and checks the installed TailwindCSS version. Without that, it looks for a configuration file.
When using a CDN, it clearly cannot find a version number, because nothing is installed. It also won't find a configuration, because the CDN works without it - it's only published for playgrounds (for example, embedding in a StackOverflow snippet). For TailwindCSS IntelliSense to start working, you need at least a configuration. This differs between v3 and v4.
You need a tailwind.config.js with the following content:
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Then, you must pass the path to this file in your VSCode configuration like this:
{
"tailwindCSS.experimental.configFile": "./tailwind.config.js"
}
Of course, provide the correct path and customize it relative to your setup. Place the configuration project-specifically in {your-project}/.vscode/settings.json, so the path only applies to the current project. (You can place it globally as well, but that will affect all future projects.)
See more: Workspace settings.json location
You need a main CSS file, e.g., main.css, with the following content:
@import "tailwindcss";
Then, you must pass the path to this file in your VSCode configuration like this:
{
"tailwindCSS.experimental.configFile": "./css/main.css"
}
Of course, provide the correct path and customize it relative to your setup. Place the configuration project-specifically in {your-project}/.vscode/settings.json, so the path only applies to the current project. (You can place it globally as well, but that will affect all future projects.)
See more: Workspace settings.json location
Try to invalidate cache / remove node modules and yarn/npm your project again.
