Tailwind CSS

A utility-first CSS framework

Tailwind CSS Overview

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Unlike other CSS frameworks like Bootstrap that provide pre-designed components, Tailwind provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.

Initial release

2017

Stable release

3.3.0 (March 2023)

Written in

CSS, JavaScript

License

MIT License

Key Features

Common Use Cases

Custom UI Design

Building unique, custom interfaces.

Prototyping

Rapid UI development.

Component Libraries

Creating design systems.

Marketing Sites

Building landing pages.

Example Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <nav class="bg-blue-600 text-white p-4">
        <div class="container mx-auto flex justify-between items-center">
            <a href="#" class="text-xl font-bold">My App</a>
            <div class="hidden md:flex space-x-4">
                <a href="#" class="hover:text-blue-200">Home</a>
                <a href="#" class="hover:text-blue-200">Features</a>
            </div>
            <button class="md:hidden">☰</button>
        </div>
    </nav>

    <div class="container mx-auto p-4">
        <div class="grid md:grid-cols-2 gap-4">
            <div class="bg-white rounded-lg shadow p-6">
                <h2 class="text-2xl font-bold mb-4 text-gray-800">Welcome</h2>
                <p class="text-gray-600 mb-4">This is a card built with Tailwind CSS.</p>
                <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
                    Click Me
                </button>
            </div>
            <div class="bg-white rounded-lg shadow p-6">
                <h2 class="text-2xl font-bold mb-4 text-gray-800">Sign Up</h2>
                <form>
                    <div class="mb-4">
                        <label class="block text-gray-700 mb-2">Email</label>
                        <input type="email" class="w-full p-2 border rounded">
                    </div>
                    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
                        Submit
                    </button>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

Learning Resources