DEV Community

Discussion on: Tailwind isn't the answer

 
regislutter profile image
Régis LUTTER

Actually, it's more like
padding-top: 0.25rem;
padding-bottom: 0.25rem;

So I totally agree, I prefer py-1.

 
brittonwalker profile image
Britton Walker

@regislutter Exactly, your example is more accurate. I also want to point out in the newest version you could do this py-[30px] etc. which is very handy.

You can also take what you need and leave what you don't. For example, I probably wouldn't ever write this if the design called for it pt-1 pr-2 pb-3 pl-4 md:pt-2 ... lg:pt-3 ... xl:pt-4 .... just out of preference, especially if you have a lot of other styles going on in it. However, there are a variety different ways to handle you could handle that. You could just write your normal css padding shorthand and write them in respective media queries as necessary.

You could use multiple @apply statements organized by query (or whatever you want, variant, spacing, etc).

.card {
  @apply py-2 px-4;
  @apply lg:py-3 lg:px-5;
  ...
}
Enter fullscreen mode Exit fullscreen mode

Or you could put them in the @screen directive:

.card {
  @screen lg {
    @apply py-3 px-5;
  }
}
Enter fullscreen mode Exit fullscreen mode

A lot of the common css frameworks/tools provide utility classes. I made pretty heavy use of Bootstrap's utility classes way before Tailwind was born. The examples I provided are just one of many things I like and use on a daily basis. It becomes a situation where you or your team would need to agree on the approach based on what works for you and define your house style. At the end of the day all of this could obviously be written by hand without tools and frameworks. These tools are meant to help improve your workflow and should be evaluated for your needs.