TailwindCSS
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?
No Comments Yet