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.


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 [email protected] [email protected] [email protected]

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>

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 



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


Tailwind CSS Components


Tailwind CSS Badge 

Tailwind CSS Search

Tailwind CSS Pagination

Tailwind CSS Table 

Tailwind CSS Button

Tailwind CSS Modals

Tailwind CSS Avatar

Tailwind CSS loading Spinner

Tailwind CSS Progress Bar 

Tailwind CSS Alert Components 

Responsive Card Grid With Tailwind CSS

Tailwind CSS Dropdowns

Tailwind CSS Card

Tailwind CSS List Group

Tailwind CSS Breadcrumbs

Tailwind CSS Accordion (FAQ)

Tailwind CSS Responsive Image Gallery with Grid

Tailwind CSS Tabs



Tags: