Beginner’s Guide to Installing Tailwind CSS

When building modern web applications, writing long custom CSS files can feel repetitive and time-consuming. That’s where Tailwind CSS shines! It’s a utility-first CSS framework that lets you style elements directly in your HTML/JSX with small, reusable classes.

In this guide, I’ll walk you through the step-by-step process of installing Tailwind CSS in a project — the same way I followed while learning from Traversy Media’s crash course.

🌱 Step 1: Initialize Your Project

First, create a new project folder and initialize it with npm.


mkdir my-project
cd my-project
npm init -y

This will generate a package.json file that keeps track of your dependencies.

📦 Step 2: Install Tailwind CSS

Next, install Tailwind CSS as a development dependency.


npm install -D tailwindcss

After this step, you’ll see tailwindcss listed under "devDependencies" in your package.json.

You’ll also get a node_modules folder containing Tailwind and other dependencies.

⚙️ Step 3: Create a Configuration File

Generate a Tailwind configuration file using:


npx tailwindcss init

This will create a tailwind.config.js file. It’s where you tell Tailwind which files in your project should be scanned for utility classes.

Update it like this:


// tailwind.config.js
module.exports = {
content: ["./src/**/*.{html,js}"], // adjust paths as per your project
theme: {
extend: {},
},
plugins: [],
}

The content array tells Tailwind where to look for class names (HTML, React, Vue, etc.).

🎨 Step 4: Create Your CSS File

Make a CSS file (e.g., src/input.css) and include the Tailwind directives:


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

These lines load Tailwind’s base styles, prebuilt components, and utility classes.

⚡ Step 5: Build Tailwind CSS

Now, let Tailwind compile your CSS into a file the browser can use.

Run this command:


npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
  1. -i → input file
  2. -o → output file
  3. --watch → keeps running and updates automatically whenever you change classes in your files.

🖥️ Step 6: Link CSS in HTML

In your HTML file, link the generated CSS (output.css):


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind Setup</title>
<link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 text-center p-10">
<h1 class="text-3xl font-bold text-blue-600">Hello Tailwind CSS 🚀</h1>
</body>
</html>

Open this file in the browser, and you’ll see your Tailwind styles working!

✅ Bonus: Add DaisyUI

If you want prebuilt Tailwind components like buttons, cards, and navbars, install daisyUI:


npm i -D daisyui

Then add it to your tailwind.config.js:


plugins: [require("daisyui")],

Now you can use daisyUI components directly (e.g., <button class="btn btn-primary">Click Me</button>).

🎯 Conclusion

You’ve successfully installed Tailwind CSS from scratch! 🎉

  1. You learned how to set up a project.
  2. Installed Tailwind as a dependency.
  3. Configured the tailwind.config.js file.
  4. Compiled and linked your CSS.

With Tailwind, you can now build responsive, modern UIs with minimal custom CSS. Add daisyUI for ready-to-use components and speed up your development process even more.