Tailwind is probably the hottest CSS solution right now. This utility-first library provides amazing flexibility and speed of development with a small learning curve (if you already know CSS well).
In this short article, I will try to provide you with all the resources needed (all that I use) while developing an app with Tailwind.
Creating project
Hardest part of any project, from this point forward easy-peasy lemon squeaky. I mostly use create-t3-app because it provides all the libraries I require from the get-go. If you are using for example npm create vite or some other command to create your project, it’s almost sure that official tailwind docs has you covered.
How to remember all these shortcuts?
I had a problem with it at the beginning, but to be honest, they are quite simple. After your second project with Tailwind, you will know most of them. But I always keep a cheat sheet close-by.
Won’t lie if I say that basically anything you pick will work. The most important thing that I will fit your style/workflow. Here are the most common:
- tailwind components → looks nice, has good toast info that you really copied the class,
- nerdcave → looks the most out of ‘90, but big plus is that you can select Tailwind version,
- flowbite → The one I use the most. For me, most visually pleasing, and you also can select Tailwind version easily.
So if you have one of these on your second monitor or anywhere close, I think you can style elements very really easy.
I must here say that not all the tech docs are well-designed and maintained (looking at you tRPC) but Tailwind has one of the best docs site there is. Very pretty, with UX you can dream of on your site. Mostly I use it to copy some classes or to learn a thing or two. It takes too much time (compared to a cheat sheet) to use it while programming for my taste. But I wouldn’t be surprised if many people preferred it.
Plugins
Now real magic enters the room.
Extension
Tailwind CSS IntelliSense is a godsend.
It’s enough if you are in the neighborhood of the property you want. Just press control + space (or whatever your IDE/operating system accepts) and there you can select the class you wanted but didn’t know how to name. If I say that cheat sheets are a nice-to-have intellisense is a must for me. Speeds up work so much, and the autocomplete is brilliant as always.
Prettier
I don't like Tailwind because of the long classes
How can I know where anything is in this mess?
What are some comments I read on the internet These people didn’t have their prettier tailwind plugin. This bad-boy sorts your classes as well as the librarian sorts books. Always the same order. If you get used to it, there is no going back.
Library
I know what you think, most of the components for Tailwind cost money! And you won’t spend your precious hard-earned cash on the side-project. Here comes a great man called shadcn. He created something really good.
A component library based on Radix (which I wrote about here) and styled them with Tailwind. It’s nice to mention that for some time, Radix official docs have Tailwind examples!
You can just copy and paste classes, and add to your project-specific Radix components and here You have a styled component that it’s responsive and have everything that You would want out of it.
You also have more selection as Tailwind is on top of the world right now:
I'm curious, I want to know more
That’s really great, here are some resources I recommend:
Book
Authors of Tailwind wrote a great book ”Refactoring UI". I can’t recommend it enough. Maybe it won’t teach you Tailwind tricks, but I will make you understand the whole design system below it. Why shadow-md have these values not other how to use color pallets etc. It’s definitely worth your time and I will for sure make you a better UI/UX expert, which even as developers we need to be.
Bonus
Interesting and helpful resources on Tailwind:
- Outstanding themes and UI Kits by Michael Andreuzza
- tremor.so - an Incredible open-source library built on top of Tailwind for devs to build dashboards and charts
- All of the work that Simon Vrachliotis does
- Ever tried to create an HTML template for email? Here a is better way to do it with Tailwind Resend,
- Mega thread by surjithctly which shows some amazing tricks you can do with Tailwind!
There are many more people that are doing great work in the space. If the community is vibrant and active, you know that the tech is at least worth a try!
Top comments (0)