Tailwind CSS Installation 2023

Lets generate a package.json file

npm init -y

Lets install tailwind with dev Dependencies(-D), All modern Technology use postcss

npm install -D tailwindcss postcss autoprefixer vite

Lets generate a config file ⇒ tailwind.config.js file

npx tailwindcss init -p

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['*'],
theme: {
extend: {},
},
plugins: [],
}

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

/**
* This injects Tailwind's base styles and any base styles registered by
* plugins.
*/
@tailwind base;
/**
* This injects Tailwind's component classes and any component classes
* registered by plugins.
*/
@tailwind components;
/**
* This injects Tailwind's utility classes and any utility classes registered
* by plugins.
*/
@tailwind utilities;

Start the Tailwind CLI build process

Run the CLI tool to scan your template files for classes and build your CSS. 👉
package.json

{
   "name": "tailwind-manage-landing",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
   "start": "vite"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
   "tailwindcss": "^3.0.23"
   }
}

Then Run npm

npm run start

Let's run the build

{
   "name": "testproject",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
   "build": "tailwindcss -i ./style.css -o       ./css/main.css",
   "watch": "tailwindcss -i ./style.css -o ./css/main.css --watch"
},
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
   "autoprefixer": "^10.4.13",
   "postcss": "^8.4.21",
   "tailwindcss": "^3.2.6",
   "vite": "^4.1.1"
   }
}

Our work should always watch, its because we need to compile everything to our main.css

npm run build
npm run watch