What do you think of TailwindCSS?

TL;DR The ease of inline CSS with a nicer syntax and breakpoints. A great choice for a small app, when you just want to get it out fast.

Typically, you use CSS to style elements based on their type and context (eg `button`, `page-header`, `nav-like-active`). If you have a large application, a team, and need to enforce consistent styling, then opt to separate styling from markup.

For smaller projects, though, the separation of concerns is often a tax, not a benefit. When you're not worried about consistent styling across multiple components, or what it means for the development team. You just want to get something up and running quickly.

Some people opt for inline styles. These are CSS styles applied to individual elements, without the cascading part (selectors). What I don’t like about inline styles is that the syntax is very verbose, and there’s no support for breakpoints (no media queries).

TailwindCSS lives somewhere in between. You’re styling each element directly, but using concise class names. Instead of `style=“margin: 0 1rem 0 1rem”` you write `class=“mx-4”`.

The class names are pretty easy to learn, `m-<n>` is all margins, `mx-<n>` is left and right margins, and `mt-<n>` is the top margin. The shortcuts are used for sizing, margins, and paddings. Other styles have longer, easier to remember names, like `text-center`, `list-none`, `flex-col`.

<article class="text-gray-700 body-font">
  <div class="container px-5 py-24 mx-auto">
    <div class="flex flex-col w-full mb-20">
      <h2 class="text-xs text-red-500 tracking-widest font-medium title-font mb-1 text-center">
        Published <time content="{{published_at}}">{{date published_at format="MMMM Do, YYYY"}}</time>
      </h2>
      <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900 text-center">
        {{title}}
      </h1>

You can pick up TailwindCSS in about an hour. Overall learning curve not so bad, though it’s a downside when contributors have to learn TailwindCSS on top of already knowing CSS.

Editing in the browser is just as easy. Use DevTools to select an HTML element and change its class name to see the effect, or tinker with the style and then work it back into the corresponding TailwindCSS class.

My first experience was restyling the design for my blog. It’s simple enough, under 1,000 lines of Handlebars templates, that it was perfect for the first experiment. Previously, I used standalone CSS stylesheets, and doing a new template with TailwindCSS was time-saving, enjoyable, and frustration-free. 10/10 will recommend.

I still use a standalone CSS stylesheet, though. I can use TailwindCSS for the overall blog layout since the templates are under my control. The content is generated by Ghost, so that has to be styled with proper CSS. There’s also a stylesheet for syntax highlighting (which I carried over from the old template).

The second experience was building the UI for a single page app (literally, one page) that I use to create content for the blog. This is an editor that can pull content from another URL, WYSIWYG edit, and generate Markdown for the blog post.

I’m experimenting with some tools for rapid development (Parcel.js, Next.js) and they all have built-in support for TailwindCSS (via PostCSS). So adding it was quick and easy.

For getting something up and running in a short amount of time — when you don’t have to worry about branded design or team collaboration — I’d pick it again and again.

⭐ Give it a try. The docs are really good, expect to spend many an hour getting familiar with just enough TailwindCSS to get that Aha moment.

Edit (May 27, 2020)

Like other popular CSS frameworks, there's an ecosystem of ready-to-use components and themes. After writing this post, I discovered the beautiful Tailblocks, and incorporated in into the template you see today.

And this Visual Code extensions with IntelliSense:

Edit (July 13, 2020)

For blogs, it doesn't get easier than adding @tailwindcss/typography.

<article class="prose lg:prose-xl">
  {{ markdown }}
</article>

♥️ Liked this post? Want to see more posts like this? Drop me a line at assaf@labnotes.org