Sailboat UI – A Framework for Tailwind | Hacker News Reader

Sailboat UI – A Framework for Tailwind

sailboatui.com

74 pointsfeross20 comments

How does this compare to DaisyUI?

edit:

So, with daisyui, you do this for a button:

   <div class="btn">Button</div>

(https://daisyui.com/components/button/)

It appears that with SailboatUI, you do this:

    <button
    type="button"
    class="rounded-lg border border-primary-500 bg-primary-500 px-5 py-2.5 text-center text-sm font-medium text-white shadow-sm transition-all hover:border-primary-700 hover:bg-primary-700 focus:ring focus:ring-primary-200 disabled:cursor-not-allowed disabled:border-primary-300 disabled:bg-primary-300"
  >
    Button text
    </button>

So, is this just a collection of Tailwind CSS classes that are uniform? There is value there, but it's definitely a lot more code.

(https://sailboatui.com/docs/components/button/)

It’s too bad we live in a world where any decent looking frontend design starts with “ok so native browser controls are terrible, what UI framework are we going with?” Ideally you wouldn’t need more than a style sheet to accomplish what you do with these UI frameworks.

I really enjoy seeing lots of different takes on component style/animations, but I agree that it's pretty sad how brutal the base set of components is to work with in the browser. It's sad that web components didn't really materialize, because it should really be possible to at least build components with framework A that are compatible with framework B. I believe Svelte can effectively compile to web components because it doesn't have a runtime like React does.

I have no axe to grind with different frontend frameworks beyond that they are deliberately awful at being compatible with one another. I can't even try new frameworks that often because I know the component ecosystem won't catch up for years and I'll lose interest by the time it does (or it'll die first). It's been this way since I started and it'll be this way once my career ends. Going around in circles.

The really messed up part is that HTML renderers are still amongst the best UI toolkits we have due to ubiquity and being cross platform. An engima.

Yeah it's weird that in spite of all the investment and awesome improvement in web tech the past decade, we still have such janky support for basic things like comboboxes and date pickers. Mobile browsers seem to have decent defaults but desktops are still eh.

This is just a stylesheet.

Very nice. Tailwind’s flexibility is undeniable but I do miss the easy days of using Bootstrap’s built in components to whip up screens quickly.

A solid comprehensive library of readymade components like this could be very useful for less design-oriented developers like myself.

With my rose tinted glasses on I would start to agree, but then I remember all the excess HTML it involved trying to do anything. Once you become accustomed to it you can get a pretty quick flow going, and I appreciate what it did at a time when the space was young, but I definitely don't want to go back to bootstrap in 2023.

Kinda confused if we're talking about Tailwind here, it's basically the same markup as Bootstrap or whatever would be. Ironically, markup is why I still prefer Bootstrap in 2023, because there's React/Vue/Svelte component libraries for it, and components are single tags: <Card>, <Alert>, whatever.

The difference is which markup in my opinion. You add a lot of utility classes in Tailwind etc, but with Bootstrap you actually have to add scaffolding elements to make things work. The obvious one is all the nested .container, .row, .col, but even trying to use the navbars or button groups etc all required a lot of specific incantations/boilerplate to use their components correctly.

It's been years since I'd used it, maybe that's improved.

Looks like a nice basic set of components ala Bootstrap & DaisyUI. Kinda wish Tailwind would just build these component classes in directly vs encouraging the copypasta of utilities, but maybe I'm not the right customer for Tailwind.

I also thought this is what Tailwind already provided.

Tailwind UI is the component product.

Tailwind doesn’t provide components, they provide classes that map more or less 1:1 with CSS rules. They have a secondary project, TailwindUI (mostly gated behind a paywall), that provides examples of using their classes to build full-fledged components

They also have https://headlessui.com

This looks well polished in contrast to most other non-official Tailwind CSS component libraries. I will definitely consider using this for my next project. It’s a pity that out-of the box component libraries (React, Vue, Angular) are mostly so hard so customize, I have kind of given up on them, and use these html / Tailwind component collections instead.

The code to content ratio is low, I hope this gets refactored on the lines of https://levelup.gitconnected.com/how-to-use-tailwind-css-the....

If you're going to do all that I barely see the benefit of tailwind over just writing the CSS rules yourself.

What does this offer compared to Flowbite or Tailwind UI? Prima facie, it looks like a clone.

Are you supposed to copy/paste the html from this site, or is there some module/plugin you're supposed to install to use it ?

These components are beautiful!

Reply on news.ycombinator.com