Introduction to Tailwind CSS

Tailwind CSS is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.

What is Tailwind?

Unlike traditional CSS frameworks like Bootstrap, Tailwind doesn’t provide pre-designed components. Instead, it gives you low-level utility classes that let you build completely custom designs.

Why Tailwind?

No naming conventions: No more thinking about class names
Rapid prototyping: Build UIs directly in HTML
Consistent design: Built-in design system
Small bundle size: PurgeCSS removes unused styles

Getting Started

Install Tailwind CSS:

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure tailwind.config.js:

javascript

module.exports = {
  content: ['./src/**/*.{html,js,vue}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Basic Usage

html

<div class="p-4 bg-blue-500 text-white rounded-lg shadow-lg">
  Hello, Tailwind!
</div>

Spacing Utilities

html

<div class="m-4 p-6 mx-auto mt-8 px-4 py-2">
  Spacing example
</div>