[supermatt]

Thats exactly what this component library does: https://daisyui.com/components/button

If you want to do in "raw" tailwind (i.e. without this component library), you can use layers to create your own component classes, e.g.:

  @layer components {
    .btn {
      @apply inline-block px-4 py-3 text-sm font-semibold text-center uppercase transition duration-200 ease-in-out rounded-md cursor-pointer;
    }
    .btn-primary {
      @apply text-white bg-indigo-500 hover:bg-indigo-600;
    }
  }

[karlerss]

If it's just one class per property, you could just type out the CSS. Using emmet in IDE is probably faster than finding the tailwind classes with autocomplete.

[automatic6131]

>If it's just one class per property, you could just type out the CSS.

You can, but then it rarely happens that you want the CSS to be fixed in that way for all time: the brilliance of tailwind is that you get resposniveness just by adding a few more classes. You cannot do that with inline CSS.

[FractalHQ]

This is the one pro-tailwind argument I can agree with. Sometimes I’ll use their shorthand md: & sm: in @apply in place of media queries. The advantage is that they remain local to their relevant selectors.

Makes me think- all I would really want is to be able to have multiple values in css. Maybe something like .

.card { width: 5rem md: 10rem; }

Snap… am I on to something?

[Nullabillity]

Sass/Scss let you nest media queries inside of selectors years ago.

[FractalHQ]

And the result is html and css that is easier to read later. I’m so fast with CSS that Tailwind inevitably slows me down as an app scales.