DEV Community

Snehal Rajeev Moon
Snehal Rajeev Moon

Posted on

7

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
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
🦄 ❤️

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (2)

Collapse
 
prateekwayne profile image
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."

Image description

Collapse
 
snehalkadwe profile image
Snehal Rajeev Moon • Edited

yes, we can do that too. Thank you.

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video