Let's Try Tailwind

the new colors makes her think éclairs

2025-01-10 note astro tailwind ssg

Hey I already switched this blog over to Astro. Why not keep trying new and interestingly uncomfortable things? So now all the site styles are done with Tailwind classes. Well. Most of them. Still some of the more interesting CSS I haven’t figure out how to map over.

Will I stick with it? As always, I have no idea.

So hey while it has my attention: use Astro’s class:list directive to pass Tailwind class names up the component chain. Here’s a tidied-up example. Please forgive my beginner-ness with both Astro and Tailwind.

Say I use a UsesLink component, which would link to a list of posts where I talked about using Astro.

    <UsesLink used="astro" />
  

UsesLink itself is pretty small.

    ---
import TaxonomyLink from "./core/TaxonomyLink.astro"

const { used } = Astro.props
---

<TaxonomyLink
    href={`/uses/${used}/`}
    class="font-semibold"><slot>{used}</slot></TaxonomyLink>
  

It calls the more generic TaxonomyLink, passing a Tailwind class name as a prop.

    ---
const { href, class: className = "" } = Astro.props
---

<a class:list={[
   "p-category",
   "bg-amber-300",
   "text-slate-950",
   "inline-block",
   "rounded-md",
   "mx-1",
   "px-2",
   "py-1",
   className ]} {href}><slot /></a>
  

TaxonomyLink uses class:list to paste that class prop onto a handful it’s already using. The full list gets rendered in the final HTML.

    <a
  class="p-category bg-amber-300 text-slate-950 inline-block rounded-md mx-1 px-2 py-1 font-semibold"
  href="/uses/astro/">astro</a>
  

Oh and I’m writing this in a MDX file so I can just show you right here! The color classes will of course have changed multiple times by the time you read this.