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 :

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.

9. Paste this code in that file you created : 👇👇👇

plugins: {
tailwindcss: {},
autoprefixer: {},
}
}

10. Link your Html and Js file in config file in content part like this :

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;

(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

[saurn]

Thanks I tried many tutorials but this worked

[Lazy]

I wasted an entire day searching the Internet for the right video...
Finally i found it
Thanks alot bro❤

[samuelmelo]

Every time I'm gonna use tailwind I come to this video. thank u again

[wernayasa]

It's works this is 1000 time better than other tutorial.

[nadeeshlaleeshan]

This is the one i searched for a week..thanks..

[demalong]

thanks for this timeless tutorials, you're a life saver

[chandankumar-fjsh]

i have tried so many times finally i got my solutions in this video thanks.

[afaqahmad]

Well done bro.. i swear I'm trying from last 4 days and today i got post css installation successfully ❤️ thank you so much bro ❤️

[Flex-qszw]

Gracias bro :') estuve todo el día buscando tutoriales de como instalar y el tuyo fue el único que me funciono

[junaidskitchen]

Thanks bro ..mae kabse try kar raha tha ..but apki video dekh kar hogaya

[gladimarv]

The only video that helped!! Thank you!!!

[fieryninja]

nothing worked but only ur post css worked thx sooo much

[samuelmelo]

Thank you. You've just saved me <3

[dexter]

If i could i would give this video a million likes

[莊貴淳-dk]

thanks, bro. I've tried this for a week. finally, I found this video, and ur so damn good.
and there's a question: should I do the "npm run watch" when I'm going to code?

[Yolo_Swagins]

Hey man, dont be afraid to speak in your videos. They will be even better.

[josuevillanueva]

How do you have "Mac taskbar" if you are on Windows at minute 1:32?

[kujojotaro]

I followed all steps but when I do npm run watch it gives input error: you must pass a valid list of files to parse


edit:nvm I ffixed it I had put the src folder inside public by mistake

[rrrrra]

why do I have to save twice in order for the changes to reflect?

[harshaldagde]

I done all this in video you do but when I add some class its not working but tailwind official font showing and and when I expand src folder in right corner see white dot I think that created folder not save please help