Learning Tailwind CSS

Matt Spear

Matt Spear: 4th September 2021

3 min read

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

Colourful sketch

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:

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Documentation for the Tailwind CSS framework.

Favicon

Tailwind CSS


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):

Tailwind CSS v2.0: From Zero to Production

Share your videos with friends, family, and the world

Favicon

YouTube


Playground environment:

Tailwind Play

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

Favicon

Tailwind Play


Code completion plugin in VSCode:

Tailwind CSS IntelliSense - Visual Studio Marketplace

Extension for Visual Studio Code - Intelligent Tailwind CSS tooling for VS Code

Tailwind CSS IntelliSense


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

Tailwind UI - Official Tailwind CSS Components & Templates

Beautiful UI components and templates by the creators of Tailwind CSS.

Favicon

Tailwind UI


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.

The Things I Add to Tailwind CSS Right Out of the Box

In every project where I use Tailwind CSS, I end up adding something to it. Some of these things I add in every single project. I’ll share these with you, but

Favicon

CSS-Tricks


Headless UI

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

Favicon

Headless UI


Tailwind CSS Components - 600+ Free Examples and Templates

A free repository of open source Tailwind CSS components and templates to bootstrap your new apps, projects or landing sites!

Favicon

Tailwind CSS Components


Tutorial from the creator of Tailwind (22 part):

Neat searchable cheatsheet, especially useful when matching against designs and knowing the point difference between text-xl and text-2xl:

Tailwind CSS Cheat Sheet

Find quickly all the class names and CSS properties with this interactive cheat sheet. The only Tailwind CheatSheet you will ever need!

Favicon

Tailwind CSS Cheat Sheet


Finally the catch all of resources, an awesome GitHub page:

GitHub - aniftyco/awesome-tailwindcss: 😎 Awesome things related to Tailwind CSS

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

Favicon

GitHub


Thanks for checking out these resources!

If you find any quality resources you think I should list or have any questions feel free ping me at matt@mattspear.co!

Matt Spear