अनुपम

Tailwind CSS is a utility-first CSS framework that lets you rapidly build custom designs without ever leaving your HTML.

Installation

You can install Tailwind CSS using npm, yarn, or pnpm:

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

Configuration

After installation, you'll have a tailwind.config.js file where you can customize your theme:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Usage

Once configured, you can use Tailwind's utility classes directly in your HTML:

export default function Page() {
  return (
    <div className="flex items-center justify-center h-screen">
      <h1 className="text-4xl font-bold text-gray-900">
        Hello, Tailwind!
      </h1>
    </div>
  );
}

Why Tailwind?

Fast Development: No need to switch between CSS and HTML
Consistent Design: Utility-first approach ensures consistency
Small Bundle Size: Purges unused styles in production
Customizable: Easy to customize with theme configuration

Getting started with Tailwind is quick and you'll be building beautiful websites in no time!