Using Tailwind CSS with CLI

Introduction 🚀

The Tailwind CSS CLI (Command Line Interface) method is one of the easiest and most flexible ways to install Tailwind in real projects. It lets you compile your CSS efficiently, remove unused styles, and customize everything usingtailwind.config.js.

>>“Tailwind CLI gives you full power without complex build tools.” ⚡

Why Use Tailwind CLI? 🌟

  • ⚡ Fast installation
  • 🧹 Purges unused CSS automatically
  • 🎨 Full customization support
  • 📦 No need for webpack, Vite, or bundlers
  • 🛠 Works in any project — HTML, PHP, Node, or frameworks

Step-by-Step Setup 📌

Step 1: Create a Project Folder 📁

Create project & open terminal

mkdir tailwind-cli-project
cd tailwind-cli-project

Step 2: Initialize npm 📦

Initialize npm

npm init -y

Step 3: Install Tailwind CSS 🧩

Install Tailwind via npm

npm install -D tailwindcss

Step 4: Create Tailwind Config File ⚙️

Generate tailwind.config.js

npx tailwindcss init

This creates a default configuration file:

tailwind.config.js

module.exports = {
  content: ["./**/*.{html,js}"],
  theme: { extend: {} },
  plugins: [],
};

Note

💡 Add paths to every file where you’ll use Tailwind classes.

Step 5: Create Main CSS File 🎨

src/style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 6: Compile Tailwind Using CLI 🏗️

Use Tailwind CLI to generate your final CSS file. You can run it once or in watch mode.

Build CSS (One-time)

npx tailwindcss -i ./src/style.css -o ./dist/output.css

Build + Watch (auto updates)

npx tailwindcss -i ./src/style.css -o ./dist/output.css --watch

Using Tailwind in HTML 📄

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tailwind CLI Project</title>

  <link rel="stylesheet" href="./dist/output.css" />
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">

  <div class="p-6 bg-white rounded-xl shadow-xl">
    <h1 class="text-3xl font-bold text-blue-600">Hello Tailwind CLI! 🎉</h1>
  </div>

</body>
</html>

Folder Structure 🗂️

Structure

project/
├── src/
│   └── style.css
├── dist/
│   └── output.css
├── index.html
├── tailwind.config.js
└── package.json

Advantages of CLI ⚡

  • 🧹 Removes unused CSS — optimized build
  • 🛠 Easy to integrate with any project
  • 📦 Zero bundler configuration required
  • 🚀 Faster builds than traditional setup

Production Build 📦

To minify CSS for production, run:

Production build command

npx tailwindcss -i ./src/style.css -o ./dist/output.css --minify

Note

🔥 Your CSS becomes super small thanks to purge + minify.

Additional Resources 📚

>>“CLI keeps Tailwind simple, powerful, and framework-agnostic.” 🧠