DEV Community

Arman Rahman
Arman Rahman

Posted on

Tailwind CSS Installation 2023

Lets generate a package.json file

npm init -y
Enter fullscreen mode Exit fullscreen mode

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

npm install -D tailwindcss postcss autoprefixer vite
Enter fullscreen mode Exit fullscreen mode

Lets generate a config file โ‡’ tailwind.config.js file

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Image description

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"
   }
}
Enter fullscreen mode Exit fullscreen mode

Then Run npm

npm run start
Enter fullscreen mode Exit fullscreen mode

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"
   }
}
Enter fullscreen mode Exit fullscreen mode

Image description

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

npm run build
npm run watch
Enter fullscreen mode Exit fullscreen mode

Top comments (0)