🚀 How to Install Tailwind CSS from Scratch with PostCSS and Autoprefixer
Tailwind CSS is a powerful utility-first CSS framework that helps you build modern websites with ease and flexibility. In this guide, we’ll walk through how to set up Tailwind CSS manually using npm, postcss-cli, and autoprefixer — with a simple build process and a sample HTML file.
📦 Step 1: Initialize Your Project
First, create your project folder and initialize it with npm:
mkdir my-tailwind-project
cd my-tailwind-project
npm init -y
🧶 Step 2: Install Tailwind CSS and Build Tools
Install Tailwind CSS, PostCSS CLI, and Autoprefixer:
npm install tailwindcss postcss-cli autoprefixerThen generate the Tailwind configuration file:
npx tailwind initThis will create a basic tailwind.config.js file in your project.
🛠️ Step 3: Configure PostCSS
Create a postcss.config.js file in your root directory with the following content:
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
🎨 Step 4: Set Up Tailwind CSS Entry File
Create a directory css and a file tailwind.css inside it. Add the Tailwind directives:
css/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
These directives will include Tailwind’s base styles, components, and utility classes during the build.
📦 Step 5: Update package.json Scripts
Modify your package.json file to add a build script. Here’s a full example:
{
"name": "my-tailwind-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "postcss css/tailwind.css -o public/build/tailwind.css"
},
"repository": {
"type": "git",
"url": "git+https://github.com/adamwathan/my-tailwind-project.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/adamwathan/my-tailwind-project/issues"
},
"homepage": "https://github.com/adamwathan/my-tailwind-project#readme",
"dependencies": {
"autoprefixer": "^9.6.1",
"postcss-cli": "^6.1.2",
"tailwindcss": "^1.0.4"
}
}
⚠️ Note: You can update the metadata (author, repository, etc.) as needed.
🧱 Step 6: Create the Build Output Folder
Create a directory to hold the compiled CSS file:
mkdir -p public/build🔨 Step 7: Build Tailwind CSS
Now compile your Tailwind CSS using the following command:
npm run buildThis will generate a file at public/build/tailwind.css.
🌐 Step 8: Create a Sample HTML File
Here’s a simple HTML file that includes the generated Tailwind CSS:
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="/build/tailwind.css">
</head>
<body>
<h1 class="text-4xl font-bold text-center text-blue-500">Hello world!</h1>
</body>
</html>
Open this HTML file in your browser to see Tailwind in action 🎉
✅ Final Folder Structure
Your final folder structure should look like this:
my-tailwind-project/
├── css/
│ └── tailwind.css
├── public/
│ ├── build/
│ │ └── tailwind.css (compiled)
│ └── index.html
├── package.json
├── postcss.config.js
├── tailwind.config.js
🔁 Optional: Watch for Changes
To watch files and rebuild automatically, consider using a tool like npm-run-all or watch in combination with your script. But for this basic setup, you’ll just rerun npm run build after changes.
🚀 Done!
You now have a working Tailwind CSS setup using postcss-cli. Happy styling!
There are 0 comments