3 ms·

Looks sexy. But can someone ELI5 why I'd use Tailwind over e.g. a Bootstrap theme? Not trying to be snarky - genuinely trying to understand the advantages.

sam_goody 7y ago
The idea of utility CSS is that you have to set every single style yourself. So for a button, you might have a class='rounded shadow p-4', which becomes rounded corners, drop shadow and a padding of 1rem. On the one hand, you have to do a lot more to code. Instead of just adding class .btn in Bootstrap you would need to add all those classes. On the other hand, the styles are not all the same as everyone eles's, and you can have different styles for one element if needed. You can have a button that only shares some styles, or a theme that has a lot of complimentary styles. A downside of utility classes, is that you don't have a base to work off, you have to know what classes would go on a button in order to quickly get something nice. The solution to that is a numerous collection of Tailwind Components. Copy the styles as ou need, and modify as you need. Until now, there was no official collection. Some of my favorite collections are at https://tailwindcss.com/components https://tailwindcss.com/components https://www.tailwindtoolbox.com https://www.tailwindtoolbox.com https://tailwindcomponents.com https://tailwindcomponents.com https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/presentation https://www.creative-tim.com/learning-lab/tailwind-starter-k... Forms: https://tailwindcss-custom-forms.netlify.com https://tailwindcss-custom-forms.netlify.com But now we have an official collection from the framework creators themselves. Use them as a base, but - by changing a class or two, easily modify them for your project. Of course, in Bootstrap, you could always have written your own classes to overwrite Bootstraps. That can be much more complex, and usually you wind with side effects. In my experience, the more you deviate from the prebuilt styles in semantic libs such as BS, the more hair you lose.
todotask 7y ago
In addition to the other commenter, if you become more experience, you could roll your own Grid, Flexbox and some utility (like Tachyons CSS) styles. Utility CSS allows you to change or customize far more flexible in a fast pace environment than Bootstrap. If you prefer lighter CSS, Tachyons is another option which I found more easier to read even if I have a long classes.

sam_goody 7y ago

The idea of utility CSS is that you have to set every single style yourself. So for a button, you might have a class='rounded shadow p-4', which becomes rounded corners, drop shadow and a padding of 1rem. On the one hand, you have to do a lot more to code. Instead of just adding class .btn in Bootstrap you would need to add all those classes. On the other hand, the styles are not all the same as everyone eles's, and you can have different styles for one element if needed. You can have a button that only shares some styles, or a theme that has a lot of complimentary styles. A downside of utility classes, is that you don't have a base to work off, you have to know what classes would go on a button in order to quickly get something nice. The solution to that is a numerous collection of Tailwind Components. Copy the styles as ou need, and modify as you need. Until now, there was no official collection. Some of my favorite collections are at https://tailwindcss.com/components https://tailwindcss.com/components https://www.tailwindtoolbox.com https://www.tailwindtoolbox.com https://tailwindcomponents.com https://tailwindcomponents.com https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/presentation https://www.creative-tim.com/learning-lab/tailwind-starter-k... Forms: https://tailwindcss-custom-forms.netlify.com https://tailwindcss-custom-forms.netlify.com But now we have an official collection from the framework creators themselves. Use them as a base, but - by changing a class or two, easily modify them for your project. Of course, in Bootstrap, you could always have written your own classes to overwrite Bootstraps. That can be much more complex, and usually you wind with side effects. In my experience, the more you deviate from the prebuilt styles in semantic libs such as BS, the more hair you lose.

todotask 7y ago

In addition to the other commenter, if you become more experience, you could roll your own Grid, Flexbox and some utility (like Tachyons CSS) styles. Utility CSS allows you to change or customize far more flexible in a fast pace environment than Bootstrap. If you prefer lighter CSS, Tachyons is another option which I found more easier to read even if I have a long classes.