adamwathan

hace 12 mesesdiscuss

We use it in Tailwind CSS v4 for pill-shaped borders:

  .rounded-full {
    border-radius: calc(1px * infinity);
  }

...as opposed to what everyone has done historically, which is pick some arbitrary huge value like:

  .rounded-full {
    border-radius: 9999px;
  }

No real practical benefit, just satisfyingly more "correct".

adamwathan

hace 12 mesesdiscuss

Thanks! It's a paid feature because we just spent around $250,000 developing the library. Couldn't have built it if we were just going to give it away and maintain it forever for free, our engineers are talented people and deservingly well-paid.

adamwathan

hace 12 mesesdiscuss

We are still healthy and profitable but revenue is down about 60% from peak, and continuing to trend down (I think mostly due to AI and open-source alternatives to the things we've historically charged for.)

So things are fine but we do need to reverse the trend which is why we are pretty focused on the commercial side of things right now.

We started a corporate sponsors/partner program recently, and I'm hoping that will earn us enough funding to focus more on the free/open-source stuff, since that's where we create the most value for the world anyways. Fingers crossed!

adamwathan

hace 2 añosdiscuss

Hey! The job postings say Eastern (UTC-5) to Central European (UTC+1) — Eastern is the American east coast. Most important thing is overlap from around 9am – 12pm Eastern, so open to other US timezones as well if someone can sustainably be available during those hours.

We have a pretty collaborative/sync culture here. Everyone on the team really enjoys pair programming together or working through designs live in Figma, and wouldn't want to build the team in a way where there are people who can never work together because of timezones.

adamwathan

hace 2 añosdiscuss

Tailwind Labs (https://tailwindcss.com/) | Remote (Americas/Europe) | Full-time

We’re hiring a Design Engineer and Staff Software Engineer to work on Tailwind CSS, Headless UI, and related projects full-time.

- Design Engineer ($275k/yr): https://tailwindcss.com/careers/design-engineer

- Staff Software Engineer ($275k/yr): https://tailwindcss.com/careers/staff-software-engineer

We're small, independent, and profitable, with a team of just 6 people doing millions in revenue, and growing sustainably every year. You'd work directly with the founders on open-source software used by millions of people.

If you like the idea of working on a small team that cares about craft and isn't trying to achieve VC scale, I think this is a pretty awesome place to do your best work.

adamwathan

hace 2 añosdiscuss

Don't you need to use npm to install DaisyUI though? If you have to install third party plugins using node already to me the solution is to use our actual node CLI instead of the standalone one.

adamwathan

hace 2 añosdiscuss

We considered it but it felt too magical to make any CSS variable under `:root` automatically drive the existence of utility classes. Putting things under a custom at-rule like `@theme` makes that opt-in, because we know anything you put there is actually intended to drive your utility classes.

adamwathan

hace 2 añosdiscuss

It'll likely embed Node I'm afraid — the vast majority of Tailwind is written in JS so we'd have to rewrite all of that in Rust just for the standalone CLI, and migrating the entire project to Rust is impractical because we'd have no JS plugin story like we do now.

adamwathan

hace 3 añosdiscuss

You can’t do things like hover styles, media queries, etc. with `style=`.

Re: separating presentation from page structure, Tailwind is designed around the opinion that that whole idea was mostly wrong, similar to how frameworks like React brought back the `onClick=` attribute when everyone was saying “unobtrusive JavaScript” was the best practice

Wrote about this in depth a few years ago shortly before releasing Tailwind, can read here:

https://adamwathan.me/css-utility-classes-and-separation-of-...

adamwathan

hace 3 añosdiscuss

One thing worth noting is that & substitutes for `:is(...)` in spirit under the hood, which means there are some significant behavior differences between native CSS nesting and Sass.

Here's one:

  .foo .bar {
    .baz & {
      color: red;
    }
  }

In Sass, that would compile to:

  .baz .foo .bar {
    color: red;
  }

With native nesting, it effectively compiles to:

  .baz :is(.foo .bar) {
    color: red;
  }

The Sass version matches this DOM structure:

  <div class="baz">
    <div class="foo">
      <div class="bar">
        ...

But the native version matches all of these structures:

  <div class="baz">
    <div class="foo">
      <div class="bar">
        ...
  
  <div class="foo">
    <div class="baz">
      <div class="bar">
        ...

  <div class="foo baz">
    <div class="bar">
      ...

Not a criticism at all (the `:is(...)` behavior is a very useful and welcome enhancement to CSS) but a notable difference worth understanding coming from Sass.

adamwathan

hace 4 añosdiscuss

The stylesheets for CSS Zen Garden examples are more tightly coupled to the HTML than any other CSS I've ever seen in my life. They literally have no use against any other block of HTML than that one page.

adamwathan

hace 4 añosdiscuss

I've been following Jarred's progress on this on Twitter for the last several months and the various performance benchmarks he's shared are really impressive:

https://twitter.com/jarredsumner/status/1542824445810642946

Easy to dismiss this as "another JS build tool thing why do we need more of this eye roll" but I think this is worth a proper look — really interesting to follow how much effort has gone into the performance.

adamwathan

hace 4 añosdiscuss

We get an unbelievable amount of spam in the Tailwind CSS repo, especially in Discussions. Usually it’s people posting some Markov chain looking sentence to make it seem somewhat real, then a couple of hours later it is edited to add a link to some website.

adamwathan

hace 4 añosdiscuss

Yep, house on my street was listed for $950k a few weeks ago and sold for almost $1.4m. In my area (Kitchener/Waterloo), every house is selling for $250k-$500k above asking.

adamwathan

hace 4 añosdiscuss

This isn't true — the native 1600 nits mode only uses 1600 nits for HDR content. Regular content/OS UI/etc is still limited to much less brightness.

Check out this HDR YouTube video at this timestamp to see how bright white actually is at 1600 nits:

https://youtu.be/NlAsAuBtmps?t=180

Here's a photo of my XDR display with a pure white rectangle in Figma next to white content in an HDR video, with the display set to the 1600 nits mode:

https://www.dropbox.com/s/rmvu6r6vugaxg95/xdr-brightness-com...

adamwathan

hace 5 añosdiscuss

Semantic HTML is about using the write HTML tags for the right things, like <article>, <figure>, etc. The strings you put inside the class attribute are completely orthogonal to this — Tailwind has absolutely no influence on whether your HTML is semantic or not.

We worked with several accessibility experts when building Tailwind UI for example, and I am very confident in the semantics of all of that markup and how it performs in situations where that actually matters like when using assistive technology, because we tested it ourselves.

adamwathan

hace 5 añosdiscuss

You can break it across as few or as many lines as you like, just like with CSS.

  .btn { display: inline-flex; justify-content: center; padding: 8px 16px; border: 1px solid transparent; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); font-size: 14px; border-radius: 6px; color: #fff; background-color: rgb(79 70 229) } .btn:hover { background-color: rgb(67 56 202); outline: 2px dotted transparent; outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(99 102 241), 0 1px 2px 0 rgb(0 0 0 / 0.05) }

  <button class="
    inline-flex justify-center
    py-2 px-4
    border border-transparent rounded-md
    shadow-sm
    text-white text-sm font-medium
    bg-indigo-600 hover:bg-indigo-700
    focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
  ">
    Submit
  </button>

My experience (and the experience of thousands of others) is that in practice, an approach like Tailwind is much more maintainable, even if it's superficially ugly.

At the end of the day it's a lot easier to understand what's happening in a template where you can see all of the styles directly attached to each node instead of having to map things together in your head across multiple files.

For example, for me at least I can't believe how much more difficult it is to look at your average CodePen demo and understand what is doing what at a glance vs. looking at a Tailwind template. With traditional CSS there is just _so_ much indirection in comparison.

adamwathan

hace 5 añosdiscuss

It's fewer than half as many characters as writing the same thing in CSS:

  .btn {
    display: inline-flex;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    font-size: 14px;
    border-radius: 6px;
    color: #fff;
    background-color: rgb(79 70 229);
  }
  .btn:hover {
    background-color: rgb(67 56 202);
    outline: 2px dotted transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(99 102 241), 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

adamwathan

hace 5 añosdiscuss

Tailwind author here! Do you have an example of a site using the new engine that is shipping a massive CSS file where most of the styles are unused on most pages?

The Tailwind website is only 36.9kB of CSS and it likely includes more classes than any other Tailwind site on the internet by virtue of the fact that it has to provide visual demos for so many of the classes. I don't think 36.9kB is massive personally, it's much smaller than the CSS of almost every website I've checked.

adamwathan

hace 5 añosdiscuss

Haha correct, I was just explaining why inline styles aren't a suitable alternative to Tailwind. Tailwind can definitely do all that stuff!

adamwathan

Submissions

Tailwind CSS: From Side-Project Byproduct to Multi-Million Dollar Business

Alpine.js: A minimal framework for composing JavaScript behavior in your markup

React for Vue Developers

Redesigning Our Docs: Building a Scalable CSS Architecture

Spectrum is joining GitHub

7 Practical Tips for Cheating at Design

CSS Utility Classes and “Separation of Concerns”

I hate MVPs. So do your customers. Make it SLC instead

CSS Utility Classes and “Separation of Concerns”

CSS Utility Classes and “Separation of Concerns”

CSS Utility Classes and “Separation of Concerns”

Making $130,000 Self-Publishing a Book on Array Transformations

Ask HN: Anyone selling a MicroConf Starter ticket?

Stripe Elements

Shady Tactics in our Midst – “Conventional wisdom” that's probably illegal

StartCom Launches StartEncrypt, Let's Encrypt Alternative

comments