Setup Tailwind CSS Intellisense in VS code

Holla,

• Tailwind is utility-first framework which gains popularity in very short period of time.
• It makes quicker to write and maintain css code of your project.
• According to tailwind css official website, it is highly customizable, low-level CSS framework.
• It also enables to build complex responsive layout more easily.

There are lots of extension available in VS code, to easily integrate tailwind class it also provides an extension which allows us to user its built in classes faster.

Tailwind CSS IntelliSense is an extension available in marketplace which is provided by Tailwind Labs.

We will see how we can install it and use it in VS Code

1. Open Extension Marketplace of VS Code
2. Search Tailwind CSS Intellisense and install and after installation make sure you have tailwind config file named as named tailwind.config.js or tailwind.config.cjs in your workspace to activate it.
3. Configure it in settings or you can edit settings.json file

On Windows/Linux — File > Preferences > Settings
On macOS — Code > Preferences > Settings

Add these settings

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

That’s it, reload VS code and start using it.

Thank you for reading
🦄 ❤️

Comments

[Prateek Wayne]

we have to update the user>setting.json

1. Press Command + Shift + P simultaneously.
2. Type "setting.json" and select it from the options."

[Snehal Rajeev Moon]

yes, we can do that too. Thank you.