I spent some time this weekend attempting to make front-end code with Tailwind CSS. Tailwind is a utility-first approach to CSS wherein styles are organized into classes by how they function, not what they style. Instead of avatar-image as a class name on a user’s photo, you would probably have m-4, roughly meaning “margin four”. It’s a bit cryptic at first!
Reading through all the documentation before getting started is a good idea! Once I read through it and tinkered with it (or any other utility-first CSS approach) for a bit, it was pretty easy to use. The point where it clicked for me was when I thought “hmm, this needs a little room on the top” and then “that means I want mt-2, perfect!” Having a good autocomplete for class names helps a lot too.
I started off trying to use Tailwind in a Code Sandbox, but it seems like the community hasn’t quite figured that one out yet. That said, once I cloned a not-quite-working sandbox locally and ran it, I was off to the races.
I’ll probably read more through the component gallery next. If I can get closer to being to thinking/sketching up a UI component and then coding it up in just HTML and utility CSS, that will be a huge step forward for my craft.
Onward and upward! 📈
