Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

DaisyUI – Tailwind CSS Components

daisyui.com

Post reply on HN
Print view View original

71–80 of 174 posts

Re: DaisyUI – Tailwind CSS Components

#71

Post by dmitriid »

bennyp101 wrote: post #50
dmitriid wrote: post #44

Earlier quoted context omitted.

> Why? Because there's an expected built-in behaviour to these elements. > It is accessible, semantically correct, and follows accepted design conventions. There's nothing accepted about disguising a link as a button. Especially when it literally does no action except, you know, linking to a different page. Though, of course, there are ambiguous situations, especially in the context of PWAs. But code examples are not…

I think that ship has sailed, I really don't think that average users expect a button to 'do something' (in the sense it submits a form or something). Going to a different page /is/ 'doing something' as far as users are concerned. Certainly not the internet of old where a form was a form, and a link was a link.

An average user has no idea what's going on in modern software anymore, to be honest. Nothing is what it seems and is redesigned every couple of months

Re: DaisyUI – Tailwind CSS Components

#73

Post by ponyous »

This library highlights the biggest issue of tailwind for me.

> Clean HTML

The rest of your code will still use bunch of shitty tailwind shortcuts that are really chaotic the moment you build something more than a simplest component.

Re: DaisyUI – Tailwind CSS Components

#74

Post by andrewingram »

mikevm wrote: post #27
rvense wrote: post #23

Earlier quoted context omitted.

With Tailwind, if you write out something like that more than once or twice, you're really supposed to bundle it together. Either as a plain CSS class, or a component in your framework of choice. I suppose a library of common elements is a good thing to have, but the reason I like Tailwind is that I can use the utilities at first and then easily gather them together as plain CSS classes as and when that makes sense t…

But if you're going to hide away CSS inside a component, why not just use inline CSS? What does Tailwind add to this?

There's a pretty good article by Sarah Dayan about this, which was written in response to one of the more recent Tailwind dramas on Twitter:

https://frontstuff.io/no-utility-classes-arent-the-same-as-i...

Re: DaisyUI – Tailwind CSS Components

#75

Post by kemyd »

That's an interesting approach with bootstrap-like class names.

At Shuffle[1], we create templates for Tailwind, Bootstrap, Bulma, and Material-UI and need to convert UI libraries from one technology to another.

We decided to write converters that can transform HTML classes & Tailwind config to Sass config.

Probably, we will release it as open-source soon.

  // Example:
  // Tailwind.config to Sass
  // button.js
  const { theme } = require('../theme.config.js');
  
  module.exports = {
    bootstrap: {
      'input-btn-font-size': theme.fontSize.sm[0],
      'input-btn-padding-y': theme.spacing[4],
      'input-btn-padding-x': theme.spacing[6],
    },
    bulma: {
      'size-normal': theme.fontSize.sm[0],
      'button-padding-vertical': theme.spacing[4],
      'button-padding-horizontal': theme.spacing[6],
    },
  };

  // HTML 
  export const mappings = [
      {
          from: ['flex', 'flex-wrap', '-mx-4'],
          to:   ['row']
      },
  }
[1] https://shuffle.dev

Re: DaisyUI – Tailwind CSS Components

#77

Post by [deleted] »

runawaybottle wrote: post #39

My goodness Bootstrap, how far ahead of your time you were. To this day we copy you, god bless you m’lord. Nope, I reject this. We should be so much farther ahead than this. It’s the garbage fullstack developers that need this crap to make a good ui. They don’t belong on the frontend, and I’m pretty tired of it. Our UI/UX will get shittier and shittier if we coddle this group.

[deleted]

Re: DaisyUI – Tailwind CSS Components

#78

Post by mhitza »

bennyp101 wrote: post #64
Aeolun wrote: post #58

I tried using Tailwind, but I just couldn’t get into it. It’s like having to learn CSS all over again because the classnames do not map 1-1 with their respective properties, and autocomplete is lacking. Conversely, Chakra UI Box, which does more or less the same thing is super easy to get into. This looks nice, but I kind of feel like we’ve come full circle two full times to get to this point.

I'm not sure why you would want them to map 1-1? Might as well just write inline styles surely? For autocomplete, have you seen https://tailwindcss.com/docs/editor-support ? I use it in PHPStorm and VSCode and I get class name autocompletion just fine.

Autocompletion works for now, but won't work in the future when JIT mode is default (unless they figure out some trickery).

As a JIT mode user, the 1-1 naming would really be useful now.

Re: DaisyUI – Tailwind CSS Components

#80

Post by automatic6131 »

karlerss wrote: post #54
supermatt wrote: post #13

Earlier quoted context omitted.

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-whi…

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.

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

Post reply on HN