Tales of Tailwind CSS

(image from Cristobal Baeza)


What is Tailwind CSS?

An API for your design system.

"Utility classes help you work within the constraints of a system instead of littering your stylesheets with arbitrary values. They make it easy to be consistent with color choices, spacing, typography, shadows, and everything else that makes up a well-engineered design system."

Why you may not like it

I had heard a lot about Tailwind CSS and decided to give it a try on a new project.

After an hour I ended up ripping it out because:

Example Tailwind styling:

relative -mr-px inline-flex w-0 flex-1 items-center justify-center rounded-bl-lg border border-transparent py-4 text-sm font-medium text-gray-700 hover:text-gray-500

Also a framework of utility classes still require you to understand CSS concepts, which is good or bad depending on what you're looking for.

If you like the flexibility of directly wielding CSS (but with nice utility classes), continue on.

What finally sold it for me

Get a taste

Here we'll do a quick walk-through.

This walk-through was performed live as a lightning talk at SeattleJS and not detailed in this post. Please visit tailwindcss.com and the component libraries mentioned below for more info.

  1. Let's play in a Next.js site. To create one quickly clone briangershon/nextjs-starter which has React, Tailwind and DaisyUI setup and ready-to-go.

  2. We'll use VSCode with the "Tailwind CSS IntelliSense" extension.

  3. We'll create a flex layout with responsive design, pseudo classes, animation, theme colors. Demo VSCode extension with autocomplete, color preview, mouse-over definitions.

  4. Lastly, we'll grab DaisyUI and TailwindUI components and try those (see below).

I'd like some components please

Here are some swanky options:

  1. DaisyUI - set of components, theming support. There are many themes, including Wireframe which is useful when initially laying out a site.

  2. Tailwind UI - paid professional components build by the Tailwind team. These components also lean on Headless UI for transitions, as well as heroicons for icons.

  3. Headless UI - unstyled components and transition library.

And you customize all these Tailwind-based frameworks the same way so can mix and mingle them, plus don't need to learn a new paradigm each time.

Tips and Resources