In this section we will install tailwind css 2.2 using npm . NPM is a package manager for Node.js packages, or modules .The NPM program is installed on your computer when you install Node.js . before we start you should install Node.js on your system.
Read also: How to install & setup Tailwind CSS v3
Building the new project
Create a directory named ‘test-project’ and navigate to the directory
mkdir new-project
Next, Move to the directory
cd test-project
Run initial for package.json setup
npm init -y
install tailwind css
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Next, create tailwind.config.js and postcss.config.js file using below command
npx tailwindcss init --postcss
or shorthand
npx tailwindcss init -p
Next, we need to create base css file to inject @tailwind directive to inject Tailwind’s base, components, and utilities styles. you can give any name you like tailwind.css or styles.css in my case i like to prefer app.css
touch app.css
app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Next you need to create folder it is not necessary to create folder but good look and more readable you should create folder , like public ,src etc
create new file index.html inside public folder
mkdir public
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS</title>
<!-- when we run npm build style.css will appear -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flex justify-center">
<h1 class="text-3xl text-blue-500">Hello, Tailwind CSS!</h1>
</div>
</body>
</html>
How to Install Tailwind CSS with NPM
tailwind.config.js
module.exports = {
purge: ['./public/**/*.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
package.json
create scripts for build and watch command you can also build production
{
"name": "test-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "tailwindcss build app.css -o public/style.css",
"watch": "tailwindcss build app.css -o public/style.css -w"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.2.6",
"postcss": "^8.3.5",
"tailwindcss": "^2.2.4"
}
}
Run Build Command
npm run build
How to Install Tailwind CSS with NPM image
Building for Production
The good thing about tailwind css 2.2 you can run minify css and production css in your command line
NODE_ENV=production npx tailwindcss -i <your input css file location> -o <your output css file location>
in our case file location is below
NODE_ENV=production npx tailwindcss -i ./app.css -o ./public/style.css
for minify file you can run
NODE_ENV=production npx tailwindcss -i ./app.css -o ./public/style.css --minify
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example
