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

Tailwind UI

tailwindui.com

Post reply on HN
Print view View original

281–290 of 367 posts

Re: Tailwind UI

#281

Post by cageface »

uk_programmer wrote: post #81
cageface wrote: post #61

Earlier quoted context omitted.

In my experience trying to do semantic CSS just adds a lot of extra cognitive overhead and breaks down in the inevitable requirements churn every project goes through. I was skeptical of Tailwind too until I actually tried it. It’s one of those things like JSX that defies received wisdom but in real use is very nice.

> In my experience trying to do semantic CSS just adds a lot of extra cognitive overhead. Do people really struggle with this? Heading Tagline It far more straight forward just to call something what it is and you can actually read the CSS afterwards.

Sure in a 4 line example it's fine. On a real site with 5 different kinds of hero elements, with some styles in common but a lot of small variations and each with its own responsive behavior it's not so easy anymore. Coming up with good names for things is one of the hardest jobs in programming and this style forces you to name everything.

I've been building sites the way you suggest for 20 years. I also had a negative knee jerk reaction to tailwind. But I had enough of an open mind to try it and now I have no interesting in going back.

Re: Tailwind UI

#282

Post by cageface »

phponpcp wrote: post #100
uk_programmer wrote: post #81

Earlier quoted context omitted.

> In my experience trying to do semantic CSS just adds a lot of extra cognitive overhead. Do people really struggle with this? Heading Tagline It far more straight forward just to call something what it is and you can actually read the CSS afterwards.

This is so much easier to parse too. If you need more rigidity, add BEM on top then you're good to go.

It's easier to parse but what does "hero" actually do? You need to go digging around in all your stylesheets to figure it out and in most cases actually load up the page and inspect it. That overhead is gone in a functional approach.

Re: Tailwind UI

#283

Post by williamdclt »

I really like Tailwind's approach in some cases, it does make prototyping extremely fast.

What I'm really missing (and I don't understand it doesn't exist) is a way to compose classes into a single class, to refactor collections of small utility classes into a meaningful class with semantic sense. Why can't I do something like:

    .my-class {
        use .text-sm
        use .text-gray
        use .bold
    }
Kind of like calling several functions from a single function to compose their effects.

The only things that come to mind are SCSS mixins (but would have to declare the `text-gray` mixin AND the `text-gray` class, plus it doesn't with a lib like tailwind that provides classes), or CSS-in-JS trickery. Styled-component allows this sort of things, but it still doesn't feel very nice to use.

If I've missed something and this is actually possible, please somebody tell me!

Re: Tailwind UI

#284

Post by gbrits »

uyuioi wrote: post #262

Getting tailwind to work properly with Vue CLI has been the bane of my existence.

How so? Haven't tried tailwind, but wanted to try it on a pretty decent-sized Vue-project

Re: Tailwind UI

#285

Post by mike1o1 »

williamdclt wrote: post #283

I really like Tailwind's approach in some cases, it does make prototyping extremely fast. What I'm really missing (and I don't understand it doesn't exist) is a way to compose classes into a single class, to refactor collections of small utility classes into a meaningful class with semantic sense. Why can't I do something like: .my-class { use .text-sm use .text-gray use .bold } Kind of like calling several functions…

This already exists and it's great!

https://tailwindcss.com/docs/extracting-components#extractin...

  .btn {
    @apply bg-blue-500 text-white py-2 px-4 rounded;
  }

Re: Tailwind UI

#286

Post by htunnicliff »

williamdclt wrote: post #283

I really like Tailwind's approach in some cases, it does make prototyping extremely fast. What I'm really missing (and I don't understand it doesn't exist) is a way to compose classes into a single class, to refactor collections of small utility classes into a meaningful class with semantic sense. Why can't I do something like: .my-class { use .text-sm use .text-gray use .bold } Kind of like calling several functions…

If you take advantage of PostCSS or Tailwind's CLI, you can compose something like:

  .my-class {
    @apply text-sm;
    @apply text-gray;
    @apply font-bold;
  }

Re: Tailwind UI

#287

Post by rsp1984 »

Please excuse the newbie questions but would I be able to use this in a WYSIWYG framework like Webflow or Weebly or Wordpress?

How about compatibility with React?

Or is this the land of "bare metal" HTML+JS+CSS?

Re: Tailwind UI

#288

Post by dsego »

6510 wrote: post #244
stanmancan wrote: post #213

Earlier quoted context omitted.

The numbering name system makes it really easy to make incremental changes too. I can’t manually edit a hex to my liking, but I can easily change text-blue-500 to text-blue-600 if I want it a bit darker.

#000000 is black #FFFFFF is white They are 3 sets of 2 hex numbers. #FF0000 is red #00FF00 is green #0000FF is blue (you hear of RGB, Red Green Blue, in that order) Now if you want a darker color (closer to black) you lower FF to a lower value. A darker blue would for example be #0000AA if you want a lighter color you increase the other 2 color values. A lighter blue would be #2222FF If you don't like hex there is rg…

RGB isn't even a good system to lighten or darken colors. CSS supports HSL which is certainly more intuitive. Then again, it's easier to use a good pre-processor with color functions to darken($color, 10%) and so on (quickly, can you tell me what is 10% lighter than 2222FF off the top of your head?). Still, in the end it makes most sense to use tones from a good color palette then to mess around with hex values.
Post reply on HN