Convince me to use tailwind

I learned Tailwind CSS, I built my SAAS based on Tailwind Templates + a free resource of Tailwind blocks and one year later I made 12k....

Also, most important, I have redesigned this morning my studio jamstacker.studio, it took me 30 minutes... then I decided to match my other projects to the studio, with the same design system, and I updated 4 of them. It took me three hours.

All of this in the same day....

I've been using Tailwind CSS in a number of projects, both personal and commercial, and I'd say it's definitely worth learning. It really comes down to you how you "think" about CSS - for me, Tailwind is just a more cohesive syntax than trying to remember raw CSS. As others here have already said, it's just horses for courses - it will either fit your personal style or it won't.

I started it, but I found I didn't like it, especially since it adds a lot of clutter to your markup. I've just been writing CSS now with vanilla-extract, it's a TypeScript CSS library, kind of like SASS but using TS as the preprocessor language.

I built all the landing pages for my startup using tailwind initially, the plain html css js version, without vue or any frontend frameworks.

It's one of the faster ways to setup a landing page that's reasonably beautiful. They have pre-built components that are most frequently needed to convert users and get a message across.

plus if you care about design but don't have the time/energy/creativity to design something from the ground up, that just multiplies the prettiness of your output.

my workflow was:
I'd write down (on paper) what overall components i'd want on my landing page like:

1. header + subtitle + CTA
2. app screenshot
3. user testimonials/social proof
4. CTA
5. top 3 features
6. CTA
7. FAQ
8. CTA

and then go on tailwind and copy the right components and edit the content and push to github (deployed with netlify) and boom, new iteration of our landing page is ready!

If you are not comfortable with this library why push yourself to it?

I looked at it once, puked, and never returned to it. Why would I? There are A LOT of great CSS libraries around, pick that you like and that's it.

Currently, I'm using Bootstrap for SEO-dependent websites, also used it for web apps, but moved to Mantine recently as it's a great library.

Is Tailwind worth it though if you're already using a React component library? How does Tailwind compare to Theme UI, which is another great option IMO?

It's one of these tools you just have to try out yourself. I've seen so many people hate on it and then fall in love after trying it for a few days.

There is no problem at all to use TailwindCSS with React.

If you want to create custom designs for your website relatively quickly, and don't want that Bootstrap feel, then in my opinion TailwindCSS is the best solution.

If the classes in the JSX code bother you, you can also use them normally in a CSS file. (Which, in my opinion, somewhat undermines the point of TailwindCSS).

Supabase UI, for example, uses TailwindCSS for their components this way:
https://github.com/supabase/ui/tree/master/src/components/Button

All in all, though, I would just advise you to give it a try.

Before that you can't know if you want to use it, no matter how many of us tell you that TailwindCSS is great.

It allows you to build MVPs quickly

I'm launching a private beta in 7 days of a product I built on React / Tailwind and couldn't be more excited.

As a primarily backend developer that loathed the constant CSS file dance (and refactoring CSS with tools like LESS and SASS), I love Tailwind so much.

Once you get used to the class syntax and you install the VS Code plugin it is an absolutely wonderful coding experience. Things just work. Things just look good. It is shockingly easy to code mobile first and make your app actually functional on mobile web.

I no longer get spooked knowing I need to implement a complex new UI component. I'm no longer hyperfocused on structuring my CSS classes in a specific way. I just write the code, and it looks exactly how I envisioned it should look when I fire up the browser.

I'm still a relatively decent frontend dev despite my backend upbringing, but Tailwind actually makes me enjoy the overall experience.

I think the biggest downsides I've experienced thus far are occasional tooling issues (e.g. random post css processing app crashing, and code changes not showing up) and maintenance can be a bit of a thing when you want to change common styling amongst components. React can help solve the latter.

I think I can confidently say I'm a Tailwind convert now.. and I don't think I'll be going back. At least not on projects where I have a say.

You do still need to have CSS knowledge. You need to know how the display and positioning systems work (e.g. relative and absolute), flex, media queries, etc. But assuming you know all that, Tailwind lets you write all of it out so quickly and get results so fast.

I find that Tailwind is really fast to build with because components are completely isolated to each file. It's nice because you can grab existing Tailwind components on the internet (and there's lots out there), and just copy paste them into your code, and they work perfectly fine. (although if you're using React then you gotta make changes like rename "class" to "className").

With other CSS systems, you can't always copy paste things in, because the new CSS rules can easily break your existing pages. It's super easy to cause regressions when writing CSS.

There's other systems that provide the same kind of isolation (like BEM) but Tailwind is really easy to use in comparison.

I'd rather have more cluttered lines than have to scroll up and down the page with styled components or have to swap between files constantly.

This is what I use to use tailwind in React : https://github.com/ben-rogerson/twin.macro

Alright alright, I'll give it a shot. Thanks for all the feedback!

i love that it sets the framework for css, and the fact that you can basically prototype in real time.

there’s also a speed benefit when using it vs. good ol css

Once you do it, you’ll get the hype 😁

Not using React, but I had similar doubts in the beginning (so many class names to learn), but in the end (after 1+ year of use) it was totally worth it. The sheer speed and consistency of how fast we can now develop UI, wow.

Do yourself a favor and at least try it for a few weeks.

Trust me, do it.

I used to be all concerned with writing class names so that they “made sense”, trying to follow the BEM convention and would always create seperate css files for different components to keep everything organised but it always just felt heavy to work with even with organisation.

There’d be constant switching between these files too, which is taxing over time. I’d always often find myself adding conditional styles too using the style attribute which just got messy too.

Now using Tailwind, it’s a breeze. No worrying about how to name a class, switching between files and writing messy styles. It’s super easy to get going (install the Tailwind extensuon if you use VSCode too, by Tailwind Labs)

Worst case, you can just go back. I know I won’t though!

Also, checkout wickedblocks.dev, they’re a Tailwind component library, I love it. It helped me to get started with Tailwind (all of the mt’s and px’s can be daunting at first)

As for integrating seamlessly - it’s not a problem. You can just leave you normal css classes and add the desired tailwind ones on too. This will lead to some duplicate styles being applied from your own classes if you’re not careful though.

Using Tailwind to build a website is much faster than writing custom CSS. You rarely have to switch contexts, make changes to existing HTML, or fight with a framework. You can create components and reusable components, and Tailwind will take care of everything else. The best part? You don't have to worry about finding the right class names or naming conventions for your website or custom CSS. Plus, you'll never have to worry about maintaining a consistent design across all of your projects.

Trust me, once you start using it you will realize that you were wasting so much time not using it.