Setting up tailwind and postcss | postcss
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
Auf dieser Seite können Sie das Online-Video Setting up tailwind and postcss | postcss mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Hero Code 29 März 2022 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 16,433 Mal angesehen und es wurde von 264 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
