Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 9, 2022 05:39 am GMT

Maximize your Tailwind efficiency by using these resources

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.

IntelliSense.gif

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.

Headwind .gif

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.

Animation4.gif
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 emotionjs.

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!


Original Link: https://dev.to/clumsycoder/maximize-your-tailwind-efficiency-by-using-these-resources-1agm

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To