DEV Community

Discussion on: Do u use Tailwind in React?

Collapse
dance2die profile image
Sung M. Kim

What does it mean by "utility classes"? (background: I've never used tailwind).

How does it differ from Bootstrap?

Collapse
matthewbdaly profile image
Matthew Daly

Basically, most of the classes only apply one CSS rule.

For instance, you apply padding of 1rem by adding the class p-4, and that's all that class does. Adding margin-x of auto is mx-auto. Applying a dark green background can be done with bg-green-900.

It's possible to amend the size and colour presets if you need more or different colours and sizes.

It sounds weird, but it works surprisingly well for prototyping. Later on it's easy to extract the styles for easier reuse. I also find it fits well with component-based UI libraries like React or Vue, and there's less tendency for the end results to look same-y like many sites that use Bootstrap.

Thread Thread
dance2die profile image
Sung M. Kim

Thank you, Matthew.

I got the gist and seems pretty useful.