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:
- I was worried this will dull my knowledge and practice of CSS ("why learn fake CSS shortcuts instead of css directly?")
- cryptic-looking list of class names looked ugly
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
HTML and styles go hand-in-hand, you don't have one without the other.
- Easier to maintain one structure rather than maintaing two structures and connect them with semantic names.
Utilities make life easier
- shortcuts for common patterns like flexbox and grids, media queries, pseudo classes like hover.
- these utilties map to CSS and you can peruse via the VSCode extension.
When using tailwind-based frameworks you leverage same concepts and utilities
Small CSS bundles
Ultimately I was able to style good looking functional sites quickly!
Get a taste
Here we'll do a quick walk-through.
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.
We'll use VSCode with the "Tailwind CSS IntelliSense" extension.
We'll create a flex layout with responsive design, pseudo classes, animation, theme colors. Demo VSCode extension with autocomplete, color preview, mouse-over definitions.
Lastly, we'll grab DaisyUI and TailwindUI components and try those (see below).
I'd like some components please
Here are some swanky options:
DaisyUI - set of components, theming support. There are many themes, including
Wireframewhich is useful when initially laying out a site.
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
For components that are heavily styled, if you're unhappy with long strings of Tailwind utilities:
- create components to encapsulate. For example, move a heavily styled button into its own component to reuse.
- another option is creating your own Tailwind utilities, though read Avoid Premature Abstraction first.
On the Tailwind site you can find:
- great documentation
- a fancy walk-through of Tailwind on the home page of tailwindcss.com