Setting up tailwind and postcss | postcss
16 هزار بار بازدید -
2 سال پیش
-
Tailwind CSS is basically a
Tailwind CSS is basically a Utility first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS.
✔️ What is postcss ?
PostCSS is a JavaScript tool that transforms your CSS code into an abstract syntax tree (AST) and then provides an API (application programming interface) for analyzing and modifying it using JavaScript plugins.
If you want to install this powerful CSS framework, you should do this :
1. Install node.js. you can download it from here :
✅ node.js installation link : https://nodejs.org/en/download/
2. Check that node.js and npm have installed correctly. for do this you should open your CMD and write " node -v " for checking node.js and write " npm -v" for checking npm.
3. Open your code editor and choose your folder.
4. Open terminal on that directory.
5. Type " npm init -y "
6. After that you can Install tailwind css, postcss and autoprefixer package with this command :
" npm install -D tailwindcss postcss-cli autoprefixer "
7. After it installed completely, type " npx tailwindcss init " to create tailwind css config file.
8. Create a " postcss.config.js " file.
9. Paste this code in that file you created : 👇👇👇
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
10. Link your Html and Js file in config file in content part like this :
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
11. Create your css file with any name you want and copy this code to it :
@tailwind base;
@tailwind components;
@tailwind utilities;
12. open " package.json" file and paste this code in script block :
" postcss ./src/css/tailwind.css -o ./public/output.css --watch "
(with this code you actually rebuild you tailwind css code to a readable css code for browser)
13. Tailwind css install completely and you can use this powerful framork now.
setting up tailwind and postcss | postcss
🔎 hashtags :
#programming
#tailwindcss
#postcss
✔️ What is postcss ?
PostCSS is a JavaScript tool that transforms your CSS code into an abstract syntax tree (AST) and then provides an API (application programming interface) for analyzing and modifying it using JavaScript plugins.
If you want to install this powerful CSS framework, you should do this :
1. Install node.js. you can download it from here :
✅ node.js installation link : https://nodejs.org/en/download/
2. Check that node.js and npm have installed correctly. for do this you should open your CMD and write " node -v " for checking node.js and write " npm -v" for checking npm.
3. Open your code editor and choose your folder.
4. Open terminal on that directory.
5. Type " npm init -y "
6. After that you can Install tailwind css, postcss and autoprefixer package with this command :
" npm install -D tailwindcss postcss-cli autoprefixer "
7. After it installed completely, type " npx tailwindcss init " to create tailwind css config file.
8. Create a " postcss.config.js " file.
9. Paste this code in that file you created : 👇👇👇
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
10. Link your Html and Js file in config file in content part like this :
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
11. Create your css file with any name you want and copy this code to it :
@tailwind base;
@tailwind components;
@tailwind utilities;
12. open " package.json" file and paste this code in script block :
" postcss ./src/css/tailwind.css -o ./public/output.css --watch "
(with this code you actually rebuild you tailwind css code to a readable css code for browser)
13. Tailwind css install completely and you can use this powerful framork now.
setting up tailwind and postcss | postcss
🔎 hashtags :
#programming
#tailwindcss
#postcss
2 سال پیش
در تاریخ 1401/01/09 منتشر شده
است.
16,081
بـار بازدید شده