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
πŸ‘‹ While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay