Sep 4, 2021 4 min read

Learning Tailwind CSS

I've bundled together a handful of the most useful resources I found whilst learning Tailwind CSS

I'm here to share some resources I found whilst learning Tailwind CSS. The past month I've taught myself web development (React, Next.js, Firebase, Tailwind) and been working on Breathe Journal for Here, my startup – I'm sure I'll find a chance to talk about that when we launch!

Anyway on to Tailwind:

In the past I'd dabbled with Bootstrap and Bulma for styling websites but never quite got up to speed using them and ended up ditching previous projects.

Tailwind was the opposite, after getting through a series of introduction tutorials I was off to the races and felt a productivity boost immediately with the utility class approach.

My favourite feature is the composability of the classes and how closely it ties to a design system. Used in combination with stuff like CSS modules and React Components seem to make sense and helped me build much quicker.

Before sharing resources I think its worth mentioning that Tailwind is open source and under MIT license.

Another project Tailwind UI from the makers of Tailwind CSS is a bundle of pre-built UI components.

When I first found the project I mistook Tailwind for being a paid product and stayed clear of it but actually only these addition components (Marketing, Application UI, Ecommerce) are a paid product.

What I like:

Composability
Extendability and ties to design system
Size classes and mobile first design approach
Code completion in VSCode
Prebuilt UI with Tailwind UI (Paid)

Resources

Below I'll list some high signal resources I found whilst working with Tailwind!

A speedy introduction:

The best tutorial to get started (9 part):

Playground environment:

Code completion plugin in VSCode:

Pre-build UI components for Marketing, Apps, Ecommerce (Paid):

Quick example in practise using Tailwind UI by Justin Jackson:

I like how these first two tutorials are using Vite.js to quickly setup an environment for working with Tailwind. Hadn't heard of vite before but like how lightweight it is.