Everything you need to know to get started with Tailwind CSS, the utility-first CSS framework 🍃

Hey there,

Happy February! This week, we're covering a hot topic: Tailwind CSS. I've been a longtime fan of Tailwind, and use it almost every project I build online. I think you'll really enjoy this issue, and as always, I'd love to hear what you think, so reply to the email at any time with your feedback 😊

Tailwind is a utility-first CSS framework. Unlike comprehensive frameworks like Bootstrap or Foundation, which provide solutions for things like cards, forms, and buttons, Tailwind allows you to compose your UI out of smaller classes: for instance, the p-4 class applies a padding of 1rem, and the flex class sets up a basic flexbox layout by setting display: flex.

Tailwind offers a very different approach to writing CSS. That approach is controversial (more on that later), but for the most part, many developers find moving to a utility-first CSS framework makes it easier to own your CSS, instead of working under the constraints of CSS that's given to you.

Let's look at Tailwind from a few angles – first, a few video introductions to Tailwind, templates and starter kits, tools and cheat sheets, and some deep dives into the how and the why of Tailwind.

Video introductions to Tailwind

Get started with Tailwind CSS in 15 Minutes

Chris on Code's 15 minute intro to Tailwind covers why it matters, how it works, and how to build your first few components with it. Check out Chris' Beginner Tailwind course if you dig his teaching style and want to go more in depth with Tailwind, too!

Building interfaces with Tailwind CSS

Adam Wathan, creator of Tailwind CSS, shows off the framework by recreating Netlify using 100% Tailwind classes. It's a really great lesson in breaking down existing designs and building them back up with simple CSS primitives, and the entire series (linked as part of the video) covers rebuilds of drastically different layouts and page styles using just Tailwind. Must-watch!

Templates and starter kits

Tailwind UI

Tailwind UI is a commercial product built by the Tailwind Labs team (comprised of the Tailwind creators and engineering team), showcasing beautiful component and page layouts directly using Tailwind. An interesting development of Tailwind UI is how often it seems to contribute new features or directions back to Tailwind, the open-source framework: if you want to support the development of Tailwind UI, buying the UI library is a great place to start.

Looking for an intro to Tailwind UI itself? This video on our YouTube channel covers Tailwind UI and how to get started with it, by adding it to an existing web app.

Tailwind UI

Beautiful UI components by the creators of Tailwind CSS.

Official Tailwind CSS Components•

Tailwind Components

Tailwind Components is a free, open-source collection of community contributed components for Tailwind. If you have designs or layout ideas that aren't covered in Tailwind UI, or you can't afford Tailwind UI, this could be a great solution for filling in the gaps.

Tailwind CSS Components. Examples and templates

Tailwind CSS examples from components by the community. Tailwind chart, grids, inputs, forms, templates and much more

Tailwind Toolbox

Tailwind Toolbox provides a different approach to Tailwind starter kits by giving you full-on templates to get started with the framework. Things like landing pages, admin dashboards, and smaller components like modals, accordions, and responsive tables are all covered, and available for free.

Tailwind Toolbox - Free Starter Templates for Tailwind CSS

Free open source Tailwind CSS starter templates to get you started quickly to creating websites in Tailwind CSS!

Show all templatesShow all components•

Tools and cheat sheets

Tailwind Play

Tailwind Play is Tailwind's official online playground for the framework. Experiment with layouts and configurations and try out new designs in real-time, using the most up-to-date version of the framework.

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind’s build-time features directly in the browser.

Tailwind Play•

Tailwind Cheat Sheet

Jay Elaraj's cheat sheet is a great interactive site for looking at all of the classes and properties exposed by Tailwind, allowing you to search and dive directly into the corresponding docs for anything in the framework.

Tailwind CSS Cheat Sheet

Cheat sheet that provides a quick, interactive reference for all utility classes and CSS properties provided by Tailwind CSS, a utility-first CSS framework.

awesome-tailwindcss

This GitHub repo is a collection of tutorials, starter kits, open-source projects, and basically anything built with or about Tailwind CSS. It's open-source, and you can contribute to it yourself, so if you find a missing resource, make sure to add it!

aniftyco/awesome-tailwindcss

😎 Awesome things related to Tailwind CSS. Contribute to aniftyco/awesome-tailwindcss development by creating an account on GitHub.

GitHub•aniftyco

How and why it works

CSS Utility Classes and "Separation of Concerns"

Adam Wathan's original post on Tailwind CSS, where he first announced the framework, also serves as a great introduction to the why of CSS utility classes. In the post, he argues that CSS utility class frameworks offer better consistency, less premature abstractions, and more consistent designs:

My experience is that building things utility-first leads to more consistent looking designs than working component-first, as unintuitive as it might sound at first.

CSS Utility Classes and “Separation of Concerns”

Over the last several years, the way I write CSS has transitioned from a “semantic” approach to something more like what people call “functional CSS.” In this post I explain how I got to this point and share some of the lessons and insights I’ve picked up along the way.

Why Tailwind CSS

Shawn Wang writes on why he changed his mind about Tailwind CSS:

I'm not a Tailwind shill. I'm a Guo Lai Ren - someone who has changed their mind on it recently and am a happy user despite acknowledged tradeoffs. "Crossover people" can often be more persuasive to skeptics than born-and-bred believers. So I hope to contribute my perspective to the discussion, if you are open to it.

Why Tailwind CSS ∊ swyx.io

Why I changed my mind on Tailwind CSS, and why I now consider it the Goldilocks Styling Solution

Why Tailwind Isn't for Me

For a contrary point of view, check out Jared White's blog post about his experience with Tailwind, and why he thinks it's the wrong direction for CSS on the web:

I've gotten into more than one heated argument on the interwebs lately over Tailwind CSS. I'm not proud of this. I don't like being at odds with anybody. I think the folks building Tailwind are talented and nice people. But at a pure technical level, I simply don't like Tailwind. Whoever it was built for, it was not built for me.

Why Tailwind Isn’t for Me

I think the folks building Tailwind are talented and nice people. But at a pure technical level, I simply don’t like Tailwind. Whoever it was built for, it was not built for me.

DEV Community•Jared White

Liked this issue? Check out last month's Bytesized newsletters, in case you missed them:

• 14 Great VSCode Resources - Dev Setups, Quickstart Videos, Courses, and Deep Dives
• Here's what you need to learn and master Vim, the modal text editor 🤸‍♀️
• How to start using Emacs, the programmer's editor 🤓
• What could we build with better tools for thought? 📝

See you next week!

Bytesized is a weekly newsletter exploring important ideas for developers. Join us on our Discord server 👋