https://tailwindcss.com/docs/installation
Installation: Tailwind CLI - Tailwind CSS
Documentation for the Tailwind CSS framework.
tailwindcss.com
Don't use Tailwind for your Design System
Hard to maintain
It’s error prone to remove one of the classNames from the list, is a similar situation when you want to remove an unused CSS class in an append only stylesheet. They can collide and override with other properties. There’re a lot of tools to solve that particular issue, such as linters or editor plugins.
Aside from hard to remove, it’s hard to change. Adding those classes might seem simple and fast while creating those components, but it will slow you down when modify or refactor them: when your component is made by nested elements with many Tailwind utilities you aren’t capable to safely refactor your structure.
It is optimised for writing, but not for reading
When reading JSX, I feel confortable to imagine a 1-to-1 match with the UI. I can easily navigate thought the component tree and map with the reality.
Even that this snapshot of code-UI is doable in Tailwind, at some level of those components you will find a layer with a bunch of classNames that you need to parse in your head in order to imagine the UI.
There’s a famous quote floating around… “Best code isn’t optimised to be written, instead, it’s optimised to be read”.
Impossible to derive styles
The Tailwind language is nice to avoid typing CSS but isn’t made for component APIs that use any sort of dynamic theme, making impossible (or very hard) to accomplish generative UI.
When I would use Tailwind again then?
- Document-like websites, styling content that is structured as a big chunk. Using Tailwind Typography it does come with good defaults for raw content like a blog or a newsletter.
- Prototyping, creating a UI that visually doesn’t need to be high quality or needs a unique style.
How I worked on Tailwind as a product designer
- Tailwind was easy and quick to integrate to tools we were already using (Storybook, Chromatic, Figma)
- Functional CSS and Atomic CSS approaches gives us the opportunity to create a strong relationship between designers and developers.
The framework being mainly developer oriented, it was essential for my self-sufficiency to understand the developers’ code.
Ultimate Tailwind CSS Tutorial // Build a Discord-inspired Animated Navbar
The BEST Figma UI Kit Ever (Tailwind UI)
Responsive Designs with Tailwind CSS
Why I don't use Bootstrap anymore.