✨ A recap of Tailwind Connect 2023!

Last month, over 200 people got together in my hometown of Cambridge, Ontario to hang out, talk shop, and get a peek behind the curtain at some of the new stuff we’ve been working on. Tailwind Connect started out as an idea for throwing a little local meetup while the team was in town, but naturally ballooned into us renting a massive hall, hiring a crew of four videographers, and racking up a catering bill that put my own wedding to shame.

I've never worked on a site where dark mode was as simple as "replace every instance of hex code A with hex code B."

The color changes are very often context-specific, so if you're using CSS variables to support themes, you need to name those contexts, like GitHub has: Notice the "Show All Properties (389 more)" at the bottom? Yeah, there are a _lot_ of context-dependent color tweaks that need to happen in every supported theme.

It’s weird that anyone thinks Tailwind isn’t suitable for super custom designs. That’s literally the reason I made the framework, to build super custom designs faster.

https://twitter.com/ken_wheeler/status/1574830680630067200

Shipping something soon that should help change this perception anyways 👍🏻

I've always loved how much polish a subtle animation like the one on this Stripe button can add to a UI 😍

Let me show you how to recreate it with Tailwind CSS! 🧵 First, let's create the button! We'll use `rounded-full` for the pill shape, add padding with `px-4` and `py-1.5`, set the font-weight with `font-semibold`, add color with `text-white` and `bg-slate-900`, then set a hover color with `hover:bg-slate-700`.

play.tailwindcss.com/c1BKsSjQto

Are there any email marketing/newsletter tools designed for technical people? All I want in the world is to write emails in markdown and include code snippets.

I want to do a lot more newsletter writing but the friction with all the WYSIWYG crap is brutal 😞 "HEY World" is by far the closest thing I've found to the right level of friction-free newsletter publishing (even without markdown or code support), but for sending stuff to the Tailwind newsletter it feels weird to not come from our domain.

For better or worse my entire approach to business is “make whatever I want, and hope enough people pay for it for it to work.”

Like a band making music — write songs you’re excited about, not the songs people want you to write. Might fail but at least you’ll have fun. To be clear this isn’t advice, and it’s the furthest thing from a recipe for success. But if you’re lucky enough to have this, I would be careful to fall into the trap of doing what people ask you to do instead of just continuing to live the dream.

https://twitter.com/adamwathan/status/1540742022360735744

We just released our first set of official Tailwind CSS site templates! 🥳

Beautifully designed, expertly crafted Next.js projects, built exactly the way we'd build them for production.

And it's a free update for existing Tailwind UI customers ✨

tailwindui.com/templates The first one is a simple SaaS marketing site — perfect for getting your next idea off the ground so you can focus on the product.

tailwindui.com/templates/sali…

Super encouraging to see so many people on HN this morning sharing this exact sentiment 🥹

Literally impossible to like Tailwind until you try it, then it's usually impossible to go back 🙃

news.ycombinator.com/item?id=316922… 🥰

Started working with an accountability coach for health and fitness stuff a couple of weeks ago and already 100% convinced it's going to change my life 💪 Highly recommend. For those who asked, this is the company I'm working with:

mybodytutor.com

Down 8 pounds so far and haven't missed a workout 💪

Playing around with using Notion as a CMS for my personal site just to reduce the friction to publishing. Pretty fun but the whole "blocks" abstraction + pagination stuff makes it a lot of work to extract some basic written content via the API 😅 For real the amount of API requests you have to make to get all of the content for a page is wild. Have to recursively walk every block looking for children and make new requests to get those children. Starting to think this is maybe a bad idea, we'll see 😅

Ooo the Apple Store has the 14" I want for in-store pickup today... I will have the 16" and the 14" today and have to decide which one to keep 😅

Expect lots of pictures! 🤤

What's the actual best floor planning tool I can play around with for redoing my office? Hard to find the good stuff, this whole category is SEO'd into oblivion 😅 Here's where I got with Homestyler which was pretty quick and easy to play with... Wish I could come up with a good way to make it work with the desk in the middle but this doesn't seem terrible.

Is there any way with CSS grid to say "all rows should have size 'auto', except the last one which should be '1fr'" while relying on implicit rows?

I want every row as short as possible, with the last row taking up the rest of the space, but with an unknown number of rows 🤔 The image above is the outcome I want, but I don't want to have to use `grid-template-rows: auto auto 1fr`, because that breaks if I need another row. Any way to do it without knowing the number of rows?

Building really great stuff takes a lot more time, attention, and focus than is really possible to understand up front.

It's hard but I've had to learn to say no to even my own best ideas if they mean spinning another plate, or I eventually resent them for getting in the way. If you want to do a lot of things, focus on things that can be finished.

Write a book, record an album, organize an event, produce a video, give a talk — you can build a rich catalog of work if you are deliberate about doing things that can actually be *done*.

Fun piece of history — here's the first open source code I ever wrote, way back in 2010 🙈

github.com/reaper-oss/sws…

It's a set of extensions for REAPER (DAW software) for editing live drum performances super efficiently + a bunch of other productivity helpers. Although I'd been programming in some capacity since I was 10-11 and had good exposure to basic concepts like variables, loops, etc., I had no idea that "software design" was a concept, and it never even occurred to me that code could have "quality" 😅

🤔 What's the best way to structure your classes and markup when building UIs with Tailwind CSS?

Here are some of the rules I follow to build things that are consistent, easy to understand, and straightforward to componentize 👇 Sort classes generally from the outside in (in terms of the box model) putting things that affect layout before things that don't, while also trying to group related classes.

This lets you see the things that are going to have the biggest impact quickly.

This is my favorite HN thread in a long time, so (positively) surprised at the support in the comments:

news.ycombinator.com/item?id=259401…

Maintaining open-source is brutal, and feeling obligated to acknowledge, review, and respond to every attempt to contribute is a huge burden to carry. When I saw this tweet from @dhh the other day I couldn't help but s/email/open source contribution/, but it makes me feel horribly guilty to suggest that anyone should feel anything but grateful for unsolicited free work from contributors.

https://twitter.com/dhh/status/1353727112159625216

This is a great example of why you need more control when implementing dark mode than just reversing the color scheme or overriding basic variables like "--color-primary" or similar.

Short thread pointing out some of the neat design decisions here 👉

https://twitter.com/quarterdeck/status/1350416361701470210

1. The top banner – the background color changes a bit and so does the link, but it doesn't *invert*, it's still light on dark in both versions.

Dark sections shouldn't be inverted to light in dark mode, you'd get a blinding light block — bad in dark environments.

Huge props to the team that made this Tailwind CSS v2.0 launch possible 👉 (thread)

tailwindcss.com .@bradlc who built the entire website. I absolutely did not expect us to have time for all the insane interactions and animations. He managed to do everything I ever dreamed of plus more, and the APIs he created for it are a delight to work with.

A few people are a little bit confused about what this library actually is, so quick thread with some explanation...

https://twitter.com/adamwathan/status/1309189613970481152

First of all, what it’s not:

❌ Not an alternative to Tailwind UI
❌ Not a predesigned UI kit
❌ Not styled at all
❌ Not in any way tied to Tailwind, there is no CSS or classes or anything of any kind in the library

🚀 It's still early, but we tagged the first releases of Headless UI for React and Vue!

We're starting with a Menu Button (or dropdown for you common folk 😤), with new components coming every few weeks 🤩

Incredible work by @malfaitrobin on this one 👏

headlessui.dev If you haven't seen us hinting at it, Headless UI is a set of completely unstyled, fully accessible UI primitives that make it really easy to build custom controls that are super easy to customize and style.

It's the component library I've always dreamed of 😍