It is an inevitability for an engineer to write their portfolio site a few times, and this site is no exception.
I was introduced to Astro recently by a friend. It's a fantastic developer experience for building sites, and I plan on using it a lot more here on out. My first mini "project" using this new tech was a HackerNews frontend, which I host under this domain. Check it out!
Thus, it was only natural to rewrite this site using Astro. I was previously using Zola for the old site, which I still have no problems with, but the design was becoming a bit dated. I was drawn to Astro's Content Collections feature, which makes static content trivial to add, maintain, and render.
This is also my second small project in which I am using Tailwind. It's an interesting developer experience; I'm not fully sold on it yet, but I get the appeal.
One of Tailwind's primary objectives is to reduce the usage of increasingly
complicated CSS classes, like post-container, post-container-container, and
so on. Being able to cleanly write CSS properties directly in your HTML classes
is something I replicate often with Flexbox, using classes like
flex flex-column flex-align-center for example.
That said, I don't fully agree with Tailwind's approach to
reusing styles.
If you aren't using a templating engine, you're forced to use their @apply
approach. If you are, though, they recommend you make templates or components or
whatever else that wrap your content and embed your styles. If only there were
some sort of styling mechanism for this...
There are cases where usage of raw CSS and CSS classes genuinely outshine Tailwind's approach to composition. This, for example, is awful:
<div
class="prose prose-headings:font-bold prose-h1:text-3xl
prose-h2:text-2xl prose-h3:text-xl
prose-a:border-b-2 prose-a:border-slate-300 prose-a:border-dashed
prose-a:font-bold prose-a:no-underline prose-a:transition
hover:prose-a:border-slate-600 prose-img:rounded-lg prose-img:shadow-md
prose-slate max-w-full prose-code:font-normal prose-code:text-slate-700
before:prose-code:content-none after:prose-code:content-none
prose-code:text-sm prose-code:bg-slate-200 prose-code:px-1
prose-code:py-0.5 prose-code:rounded"
>
<slot />
</div>This is some configuration for Tailwind's typography plugin. This is exactly what CSS was made for: selecting elements relative to a container class. Embedding my prose styling into class names is mildly ridiculous, and somehow it's recommended to do it this way.
That's my main complaint. Other than that, iterating with Tailwind has been a breeze. I can throw layouts together much quicker. My HTML has become slightly more ugly as a result, but who cares; my HTML was never pretty anyway.