DEV Community

Discussion on: Tails 🌪️ - Beautify open-source TailwindCSS Components

Collapse
 
bias profile image
Tobias Nickel

i got a feeling here, and I got that before with bootstrap and tailwind seems similar to me.

both, define lots of classes and on a single object prople add lots of then. Why is it, that adding 5 classes of tailwind is preferred over adding a style attribute?

Collapse
 
jayswaan profile image
JaySwaan

Tailwind and Bootstrap have almost nothing in common. Perhaps give Tailwind a try on a small project and see how you feel afterwards. I'd recommend using it with a component based framework like Vue/Svelte/React.

As far as why classes are preferred over using a style attribute... reusability, speed, and developer experience come to mind. If you have a primary color in your application and you want 10 components to use it as text and background color with inline styles you either set up a CSS Var and reference all over the place like color: var(--primaryColor) and background-color: var(--primaryColor) or with Tailwind it would simply be a few classes text-primary and bg-primary you put anywhere.

Additionally there are Tailwind plugins for VS Code that give you autocompletion and let you peek at your full list of utilities and what styles they apply. When combined with a component based framework you're usually writing the styles one time for each type of component in your app and then putting it anywhere. It prevents duplication, keeps you in the HTML and feels more like you're describing the components than writing the style for them.

Tailwind also gives some sweet group hover, group focus features and utilities for interaction that would be impossible with inline styles.

Last point: Tailwind runs with Post CSS and if you set it up properly you get access to a bunch of CSS tools like nano, autoprefix, CSS next etc... this helps you get small outputs, uniform spacing, good looking customizable layouts, future features and cross-browser compatibility with little effort after the initial setup.