DaisyUI – Tailwind CSS Components

Re:DaisyUI – Tailwind CSS Components by supermatt on Friday July 30, 2021 @02:15AM (#28004988)

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;
    }
  }

[ Parent | on HN ]

Re:DaisyUI – Tailwind CSS Components by karlerss on Friday July 30, 2021 @03:36AM (#28005408)

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.

[ Parent | on HN ]

Re:DaisyUI – Tailwind CSS Components by automatic6131 on Friday July 30, 2021 @05:21AM (#28006073)

>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.

[ Parent | on HN ]

Re:DaisyUI – Tailwind CSS Components by FractalHQ on Friday July 30, 2021 @08:24AM (#28007190)

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?

[ Parent | on HN ]

Re:DaisyUI – Tailwind CSS Components by Nullabillity on Friday July 30, 2021 @10:46AM (#28008544)

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

[ Parent | on HN ]

Re:DaisyUI – Tailwind CSS Components by FractalHQ on Friday July 30, 2021 @08:18AM (#28007143)

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.

[ Parent | on HN ]