React + Tailwindcss users? Help with some examples please!
I'm trying to learn this damn thing, unfortunately every job here uses it and I've done nothing but vanilla css for 3+ years and sadly, this stuff is pure alien to my little pepega brain.
Could you perhaps show me an example of a card, or a navbar using React/Tailwind? or honestly just any kinda simple component so I can get a feel as to how this is used.. preferably something using grid/flex too.
Thanks!
7 Replies
With Tailwind, think about each CSS property that you would apply to a class as its own class.
Instead of creating a custom class that contains all of the CSS properties you want for the element, you’re going to apply these utility classes directly to the element instead.
Here’s an example from an LLM.
To make tailwind less garbage I think the idea is you create react components for repetitive styles, so instead of putting a million classes on every card div, you create a Card component
That's interesting.. a friend just showed me his codebase and it was full of this kinda of thing
that first snippet by Noah is hideous though, there's more classes than actual content hahah
Yeah, it’s ugly for sure. If you read through the Tailwind Docs, you’ll see them admitting it’s ugly too.
From personal experience, I’ve done a bit of custom CSS and I build a lot faster with TW than with custom CSSing everything.
That's good to know, I'm sure once I understand how it works I'll be able to build well with it. It's that or I rock bootstrap lol
One good practice is the arrange the class a bit. I prefer this system
Even if you don't follow an exact order; it still makes it a bit more easier to use. There are also extensions for sorting tw clase (not sure how good it will be for version controll)
This is a great point. I started using Prettier and I set it up in VSCode so that every time I save, it reformats the file.
Tailwind has their own Prettier plugin that will automatically order the classes in tailwind's recommended order. It's super convenient.
Prettier · Opinionated Code Formatter
Opinionated Code Formatter
Automatic Class Sorting with Prettier - Tailwind CSS
People have been talking about the best way to sort your utility classes in Tailwind projects for at least four years. Today we’re excited to announce that you can finally stop worrying about it with the release of our official Prettier plugin for Tailwind CSS.