I have been using Tailwind for the past few months and I don't think now I would switch to other styling frameworks. It is just a lifesaver! It is mobile-first, has an easy learning curve, and saves a lot of time. And it doesn't make me feel dumb like CSS does 😟

Tailwind is already pretty good, but we can make it even better. Here are a few resources that helped me to build projects with Tailwind efficiently and fast.

Before starting, I expect you to be already familiar with Tailwind and know about its workings. I have discussed CSS prerequisites and use cases for Tailwind in my last blog, which you can read here.

Online Playground

Tailwind Play is an online playground for Tailwind CSS. The best thing about it is that it shows the output in no seconds! You can also change the CSS3 styling or tailwind.config file if needed. It also has autocomplete and syntax highlighting for tailwind classes.

🌐 Tailwind Play

VS Code Extensions

Tailwind CSS IntelliSense

This is a MUST have extension. It has autocomplete, syntax highlighting and lining abilities. It also lets us see CSS for a particular tailwind class when hovered.

🔥 Get it on Visual Studio Marketplace.

Headwind

Headwind is an opinionated CSS class sorter that enforces consistent order of classes. It parses the entire file on each save and sorts classes on the basis of importance and removes duplicates. It also highlights conflicting classes and lets us choose what to omit.

🔥 Get it on Visual Studio Marketplace.

Tailwind Docs

This extension will open the documentation directly from VS Code. Open command palette by ctrl/cmnd + shift + p and type the topic you want to search.

🔥 Get it on Visual Studio Marketplace.

Tailwind Styled Snippets

This is useful only if you're using styled-components with your react project. This extension rocks in creating components with tailwind and styled components or emotions.

🔥 Get it on Visual Studio Marketplace.

Components Library

Flowbite

Flowbite is a freemium component library consisting of 400+ components and elements. The free version is enough to fulfil basic use cases but there is also a premium version. Two premium plans are 'developers' and 'designers' that give you more features to use. Premium version has features like post CSS configuration, JS minification, Figma preview and etc.

🌐 Flowbite

Tailwind Components

The biggest open source component library for Tailwind UI components and templates. It has a variety of components to choose from and you can copy paste the code that you need.

🌐 Website link

⚡ GitHub Repo

PostSrc

PostSrc also has a wide range of tailwind components to use, but it's not as famous as Tailwind.

🌐 PostSrc

Colors

Tailwind Shades

This website generates color shades when a base color is given as the input. You can also change hue, saturation or light of colors. At last, you can copy code to paste in tailwind.config file.

🌐 Website link

⚡ GitHub Repo

Shades Generator

Similar to Tailwind Shades but it has a color picker that you can use to get the color from the browser in real time. It doesn't have the functionality to adjust HSL but you can remove a shade from the palette if you want to.

🌐 Website link

⚡ GitHub Repo

Cheat Sheet

Actually, official docs are so great that you don't even need cheat sheets. But these are quick references if you need everything in one place. Jay Alraj has created a site that has everything about Tailwind CSS in a clean and concise way.

One thing, it is not updated to Tailwind v3 yet but I assume something will come out soon.

🌐 Cheatsheet link

Plugins

Tailwind CSS also gives you the flexibility to add custom plugins.

There are many tailwind plugins available on the internet, but one that I used is from a GitHub repo tailwind-plugins. It has plugins for animations, gradients, keyframes and pagination.

⚡ Gradients

⚡ Animations

⚡ Keyframes

⚡ Pagination

Another repo, tailwind-typography is a plugin for manipulating the typography of the app.

⚡ Typography

Icons

HeroIcons

HeroIcons is an open source project for SVG icons created by the makers of Tailwind CSS itself! You can integrate them with React or Vue libraries and also get a Figma file to use in your designs

🌐 Website link

⚡GitHub Repo

🎨 Figma

Conclusion

I found these resources very helpful while developing projects. If you think I am not using something that would make my life easier, do let me know! I am most active on Twitter, LinkedIn and Showwcase.

This is my second article about Tailwind CSS. I am planning to write more as learn more about this. Subscribe to the newsletter or follow me to have an update about it :)

Happy Designing! 🎨

First published here