tailwind vs bootstrap.md

tailwind isn't easier/harder than bootstrap. its a completely different thing. tailwind has pre-defined classes for all css properties.

flex is a class that has this css:

.flex {
  display: flex;
}

text-black is class that just changes the colour and nothing else:

.text-black {
  color: #000000;
}

in this way almost all css properties have been made into atoms of css hence why its called atomic css. this allows you to have a lot of customisability and style things how you want. but the most important thing is that it allows you to write css quick, instead of writing the css for flex, you're just writing flex in your classes.

bootstrap is a stylesheet that also has pre-defined classes but its not atomic, it will style the whole thing for you, for example it will give you a class like btn-success which will have the following css:

.btn-success {
  color: white;
  background-color: green;
  padding: 4px 2px;
  border-radius: 25%;
  // ...
}

you lose the flexibility of styling things your own way with bootstrap. tailwind enables that. the same button in tailwind will look like this:

<button class="bg-green-500 text-white px-4 py-2 rounded-md">submit</button>

tailwind also has a compiler which will only ship the erquired css in production, so you're not shipping any extra css. but bootstrap is a stylesheet, can't really purge anything, therefore you're shipping loads of unused css which is bad.

hopefully that clears things up and shwos why tailwind is better than bootstrap.

Thank you so much this is awesome explanation