I feel like these are two very, very different tools. Pico (or something similar) is great for a Just-Works framework where things look simply and nice. For a lot of things, this is good enough.

But Tailwind is for building... anything. It's better to think of it as inline styles with syntactical sugar. Yes, this has historically been something to avoid. But as components become more common, it moves the DRY to the HTML level (rather than CSS classes).

It's not for everyone or everything, but I've loved it. There's a joke that the hardest part of CS is naming things, and this removes having to map classes and IDs across two different files.

I don't think these are the same, but as a non-web-developer who likes building web side-projects, I love pico.css. It's fantastic for forms and the light grid/container stuff.

My stack these days is Flask + HTMX + Alpin.js + Pico.css and I write almost nothing but Python and HTML.

People still complain about the tailwind build process and I agree and would not use it bc of that except.. Tailwind has had a stand alone executable builder available for a long time. (Including at the writing of this article)You can just drop the exe and either add it to your path or run it directly. No node or npm/npx needed.

https://tailwindcss.com/blog/standalone-cli

I've been using one of these semantic classless CSS systems for an application I've been developing for the past ~6 months with a team of ~3. It's working great so far. We didn't even install it from a package manager. Just copy and paste the file straight into source control. (attributions intact, don't worry licensing enthusiasts) Customizations go right into the original file.

Feels amazing.

The real problem is the lack of css understanding. Once you learn basics of css and start using developer console/debugger it becomes easy.

Also, most of the time all you need is flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The workflow I'm trending towards is a design system (e.g. Radix UI) for the bulk of the styling, inline styles for most customizations (shouldn't be too many), and then plain CSS with classes on occasion (e.g. I have an override I need to use in multiple places or an animation). The little CSS you do need can be isolated if you're using a framework like Remix.

I use the same principle as pico but from scratch with tailwind. It does too much magic and it’s far too complex and undocumented to be able to modify a piece of it you need to change. In my global stylesheet I style inputs all one way and target aria and state selectors for more specific styling. I still use inline styles for more unique cases.

They are two different techniques that can work together well. If I’d make any comparison, it’d be between pico and tailwind’s typography plugin specifically.

I’ve been doing a lot of htmx recently for side projects that end up not needing any build step. Pico is great for these.

If you need a build no reason not to use tailwind imo.

This could be a series.

t-shirt vs sweater car vs truck cat vs dog

I use both and they work like a charm. But I disable the tailwind base styles ;)

Nothing stopping you from using them together. Its all just CSS

So in 2024—what classless/minimal CSS frameworks compete with Pico? Tailwind is a poor comparison.

Without components, I think Tailwind would drive me bonkers.

I think this website is beautiful in its simplicity