I haven't looked at your css, but maybe changing the box model could help?
Regarding the CSS size, my experience was the opposite, Tailwind output was usually a lot smaller than hand-written CSS.
I have nothing against plain CSS either though; but it's at least as easy to make a mess.
Maybe if you use a CDN, so hopefully the user might have a local cache of it from somewhere else, that can be avoided?
Still though, tailwind is pitched WITH it's build step normally, making the author's point about avoiding a build step a bit odd.
Browsers partition caches by origin now for privacy reasons, so this is no longer possible. If the user doesn’t have it cached from your website, they don’t have it cached.
Tailwind requires a build step and shipping the 1.x development build was explicitly not meant for production.
Trying to use tw 1 like this without a build step, you can't even define a custom color scheme.
If this is what you want, I'd use a library that actually supports this. Maybe tachyons? But tbh, without the build step I'd consider using Tailwind at all a massive mistake. Then I'd prefer handwritten CSS.
Custom properties should make sth like this a lot more viable though. I'm sure there are libraries that better fit this use case, if you want to use a CSS library.
Tailwind output is massively bigger than the one with semantic CSS. Here's a comparison:
I think what the article is about when it says to steer clear of builds, is complex builds, where transpilations and similar changes in format have to happen, in order for the page to work.
This isn't true, though—Tailwind's build step isn't just stripping out white space, it removes unused selectirs, too, which can't be done in advance.
I use tailwind on my personal site, which is otherwise entirely just vanilla HTML, and it doesn't feel very intrusive to run the CLI in watch mode when I'm writing styles.
For example, tailwind without a build step is just the entire library. This means one can go a long way and even have a functioning web application without introducing a build step.
I would say stripping unused CSS is in the same context as optimizing images, fonts etc perhaps generally a "cleanup & prepare assets for production" step.
There's a kind of development version where that build step runs in the browser on page load, but it's still a build step in the sense of generating all that CSS dynamically, and it will produce a poor experience for a user if you try and use it in production.
But IIRC it doesn't offer quite everything full Tailwind does. In general I was frustrated with Fresh for not being up-front about the fact that it is largely built on Preact and Twind, and you must buy into those libraries first.