TL;DR
All these extensions are available in this VSCode extension pack TailwindCSS Kit
1. Tailwind CSS IntelliSense
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
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
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 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
Top comments (25)
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.
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...
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.
That is true. I used it first but then I changed my mind due to two reasons:
I am not against using the official prettier plugin but I don't feel it fits well with my workflow and coding style.
Food for thought
youtube.com/watch?v=IAwpB6I1c8Y
Thanks. Maybe check my other post in response to this.
dev.to/kalimahapps/goodbye-prettie...
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.
Glad I could help.
Wow, thanks for this useful tools.
Already install the first one, the others Will be installed soon
Great article, thanks for sharing.
thank you, very usefull
This is so awesome, and gonna save me a lot of time. Thank you so much
Thanks ! Very helpful ;)
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
Is anyone know how to use Tailwind Documentation on linux?
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.
This application have to be open with ctrl + alt + T, but it open the shell on linux..
The issue has already been addressed here: github.com/alfredbirk/tailwind-doc...
It seems that it won't change.
Thanks a lot, I did not see the answer before. It works now !
Great Thank you ;-)
I haven't seen these before. Great set of tools! Thanks for sharing.
Definitely needed this ✌️ thank you
Great
Did you try Tailus Snippets?
thank you, very usefull