DEV Community

Cover image for 4 VSCode extensions I use when developing with Tailwind
Kalimah Apps
Kalimah Apps

Posted on • Updated on

4 VSCode extensions I use when developing with Tailwind

TL;DR

All these extensions are available in this VSCode extension pack TailwindCSS Kit

1. Tailwind CSS IntelliSense

tailwind css intellisnse image

Tailwind CSS IntelliSense is a powerful tool that can help developers to write code faster and more efficiently. The tool provides real-time suggestions for Tailwind CSS classes, reducing errors and improving code quality. By using IntelliSense, developers can increase productivity, reduce the learning curve, and improve the accessibility of their applications. If you are a developer working with Tailwind CSS, be sure to take advantage of this powerful feature.

2. Tailwind Fold

tailwind fold extension image

This extension is extremely helpful when working with Tailwind. Long list of classes can clutter the html part and this extension provide a great way of hiding them away and show them only when needed. In addition to the default functionality, the options are well-thought and fit almost any preference. For example, I like the classes to be unfolded when I click on the line not the class itself, and there is an option for that.

I gave the extension 5 stars rating but there is one issue I would like to see improved. I use eslint with eslint tailwind plugin which breaks long classes into multiple lines. The extension does not seem to fold classes that spans over multiple lines.

3. Tailwind Documentation

Tailwind Documentation image

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 a browser or leave the editor.

4. Tailwind Config Viewer

Tailwind Config Viewer image

Tailwind config can be confusing. They might expand exponentially and make it harder for users to know the resolved config. This is why I created this extension. It enables users to view the resolved Tailwind config and it will also show the color for any color-related classes (text-*, bg-*, accent-* ... etc)

In future, I am planning to make the classes clickable so when a user clicks on a class it will be inserted in html section.

👥 Connect
Twitter: @kalimahapps
GitHub: KalimahApps
Website: https://kalimah-apps.com/
CodePen: https://codepen.io/khr2003

My Other Posts

Top comments (25)

Collapse
 
wizdomtek profile image
Christopher Glikpo ⭐

Sure, here are some additional Visual Studio Code extensions that can be helpful when developing with Tailwind CSS:

Headwind: This extension automatically sorts and organizes Tailwind CSS classes in your code. It helps to improve code readability and maintainability by grouping classes together and removing duplicates.

Better Comments: This extension highlights different types of comments in your code with distinct colors and formatting. It can be used to visually distinguish Tailwind CSS classes from regular comments or code.

Bracket Pair Colorizer 2: This extension colorizes matching brackets in your code to make it easier to identify code blocks. This can be useful when working with Tailwind CSS classes that use nested brackets.

Turbo Console Log: This extension provides a shortcut for adding console.log statements to your code. It can help you quickly debug Tailwind CSS classes and their values.

These extensions can streamline your development workflow and make it easier to work with Tailwind CSS.

Collapse
 
kalimahapps profile image
Kalimah Apps

These are useful extensions. I have used headwind previously but I stopped using it because I did not like the way it sorted the classes. I actually created a plugin for ESLint that sort the classes in a way that I think is easier to read. You can find more about it here: dev.to/kalimahapps/increate-tailwi...

Collapse
 
adnanalbeda profile image
Adnan

Tailwind now have their own sort plugin for prettier, which will sort utility classes according to generation order, so you can tell which utility will override which.

Collapse
 
kalimahapps profile image
Kalimah Apps

That is true. I used it first but then I changed my mind due to two reasons:

  • I stopped using prettier and started using ESLint as a formatting tools.
  • The sorting order was not intuitive. For example, when I set position, like absolute, I need to know if I also had set right, left, top, bottom. Same thing with grid, flex .. etc. Which is why I created the ESLint tailwind plugin.

I am not against using the official prettier plugin but I don't feel it fits well with my workflow and coding style.

Thread Thread
 
jumokee profile image
jumokee
Thread Thread
 
kalimahapps profile image
Kalimah Apps

Thanks. Maybe check my other post in response to this.
dev.to/kalimahapps/goodbye-prettie...

Collapse
 
rafikadir profile image
rafikadir

Thank you for sharing your valuable insights on the 4 VSCode extensions you use when developing with Tailwind CSS. As a developer who also utilizes Tailwind CSS in my projects, I found your recommendations very helpful. Your article has saved me a lot of time and effort by providing me with the right tools for my Tailwind CSS workflow. Once again, thank you for sharing your knowledge and expertise with the community.

Collapse
 
kalimahapps profile image
Kalimah Apps

Glad I could help.

Collapse
 
ahmadwahyudi profile image
Ahmad

Wow, thanks for this useful tools.
Already install the first one, the others Will be installed soon

Collapse
 
coderamrin profile image
Amrin

Great article, thanks for sharing.

Collapse
 
johanpiquet profile image
Johan PIQUET

thank you, very usefull

Collapse
 
musman0741 profile image
Muhammad Usman

This is so awesome, and gonna save me a lot of time. Thank you so much

Collapse
 
alexdev006 profile image
alexdev006

Thanks ! Very helpful ;)

Collapse
 
ngthuongdoan profile image
Doan Ngoc Thuong

Name: Headwind
Id: heybourn.headwind
Description: An opinionated class sorter for Tailwind CSS
Version: 1.7.0
Publisher: Ryan Heybourn
VS Marketplace Link: marketplace.visualstudio.com/items...
Recommend this too

Collapse
 
renaudcci profile image
Renaud-CCI

Is anyone know how to use Tailwind Documentation on linux?

Collapse
 
kalimahapps profile image
Kalimah Apps

If you are referring to the extension, it should not be any different between Windows and Linux. The details of usage are included in the readme section.

Collapse
 
renaudcci profile image
Renaud-CCI

This application have to be open with ctrl + alt + T, but it open the shell on linux..

Thread Thread
 
kalimahapps profile image
Kalimah Apps • Edited

The issue has already been addressed here: github.com/alfredbirk/tailwind-doc...

It seems that it won't change.

Thread Thread
 
renaudcci profile image
Renaud-CCI

Thanks a lot, I did not see the answer before. It works now !

Collapse
 
artydev profile image
artydev

Great Thank you ;-)