DEV Community

Snehal Rajeev Moon
Snehal Rajeev Moon

Posted on

Setup Tailwind CSS Intellisense in VS code


  • 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
Enter fullscreen mode Exit fullscreen mode

Add these settings

"tailwindCSS.emmetCompletions": true,
"editor.inlineSuggest.enabled": true,
"editor.quickSuggestions": {
   "strings": true
"css.validate": false,
Enter fullscreen mode Exit fullscreen mode

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

Thank you for reading
🦄 ❤️

Top comments (0)