DEV Community

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

4 VSCode extensions I use when developing with Tailwind

Kalimah Apps on April 06, 2023

TL;DR All these extensions are available in this VSCode extension pack TailwindCSS Kit 1. Tailwind CSS IntelliSense Tailwi...
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 ;-)

Collapse
 
mrbrady profile image
Brady Sewall

I haven't seen these before. Great set of tools! Thanks for sharing.

Collapse
 
lotfijb profile image
Lotfi Jebali

Definitely needed this ✌️ thank you

Collapse
 
longliee profile image
LongLiee

Great

Collapse
 
meschacirung profile image
Méschac Irung

Did you try Tailus Snippets?

Collapse
 
pouriyachibaie1 profile image
pouriya-chibaie-1

thank you, very usefull