DEV Community

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

Posted on

My first experience in Tailwind CSS 👩🏻‍💻

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 classes like flex, pt-4, text-centre and rotate-90 that can be composed to build any design, directly in your markup. Basically, it lets you write CSS in the form of classes within HTML.

Prerequisites for learning Tailwind CSS

After testing out Tailwind, below are the things you should have knowledge about before starting with Tailwind CSS -

  • Basic HTML (especially Classes and Ids)
  • Basic CSS
  • Mobile and Desktop responsiveness
  • NodeJS should be pre-installed
  • Little knowledge about npm packages

How I started

Tailwind is very easy to use and to get your grasp on if you have good knowledge about CSS. Since it is that same CSS we are writing but in short, there wasn't anything extra that was needed to learn before I could start learning Tailwind.

To start with Tailwind, I followed the playlist of Tailwind Lab's on YouTube: Tailwind CSS: from Zero to Production . This playlist really explains everything in a clear-cut and short way. I learnt how to set up a Tailwind project, that is to download all the important files( like package.json, tailwind.config file ) and other handy plugins. After been done learning about how Tailwind pretty much works, I started exploring Tailwind's documentation, which is one of the best docs I came across up till now. While fiddling with documentation and trying to implement things on my own, I learnt how to develop normal web pages with proper styling and responsiveness through Tailwind CSS. Afterwards, I jumped on to some advanced stuff like creating my own classes, how to make and use custom colours and properties!< br/>

Difficulties I faced

  • To me, the process of setting up your Tailwind project was a little difficult at first, though as time passed everything was clear to be.

  • Another problem I faced was since we were styling our code inside our HTML file (classes to be precised), the code started looking very confusing especially when you have to heavily style your elements.

Ease of learning

  • It is not at all difficult to learn Tailwind CSS since as I mentioned it above that there is nothing extra you've got to learn as we are writing that same old CSS.

  • Tailwind's documentation has got one of the best explanations for the same, that is its core concepts, how it works, and its usage.

  • The classes used in tailwind are very easy and straightforward, you wouldn't need to glance back at its docs to see class names!

Bootstrap vs Tailwind CSS

Bootstrap and Tailwind, both are one of the most used CSS frameworks.

Bootstrap lets you quickly design and customize responsive mobile-first sites. It's the world’s most popular front-end open-source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

1.Customizability

  • Tailwind according to me is very flexible(customizable). You can decide all the properties and values by yourself, and there is never any need of writing extra CSS. When talking about custom properties, you can easily build your custom colour, use external fonts, etc by making a custom property in your Tailwind config file
  • Unlike Tailwind CSS, Bootstrap is not very customizable because it have pre-styled elements, and there can be times when you might consider making a CSS file for changing the default styling provided by Bootstrap and adding a bit of your own touch.

2.Usage with CSS Preprocessors

  • Since Tailwind is a PostCSS plugin, it can easily be used with other preprocessors like Sass, Less, Stylus and others, just like you can with other PostCSS plugins like Autoprefixer.
  • Bootstrap comes with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. It by default comes with Sass variables and mixins.

3.Removal of unused classes

Both Tailwind CSS and Bootstrap uses PurgeCSS to remove all the untouched css classes which are only helping in increasing the file size.

4.Looks

Tailwind:

Simple card design with Tailwind

A simple card design with Tailwind 👆



Tailwind code

Tailwind code

Tailwind:

Simple card design with Bootstrap

A simple card design with Bootstrap👆



Bootstrap code

Bootstrap code



Well, both look good in their own way but then again bootstrap is less customizable and I would have to write extra CSS in order to change its appearance according to my website's theme.

Final Thoughts

Below are some reasons why I believe that Tailwind is worth using-

  • It's very beginner-friendly. While building web pages, you won't even need to leave your HTML file!
  • Unlike Bootstrap, It is highly customizable
  • You don't have to worry about unnecessary code, PurgeCSS will take care of it.
  • It has memorable class name. So you won't need to repeatedly go back to the documentation
  • You can even make your own classes, so you won't have to repeat the same code again and again.

Thanks for reading😃. Bye!

Discussion (22)

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
bvdalling 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
bvdalling profile image
Brent Dalling

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

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
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
ivanjeremic 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
ivanjeremic 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
ivanjeremic 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
phamn23 profile image
Nathan Pham • Edited

I think the best way to quickly get started with Tailwind is to leave the docs on the side and frequently press Ctrl+ K to look up CSS properties (like border-radius, color, etc). Because Tailwind is so intuitive, I'd say it'll probably take you a few days to start making UIs without depending on the docs.

Collapse
ditiarora13 profile image
Diti Arora Author • 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.