How to Install Tailwind CSS and Generate tailwind.config.js for Your HTML Project

Subhadeep MondalSubhadeep Mondal
3 min read

Table of contents

Audience: Complete beginners who want a quick, reproducible setup for Tailwind CSS v3 in a plain HTML project using PostCSS.

Outcome: A working development environment that rebuilds CSS on save and a clean production‐ready output.

Prerequisites

ToolVersion or Higher
Node.js14.x
npm6.x
A code editorVS Code recommended

Make sure node -v and npm -v return valid versions before you start.

Project Setup

  1. Create a new directory and move into it:

     mkdir tailwind-html-project
 cd tailwind-html-project

  2. Initialize npm to create a package.json file:

     npm init -y

Installing Dependencies

Install Tailwind CSS (v3), PostCSS, and Autoprefixer as development dependencies:

npm install -D tailwindcss@3 postcss autoprefixer

Generating Config Files

Tailwind’s CLI can scaffold both Tailwind and PostCSS config files.

npx tailwindcss init -p

This command produces:

  • tailwind.config.js – Customize Tailwind here.

  • postcss.config.js – Registers Tailwind and Autoprefixer as PostCSS plugins.

Configuring Tailwind

Open tailwind.config.js and ensure the content array points at every HTML or JS file that will include Tailwind classes:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./*.html",           // root-level HTML files
    "./src/**/*.{html,js}" // any HTML/JS inside /src
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

🔖 Why? Tailwind purges unused styles in production based on these paths, shrinking your CSS bundle.

Creating Source Files

1. CSS entry – input.css

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

2. 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 CSS Setup</title>

        <!-- Link your output.css file with index.html file -->
  <link href="output.css" rel="stylesheet" /> 

 </head>
 <body class="bg-gray-50 flex items-center justify-center h-screen">
  <h1 class="bg-yellow-400 text-5xl text-center py-6 font-semibold">Welcome to @StudyCodex YouTube Channel</h1>
 </body>
</html>

💡 Tip – Place additional pages in /src so they’re covered by the purge paths.

Adding Dev Scripts

Append the following to the scripts section of package.json:

"scripts": {
  "dev": "postcss -i ./input.css -o ./output.css --watch"
}
  • dev runs a watch process that rebuilds output.css every time input.css or any HTML/JS file changes.

Running the Dev Server

  1. Start the watcher in the terminal of VS Code everytime when open your project:

     npm run dev

  2. Open index.html in your browser (use the Live Server VS Code extension).

  3. Edit your HTML or CSS – the page updates automatically on save.

**Your project structure NOW looks like this: **

tailwind-html-project/
├── node_modules/
├── input.css              # Source CSS with Tailwind directives
├── index.html             # HTML file linking to output.css
├── output.css             # GENERATED! Compiled Tailwind CSS
├── package.json
├── package-lock.json
├── postcss.config.js
└── tailwind.config.js

You’re all set! You now have a modern, maintainable workflow for using Tailwind CSS in HTML projects.

Support @StudyCodex YouTube Cannel for more Coding Videos, Reseach, Documents, Tech-Talks, etc…

0
Subscribe to my newsletter

Read articles from Subhadeep Mondal directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Tailwind CSStailwindTailwind CSS TutorialTailwindSetup CSSCSS3CSS FrameworksCSSUtility TailwindUIWeb DevelopmentFrontend DevelopmentBackendDevelopementfullstackdevelopmentcodingCodingTutorial

Written by

Subhadeep Mondal
Subhadeep Mondal