Edit your settings.json as below:
{
// other settings
"tailwindCSS.includeLanguages": {
"javascript": "javascript",
"html": "HTML"
},
"editor.quickSuggestions": {
"strings": true
}
}
Tailwind CSS
tailwindcss.com › docs › editor-setup
Editor setup - Getting started - Tailwind CSS
Cursor is an AI-native code editor with features like context-aware autocomplete and built-in coding agents. Since it supports VS Code extensions, all of the Tailwind CSS tooling you're already familiar with works out of the box – including our official Tailwind CSS IntelliSense extension and the Prettier plugin for class sorting.
Visual Studio Marketplace
marketplace.visualstudio.com › items
Tailwind CSS IntelliSense - Visual Studio Marketplace
Extension for Visual Studio Code - Intelligent Tailwind CSS tooling for VS Code
VS Code Extension for Formatting Tailwind Classes (JSX/TSX)
Sounds like a great idea! I usually just do npm install -D prettier prettier-plugin-tailwindcss and set up a .prettierrc file in the root folder > add { "plugins": ["prettier-plugin-tailwindcss"] } to said file. But this might be able to fix it. My only issue as of now is when it separates the classes into their own lines, is there an option to turn that off? Also, do I need a selection or can I simply just press Ctrl + Alt + F and it will format the whole .jsx / .tsx file? Support this project. More on reddit.com
14
24
March 26, 2025VSCode Tailwind Class Reorder Extension
Just found this via Google and gave it a spin! Thanks for sorting out my unorganised mess! More on reddit.com
24
21
October 7, 2023Videos
08:01
3 Must-Have VS Code Extensions for Tailwind CSS - YouTube
21:50
How to Install Tailwind CSS in VS Code! (Beginner's Guide) - YouTube
12:07
How to Install Tailwind CSS in VS Code (2025 Beginner's Guide) ...
07:48
How to Setup Tailwind CSS in VS Code? - YouTube
The Best VS Code Setup for TailwindCSS (+ Prettier) - YouTube
DEV Community
dev.to › kalimahapps › 4-vscode-extensions-i-use-for-tailwind-2him
4 VSCode extensions I use when developing with Tailwind - DEV Community
June 30, 2023 - The Tailwind Documentation extension ... This extension enables developers to access the Tailwind CSS documentation directly from within the VSCode editor, without having to open a browser or leave the editor....
Reddit
reddit.com › r/tailwindcss › vs code extension for formatting tailwind classes (jsx/tsx)
r/tailwindcss on Reddit: VS Code Extension for Formatting Tailwind Classes (JSX/TSX)
March 26, 2025 -
Got into Tailwind last year when developing a personal project and ended up loving it, but disliked the utility class name bloat so I decided to make a VS Code formatter extension to prevent me from going insane. Hoping this helps anyone else out there with the same frustrations.
(Currently only JSX/TSX files supported, but I'm working on potential multi-language support for the next version. The code is open-source and can be found here: GitHub Repo)
Let me know if you find any bugs or issues. And if you liked the extension, please consider a rating/review, a star on the repo, or maybe even a sponsor :) or feel free to just share it around!
Tailwind Formatter Extension DemoExtension Link: https://marketplace.visualstudio.com/items?itemName=Myhtica.tailwind-formatter
Top answer 1 of 5
4
Sounds like a great idea! I usually just do npm install -D prettier prettier-plugin-tailwindcss and set up a .prettierrc file in the root folder > add { "plugins": ["prettier-plugin-tailwindcss"] } to said file. But this might be able to fix it. My only issue as of now is when it separates the classes into their own lines, is there an option to turn that off? Also, do I need a selection or can I simply just press Ctrl + Alt + F and it will format the whole .jsx / .tsx file? Support this project.
2 of 5
2
Do you have any plans of supporting Astro files?
Tailwind CSS
v3.tailwindcss.com › docs › editor-setup
Editor Setup - Tailwind CSS
Provides syntax definitions so that Tailwind features are highlighted correctly. Check out the project on GitHub to learn more, or add it to Visual Studio Code to get started now. We maintain an official Prettier plugin for Tailwind CSS that automatically sorts your classes following our recommended class order.
Top answer 1 of 16
53
Edit your settings.json as below:
{
// other settings
"tailwindCSS.includeLanguages": {
"javascript": "javascript",
"html": "HTML"
},
"editor.quickSuggestions": {
"strings": true
}
}
2 of 16
30
Here's how to get Tailwind Intellisense to work with React files
- Go to Tailwind CSS settings and add Javascript support
"tailwindCSS.includeLanguages": { "plaintext": "javascript" } - Reload vscode
If this doesn't fix things, try using ctrl + space before adding a class name.
View image of Tailwind settings
TW Elements
tw-elements.com › learn › te-foundations › tailwind-css › tailwind-css-intellisense
Tailwind CSS IntelliSense - best VSCode extension
Learn how to install and use Tailwind CSS IntelliSense - a powerful extension for Visual Studio Code with features like autocomplete, syntax highlighting, and linting.
GitHub
github.com › tailwindlabs › tailwindcss › discussions › 15132
[v4] VSCode extension not working when using only @theme directive · tailwindlabs/tailwindcss · Discussion #15132
November 23, 2024 - In Tailwind v4, if you're going all in on the CSS-first config using @config and @theme, you're technically no longer required to have a tailwind.config.js/ts file — and that’s great for build simplicity. BUT... 🧨 the official VSCode Tailwind IntelliSense extension currently relies on that config file to function properly.
Author tailwindlabs
CodeParrot
codeparrot.ai › blogs › best-tailwind-extensions
Best Tailwind Extensions
July 9, 2024 - Whether you are using the Tailwind Chrome extension for real-time editing, the Tailwind VSCode extension for intelligent autocomplete and linting, or the Tailwind Autocomplete extension for streamlined class suggestions, these tools are designed to make your development process more efficient.
GitHub
github.com › tailwindlabs › prettier-plugin-tailwindcss
GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order. · GitHub
Patterns should be enclosed in forward slashes. Note that JS regex literals are not supported with Prettier. This plugin automatically removes unnecessary whitespace between classes to ensure consistent formatting.
Starred by 7.1K users
Forked by 176 users
Languages TypeScript 97.6% | JavaScript 2.4%
Tailwind CSS
v1.tailwindcss.com › docs › intellisense
IntelliSense - Tailwind CSS
Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.
Medium
medium.com › @amalhan43 › create-vs-code-extension-with-react-typescript-tailwind-b42932adc77b
Create VS Code Extension with React, TypeScript, Tailwind | by Vivek Malhan | Medium
April 18, 2024 - //tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{js,jsx,ts,tsx}'], theme: { extend: {}, }, plugins: [], }
Reddit
reddit.com › r/tailwindcss › vscode tailwind class reorder extension
r/tailwindcss on Reddit: VSCode Tailwind Class Reorder Extension
October 7, 2023 -
I like the work that the tailwind team did with the prettier plugin, but for reasons I am not able to use prettier in some of the projects I work on.
That being said, the class reordering feature is pretty much a must for being able to quickly see what classes are on an element at a glance and knowing which classes will override others. Bonuses for minification and compression wins.
I have forked an older VSCode extension that is seemingly no longer maintained and updated it to work in much the same way as the prettier plugin; except that it only rearranges classes and should not touch other parts of your code at all. I am currently using it in JS, TS, and PHP files without issue. Feel free to give it a try if you find yourself in a similar situation to myself.
Tailwind Raw Reorder Extension
edit: added link to post body
Top answer 1 of 5
2
Just found this via Google and gave it a spin! Thanks for sorting out my unorganised mess!
2 of 5
1
Thank you for making this, mucking around trying to get classes sorted after every major upgrade in prettier, tailwind, or whatever framework I'm using was never fun. In tailwind v4, I remember reading there won't be a tailwind.config.js
Visual Studio Marketplace
marketplace.visualstudio.com › items
vscode-tailwind-magic - Visual Studio Marketplace
Extension for Visual Studio Code - A VSCode extension for Tailwind CSS with advanced features like variant groups, strict mode, attributify mode, aggressive mode, and more.
Flowbite
flowbite.com › resources
Plugins and Resources for Tailwind CSS
We cannot provide a description for this page right now
DEV Community
dev.to › jeetvora331 › must-have-tailwindcss-plugins-fl0
Must Have TailwindCSS Plugins - DEV Community
July 1, 2023 - The Tailwind Documentation extension provides quick access to the official Tailwind CSS documentation. This extension enables developers to access the Tailwind CSS documentation directly from within the VScode editor, without having to open ...
YouTube
youtube.com › watch
3 must have tailwindCSS VSCode extensions 🔥 - YouTube
Improve your tailwindCSS productivity with these three extensionsSections:00:00 - tailwind css intellisense00:47- tailwind documentation01:43 - tailwind fold...
Published April 18, 2023
GitHub
github.com › githubocto › tailwind-vscode
GitHub - githubocto/tailwind-vscode
Step right up! This is a plugin for Tailwind that exposes VS Code's theme colors as Tailwind colors — with all of the variants (bg, text, border, etc…) Now you can author styles for your extension's webviews with Tailwind and use the active ...
Starred by 41 users
Forked by 6 users
Languages JavaScript 100.0% | JavaScript 100.0%
Francisco Moretti
franciscomoretti.com › blog › tailwind-css-intellisense-vs-code-extension-a-web-developers-best-friend
Boost Productivity with Tailwind CSS VS Code Extension
May 14, 2023 - Improve your web development coding experience with the Tailwind CSS IntelliSense VS Code extension. Autocomplete, hover preview, and more.
Visual Studio Marketplace
marketplace.visualstudio.com › items
Tailwind Docs - Visual Studio Marketplace
July 28, 2023 - Extension for Visual Studio Code - Easily access the Tailwind CSS documentation from within Code