how to install tailwind css with npm

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 


@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


<!DOCTYPE html>
<html lang="en">

        <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">

        <div class="flex justify-center">
            <h1 class="text-3xl text-blue-500">Hello, Tailwind CSS!</h1>

How to Install Tailwind CSS with NPM

How to Install Tailwind CSS with NPM


module.exports = {
  purge: ['./public/**/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  variants: {
    extend: {},
  plugins: [],


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

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 Badges 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 Search Examples

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