Tailwind CSS

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

🌐 tailwindcss.com, docs, code

Getting started

Playgrounds

• Tailwind Play

New project

Install Tailwind CLI locally:

npm install -D tailwindcss

Create your tailwind.config.js file:

npx tailwindcss init

Run the CLI tool to scan your template files for classes and build your CSS:

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

IDE

Visual Studio (VS) Code

Extensions:

• Tailwind CSS IntelliSense

Additional steps:

• On css file, select Language Mode to Tailwind CSS

Trainings

• LinkedIn Learning: Tailwind CSS 3 Essential Training by Ray Villalobos (slides)
• O'Reilly: Tailwind CSS From Scratch - Learn by Building Projects by Brad Traversy (code)

Resources

• Free templates & UI kits