3 TailwindCSS VSCode extensions that make your life easier

An Nguyen Hieu Duc
2 min readJul 12, 2020

--

1. Tailwind CSS IntelliSense

Download

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.

2. Headwind

Download

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.

Enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.

3. Tailwind CSS Shades

Download

Tailwind CSS color palette generator.

Generate Tailwind CSS color palette from an initial color.

--

--

An Nguyen Hieu Duc

Web Developer, Mostly Front End, but curios in many other things like DevOps, new tool, new tech,…