DEV Community

Cover image for My first experience in Tailwind CSS 👩🏻‍💻

My first experience in Tailwind CSS 👩🏻‍💻

Diti Arora on September 13, 2021

Recently I start learning Tailwind CSS, a CSS framework that helps you write CSS way faster. Tailwind is a utility-first CSS framework packed with...
Collapse
 
itays123 profile image
Itay Schechner

Tailwind > Bootstrap. Change my mind.

Collapse
 
ghoshriju33 profile image
Riju Ghosh

Can't change. Tailwind is too good.

Collapse
 
pavelloz profile image
Paweł Kowalski

Road bike > Moutain Bike. Change my mind.

Collapse
 
brentdalling profile image
Brent Dalling

Mountain Bike > Road Bike. We get air. And we don't get hit by cars as often. We just tend to hug trees. Change my mind.

Thread Thread
 
pavelloz profile image
Paweł Kowalski

We get more protein from flies and mosquitos. Free energy FTW.

Thread Thread
 
brentdalling profile image
Brent Dalling

I don't know. I go through Gnat clouds quite often. Free energy FTW!

Collapse
 
developerbishwas profile image
Bishwas Bhandari

@PawelKowalski Well said.

Collapse
 
dimitrisauvage profile image
Dimitri Sauvage

Bootsrap does not use purgecss. It is the developer role to use it,contrary to tailwind which have purge by default.

In bootstrap, you can customize all components. There is a lot of variables for each component, and you can change all classes in your code. For example, you can add .card { border-radius ;50%} and it Will work.

Collapse
 
ebuberoderick profile image
Ebube Roderick

In tailwind you can do bg-[url('imagePath/imageName.extension ')] and you have successfully added a background image
You can also try h-[300px]
Infact to cut all long story i can desing any UI without writing one single css all tailwind classes

Collapse
 
hedanielld profile image
Hubert Daniell

As stated below you can customize anything in Bootstrap and there is multiple ways to do it. I have worked with BS on a number of sites and used the CDN in all cases.

Pull the CDN first and then have you stylesheet come second in the HTML cascade and everything will be customized/manipulated. Add or override any style it works.

I haven't used Tailwind but it does look useful as a utility framework.

Collapse
 
axmad386 profile image
axmad386

No no no, you cannot compare them.
Tailwind is atomic css, is suitable when you write style based component, where you can reuse them. If you just create single page or just one component that you never reuse it, I think native css is better.
Bootstrap has many default component, it's better to use them when you create something like admin panel. If you one something more customizable, don't use bootsrap. Native css or tailwind is good to go.
I have my own thumbs of rule, you can agree or disagree.

  • If you write ready to use component, bootsrap is winner
  • If you want something customizable and you want to reuse your component many times, then tailwindcss is good choice
  • If you want something customizable but is verry rare to reuse it, then native css is wise choice

Just use the right tool on the right place

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

Nope tailwind is still better even for admin panel, with bootstrap everyone knows you used bootstrap. It's like McDonalds.

Collapse
 
axmad386 profile image
axmad386

Yeah, I agree. But, for short deadline and client don't care about the design, I prefer use customized ready to use framework css like Bootstrap. Except you wanna create from scratch all the tool like Modal, Alert, Dropdown, etc.

Tailwindcss is still better for custom design, I use it over time. I build my custom admin panel build with tailwind and svelte. It's pretty cool and fast. No jquery or bootstrap needed.

Thread Thread
 
ivan_jrmc profile image
Ivan Jeremic

You have tailwind-ui for that it lets you implement modals and so on very fast.

Thread Thread
 
d1p profile image
Debashis Dip

Costs money though. 😮‍💨
$279 is some Jr Software Engineers monthly salary where I live.

Thread Thread
 
ivan_jrmc profile image
Ivan Jeremic

I meant headless-ui sorry.

Collapse
 
keeran_raaj profile image
Raj Kiran Chaudhary

How long did it take to learn Tailwind? I m thinking to try

Collapse
 
ditiarora13 profile image
Diti Arora • Edited

If your foundation with Pure CSS is strong, then it will hardly take a week to learn Tailwind

Collapse
 
akhilgautam profile image
Akhil

I won't compare a Lion and a Tiger. 😁

Collapse
 
williamstam profile image
William Stam • Edited

Style .card in bootstrap and it stays constant throughout the project, forget a style on tailwind have a different look to the card. @change my mind

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

You can still create a .card class using @apply in Tailwind 🔥

Collapse
 
ghoshriju33 profile image
Riju Ghosh

We can achieve the same using components

Collapse
 
rangercoder99 profile image
RangerCoder99

None of those, sass is all you need! Bootstrap add a ton of unnesary code and Tailwind add a ton of unnesary classes and overhead process.