DEV Community

Discussion on: Do we really need a CSS Framework?

Collapse
 
edisonywh profile image
Edison Yap

How is working with Tailwind like? I've heard a lot about it being "utility", but I'm not quite sure what that means; to me it sounds like you'd need to customize all of your components from scratch, which kinda defeats the purpose?

I'm like 99% sure I'm wrong, so curious what you think - is there a lot of work to do for the styling before I can jump into developing my actual application?

Collapse
 
codestuff2 profile image
Adam Whitlock

Essentially you do "customize" the components in your site from classes so a simple rounded button would have quite a few classes. Something like

shadow bg-blue text-white font-light py-1 px-2 border border-white rounded-full

... but that is more or less how you can build your button the first time during prototyping, and then you can take all those classes once you have the specific style you are looking for dialed in and just create a new class called "button-blue" and use the @apply rule to make a single class that inherits all those properties

.button-blue {
@apply shadow flex-1 bg-white text-teal-dark font-light py-1 px-2 border border-white rounded-full;
transition: 0.3s;
}

that is just one use case. There are easy ways to add your own css "plugins" for things like gradients, svgs, and more advanced things where needed.

I feel like just having to deal with a single set of classes instead of having to remember all the random custom classes you created can be easier.

As far as a strict utility side goes, there are many easy classes you can use for margins, padding, flex, widths, and other properties. That was if you just need to add some margin-top to an element you can easily add a mt-4 class and not have to jump into the css itself.

Thread Thread
 
edisonywh profile image
Edison Yap

Cool man! Maybe one of these days I should take a look into it.

I found this Twitter BTW, looks super dope.

twitter.com/bradlc/status/10841989...

Thread Thread
 
codestuff2 profile image
Adam Whitlock

More linting stuff to keep me from writing broken code! :) That does look awesome for sure.