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 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.
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...