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
Top comments (0)