Tailwind CSS Tutorial

1. Tailwind CSS Introduction

The utility-first philosophy versus custom CSS, installing Tailwind with Vite/PostCSS, and a first component.

2. Core Utilities

The spacing scale, typography, color utilities, and layout utilities like flex, grid and width/height.

3. Responsive & State Variants

Responsive prefixes like md: and lg:, state variants like hover: and focus:, and dark mode with dark:.

4. Customization

Extending the theme in tailwind.config.js, using @apply for repeated utility patterns, and writing a small plugin.

5. Performance & Purging

How content scanning and the JIT engine work, keeping bundle size small, and common pitfalls with dynamic class names.

6. Building a Design System

Semantic design tokens, a small @apply-based component library, and where to draw the line between the two.

7. Tailwind CSS Interview Questions

Commonly asked Tailwind CSS interview questions with clear, practical answers.