Day two of #100DaysOfCode complete, and I have finished the Header and Footer components for my Wordpress to Gatsby conversion.

TailwindCSS so far has been a joy to work with, but I'm sure that I am only scratching the surface, with a lot more to learn. Thankfully the documentation is great, and I am able to find anything I need with ease.

It's definitely a strange transition, moving from separate stylesheets, to just using the utility classes that TailwindCSS provides. You do not need to leave your Markup file, which can be confusing. I've found the following VSCode extensions to be extremely helpful...

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.

Autocomplete

Intelligent suggestions for class names, as well as CSS functions and directives.

Linting

Highlights errors and potential bugs in both your CSS and your markup.

Hover Preview

See the complete CSS for a Tailwind class name by hovering over it.

CSS Syntax Highlighting

Provides syntax definitions so that Tailwind features are highlighted correctly.

Headwind

Headwind is an opinionated Tailwind CSS class sorter for Visual Studio Code. It enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.

Both of these are available from the VSCode extension marketplace, I highly recommend them.

Have you got any tips for improving knowledge of TailwindCSS? Do you have any VSCode extensions that you can't live without?