[go: up one dir, main page]
Scribd
Upload
5 views3 pages

Tailwind CSS v4 Installation

css

Uploaded by

muthresg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views3 pages

Tailwind CSS v4 Installation

css

Uploaded by

muthresg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Tailwind CSS v4 + PostCSS Installation (Final Process – 2025)

**Install Node**
Step 1: Project Setup
mkdir my-tailwind-app
cd my-tailwind-app
npm init -y
Step 2: Install Required Packages
npm install -D tailwindcss@latest @tailwindcss/postcss@latest
postcss@latest autoprefixer@latest vite
Step 3: Create Config Files
npx tailwindcss-cli@latest init -p
Step 4: Create Your CSS File
@import "tailwindcss";
Step 5: Configure tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["*"],
theme: {
extend: {},
},
plugins: [],
}
Step 6: Configure postcss.config.js
// postcss.config.js
module.exports = {
plugins: {
'@tailwindcss/postcss': {},
autoprefixer: {},
},
}
Step 7: Build Tailwind CSS
Add script in package.json:

"scripts": {
“start”: “vite”
},
Step 8: Use in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Tailwind 4 with PostCSS</title>
<link href="style.css" rel="stylesheet">
</head>
<body >
<h1 class="bg-red-500" </h1>
</body>
</html>
Step 9: Then run:
npm run start

Step 10: Install tailwind css intelisense extansions

You might also like