Getting Started with Tailwind CSS

The fastest way to build beautiful, responsive, and accessible user interfaces on the web today.

Install Now Learn Basics
Code Example

<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full transition">
    Click Me
</button>
A simple button styled entirely with Tailwind CSS utility classes.

Table of Contents

Getting Started

Tailwind CSS is a CSS framework that lets you build custom layouts quickly using pre-defined utility classes.

Installation

Terminal
Preferred
npm install tailwindcss

Configuration

JavaScript 
tailwind.config.js

Quick Start

Live Preview - Responsive Card

Hello World

This is a sample card component

Utility-First Approach

Instead of writing CSS, apply utility classes directly to your HTML elements to style them.

.text-pink-500 .p-4 .rounded-lg vs traditional CSS

"Style by class, not by CSS"

⚡
Rapid Prototyping
🎨
Design Consistency
🔍
Improved Accessibility

Responsive Design

Build responsive layouts with ease using Tailwind's 7 breakpoints and 6 column grid system. 




  
Column 1

  
Column 2

  
Column 3
Mobile
Tablet
Desktop

Advanced Features

🔧

Preset Configurations

Start with pre-built configurations for common UI patterns and design systems.

🖼️

SVG Integration

Use Tailwind to style SVGs the same way you style HTML.

Dark Mode Support

Switch between light and dark modes using responsive utility classes or theme toggle.

Toggle Button
This is a dark mode demo - you control the appearance!

Customization

Tailwind is fully customizable to fit your design system or brand.

Theme

Colors Fonts Breakpoints

Variants

Hover Focus Group-hover

Extending Tailwind

Add your own utility classes and styles to enhance the framework.

Join Our Community

Discord Community

Join our Discord to ask questions and share ideas with thousands of fellow developers.

GitHub

Star the project on GitHub and help support the continued development of Tailwind.