Install Tailwind CSS as a PostCSS Plugin (Version 2.0)

Watch • Install Tailwind CSS a... for latest version v2.2
This video:
Install and setup Tailwind CSS 2.0 using PostCSS and optimize for production using Purge CSS. No other frameworks or libraries needed.
Subscribe and stay tuned for tips, tutorials and more.
Follow me on Twitter: / shrutibalasa
Follow Thirus on Twitter: / thirusofficial
Visit my website: www.shrutibala...
#tailwind #tailwindcss #postcss

[@mharding7]

Best PostCSS video on KZbin! Every other instruction/tutorial left my with a PostCSS not found error. This one fixed it. Outstanding!

[@Thirus]

That’s great to know! Thank you 😊

[@marcelnunez1658]

Same, a lot of videos explain it on a very confusing manner

[@notsure8175]

I was tired looking a good explanation of using purge function in tailwind. Thanks a lot!

[@Thirus]

You’re welcome 😊

[@minnkhantnaing9604]

I have been looking for a way to install Tailwind on my computer without any node error and this video saves me many hours. Thank you so much.

[@Thirus]

You’re welcome 😊

[@joyousblunder]

THANK YOU! You have no idea how hard was to find this content!

[@Thirus]

So glad you finally found it and loved it :)

[@geearellano9112]

GOOD JOB THANK YOU JUST GOT HIRED and my TL told me that I should learn this! life saver

[@Thirus]

Amazing!!

[@John-wx3zn]

What does TL stand for?

[@g-kems]

Thank you for the clean tutorial! The purge and dark options are no more necessary

[@Thirus]

Yes, that’s changed in version 3

[@ej7623]

thank you, I am trying to learn Tailwind CSS . Thank you for very clear explanation about prod and purge.

[@Thirus]

You’re welcome 😊

[@pablorenteria7807]

thankyou the best tutorial to install tailwind

[@Thirus]

So glad 🙂

[@neerajsinghtangariya2587]

very productive video for installing tailwind css with postcss...thank you for this...:)

[@Thirus]

You’re welcome 😊

[@alanb3258]

Nice clear video and it worked first time with a basic Svelte program. Thank you lots

[@Thirus]

That’s great! You’re welcome 😊

[@manuelnunez8239]

Straight to the point. thank you

[@Thirus]

Glad you liked it. But for the latest version, you should watch this video: Install Tailwind CSS v3 - CDN vs CLI vs PostCSS kzbin.info/www/bejne/nmq9pqFqZpKCsMU

[@thatsasif]

Hi, very helpful video. After building for production you opened the styles.css of src in explorer. Anyways the info was already opened which was pointing to the right file of public. :)

[@Thirus]

Genius! 😀 I figured it out after publishing the video, so I left it as it is.

[@hafizjavaid]

Help me a lot I almost tried from everywhere really great job. Thank you

[@Thirus]

You’re welcome 😊

[@alistairmorris462]

Perfect - thank you Shruti - you're a star!

[@Thirus]

Aww thanks! 😊

[@wildogreco5102]

GRACIAS, es el mejor video de como instalar tailwind.

[@bvdizon]

Thank you Thirus!

[@Thirus]

You’re welcome!

[@raheessaifudeen1878]

Thank you!, this video help me a lot. 😊

[@Thirus]

You’re welcome :)

[@anuj7286]

Mam, i am little confused which dependencies should i install with --save-dev flag or without flag devependencies.

[@syamprasad6038]

Could you make a video about the same but with v3.0, also include important things like purge and production ready

[@Thirus]

That video is on the way! Recording in progress. By coming Monday / Tuesday it should be out.

[@marcelnunez1658]

This was very useful, thanks, subbed

[@Thirus]

Awesome!

[@AceOfTheHood]

Im getting 'npm is not recognized as an internal or external command, operable program or batch file' when i entered the npm init -y. Any way i can fix that.

[@Thirus]

You will need to install npm first. Search on Google how to do that

[@palashagrawal2343]

mam my tailwind is not detecting whenever I am adding new tw class. I have followed all your steps of production still not getting. What can be the error mam?

[@Thirus]

You will have to share your folder structure and config file screenshots. DM me on Twitter @shrutibalasa

[@yifeige6089]

Thanks, your video really helped me a lot!!

[@Thirus]

Glad to hear that! :)

[@jorgearraga]

Great tuto Shruti, thanks you! =)

[@Thirus]

You’re welcome 😊

[@AHMEDRAZA-do5dn]

Nice and very helpful video

[@Thirus]

Thank you 😊

[@bernardchisumo4054]

why this command alone doesn't work npm install -d tailwindcss@latest postcss@latest autoprefixer@latest ?

[@Thirus]

Do you get an error?

[@mibaatwork]

Is there any way in tailwind css to obfuscate my css classes in html so no one can just copy my design from the page? I used sveltekit, postcss and vite.

[@Thirus]

No matter what you do, you can’t stop people from copying the design from your page. Front end is like that.

[@tabgaming5943]

Prod Command is not working for me .. What Should I do? Please help me

[@Thirus]

What happens when you run it?

[@madhavanand756]

How are you getting those emojis on installation, Plz Plz help & reply

[@Thirus]

I think that was older version

[@hariprasadyakkala9086]

Please let me know how to add the custom text shadow and other custom class to use

[@Thirus]

Check this for creating custom utility classes - tailwindcss.com/docs/adding-new-utilities Otherwise you can add regular classes and regular CSS anyway (in src > styles.css)

[@TheKizon]

it was really helpful, thank you so much

[@Thirus]

You’re welcome 😊

[@lahila7383]

instant subscription, thank you so much

[@Thirus]

Welcome 😊

[@bernardchisumo4054]

Nice explanation ,but I have a question ,what make the difference of using postcss and without postcss ? Which one is better for building large application and why?

[@Thirus]

Tailwind CSS requires the autoprefixer package to add vendor prefixes (to make some CSS work on all browsers) and that would need PostCSS So for large projects it’s important to install and setup Tailwind as a PostCSS plugin

[@philip9677]

can we use purge on non tailwind classes for example to our base stylesheet

[@Thirus]

No, purge css doesn’t compress the CSS file. It removes unused classes from the stylesheet

[@bhanuprakash5925]

I am geeting npm ERR! Missing script. Can you please help me. I am new to node and Tailwind.

[@oivchenko]

Thanks ! Very useful

[@Thirus]

Welcome 😊

[@John-wx3zn]

Your are a dear. Thank you. Can you do a tutorial that shows how to do it with webpack to?

[@Thirus]

Does this help? levelup.gitconnected.com/setup-tailwind-css-with-webpack-3458be3eb547?gi=308ae37fd02e

[@John-wx3zn]

@@Thirus Yes, but I had to install autoprefixer before installing tailwindcss. I appreciate you. :)

[@darshanpagar1894]

How to use this styles.css folder in some other html file which is in different folder.

[@sibtycodes3358]

Every thing went right over my head 🥲

[@Thirus]

Oops. How much of front end knowledge do you have? Will try and help

[@sibtycodes3358]

@@Thirus Thanks , I did every thing you showed in the video, additionally I installed vite and run js debug and it worked 💌

[@sibtycodes3358]

@@Thirus took many hours as i am a beginner but figured it out , thx for your help

[@kosseytz893]

I'm getting error with npm run build

[@Thirus]

This is an old video. Please follow the new one: kzbin.info/www/bejne/nmq9pqFqZpKCsMU

[@abhipshasahu2868]

What can postcss do that we can't do without it?

[@Thirus]

Some features like using the `apply` directive might not work without PostCSS

[@christianprojects4401]

Thank You Mam

[@Thirus]

Welcome!

[@osmangoplani1205]

Sister can you tell me how can I install this extension in Visual studio

[@fbenfrank]

Hello could you help explaining when it shows zsh: command not found: npm. I’m really struggling with this error.

[@Thirus]

Looks like you haven’t installed npm.

[@fuad7258]

yeah, i got you sister

[@anas_ouh4223]

Hello, how did you open the terminal please ?

[@Thirus]

Cmd + J

[@lh536]

Thank you! Very useful video! One question... do you recommend to install win-node-env as a global dependency?

[@Thirus]

It’s okay to install it globally

[@anuj7286]

I couldn't watch postcss with -w flag and both compile & watch is not working or can we compile tailwindcss into sass with node-sass?

[@ezeobisunny]

I tried but it is showing showing me npm error: unexpected end of json input while parsing near .....

[@Thirus]

Check if you have missed a comma somewhere in package.json file

[@shayakdey6787]

Should i have to install tailwind each time for different projects?? Reply please

[@Thirus]

Yes, you have to. If that takes too much time, feel free to clone this GitHub repository github.com/ThirusOfficial/tailwind-css-starter-postcss

[@shayakdey6787]

@@Thirus I'm beginner actually. If i install tailwind css once and copy those tailwind files for future uses. Will it work??

[@Thirus]

Message me on Twitter @shrutibalasa

[@shayakdey6787]

My vscode run slow when install tailwind, don't know why

[@Thirus]

I don’t think tailwind is the reason

[@shayakdey6787]

@@Thirus it is because of 3mb css file. I cannot properly use sass compiler extension.

[@queenspendler]

Wow, this is a life saver. Thank you so much! How would you add a library for uglifying your css file?

[@Thirus]

Thank you! You mean minify? You don’t need anything additional. You could simple use purge that comes along with Tailwind - it removes all unused CSS

[@queenspendler]

​@@Thirus Thanks for your hint. I solved this by adding cssnano: npm install cssnano --save-dev and extend the postcss.config.js by the call: require("tailwindcss"), require("autoprefixer"), require('cssnano')({ preset: 'default', }), Now all comments are removed and the css file is just one line, which makes it more difficult to understand :)

[@sylvanusmukhim3108]

Great video content Ma'am. 👍❤️ But after following along. "npm run build" Doesn't seem to be working in my Project not that. "npm run prod" either. Is there any problem in my Project ma'am? Thank you

[@Thirus]

Can’t say much until I look into your code. Send me a screenshot of your terminal on Twitter - twitter.com/shrutibalasa

[@excybeats5321]

thank you so much

[@Thirus]

You’re welcome!

[@ShamsulIslamSujon]

Hi Shruti, Thanks for the video. It is really helpful. I am just having trouble with building the CSS every time I change the CSS or tailwind config. Maybe I want to add some custom CSS or add some configuration to the tailwind.config.js to meet my design perfectly and I have to run the command every time after the changes. This is quite annoying for me. I have searched and seen some videos where they have used some watch command and it builds the CSS automatically without typing the build command manually. But I think I've messed up and can not configure it properly. Can you make a video with the watch command too?

[@Thirus]

Hi Shamsul, You can install the npm package onchange `npm install onchange` Add this script to `package.json` file "watch": "onchange 'tailwind.config.js' './public/**/*.html' './src/**/*.css' -- npm run build" Then you can simply use this command to watch all those files `npm run watch` Hope this helps

[@ShamsulIslamSujon]

​@@Thirus I don't know why it does not watch the changes. Can you see my config and tell me if I did anything wrong? prnt.sc/ybspo3

[@Thirus]

I think your build script is not right. It should be "build": "postcss ./src/styles.css -o ./public/dist/styles.css" You have an extra 'build'. Also, check the file paths. But everything else looks fine

[@vishnuchitara]

When I run "npm run build" it give me error. What should I do right now.

[@Thirus]

What’s the error?

[@vishnuchitara]

@@Thirus I already sent you on twitter Mam

[@arskhatri9825]

alright! but i have an error of 'npm run prod' please help me to solve. Error: A complete log of this run can be found in:

[@Thirus]

Kindly DM me on Twitter with a screenshot of the error

[@dreammanor_ru]

Привет! Спасибо за видео, всё очень понятно и наглядно. Удачи в дальнейшем.

[@PushkarThakar]

how to do this in VS 2019

[@Thirus]

VS code is the recommended editor because you get the intellisense plugin. Haven’t used VS 2019, so I don’t know what’s different there

[@PushkarThakar]

@@Thirus I am not worried about IntelliSense. How can I get PostCSS or something similiar for VS 2019

[@Thirus]

The editor has nothing to do with postcss. Postcss is an NPM package. Are you familiar with npm?

[@PushkarThakar]

@@Thirus Yes, but I do not get the option in VS 2019 to run NPM commands while working in MVC core applications

[@Thirus]

That’s okay, you can open terminal or command prompt to run the same commands

[@hariprasadyakkala9086]

Hello, I have install the live server using this command : npm install live-server and it's worked fine, but when i use this command : liver-server public it will not shows this error Please rectify this ------- liver-server : The term 'liver-server' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + liver-server public + ~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (liver-server:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException

[@Thirus]

It’s not liver-server. It’s live-server. There’s an extra ‘r’

[@hariprasadyakkala9086]

@@Thirus Thank you, Please let me know how to add the custom fonts to css file using linke font face

[@Thirus]

Watch this video - kzbin.info/www/bejne/baXRc396r95-q9U

[@jerrymatera]

only that my styles are now gone

[@Thirus]

??

[@jerrymatera]

@@Thirus all my styling is purged while on production

[@Thirus]

Your path to HTML file was not correct I guess

[@jerrymatera]

@@Thirus thanks it's done

[@nilambarsharma4869]

Good content. Nice. But your terminal is ugly. Please give it a make over.

[@boxmanpiyushgaming5339]

Can u go slow

[@Thirus]

You can watch it in 0.5x speed

[@boxmanpiyushgaming5339]

@@Thirus tats wat I am doing sister 0.25 x😂😂😂😂

[@boxmanpiyushgaming5339]

But it's working

[@lutzgerken9634]

Thanks for the video, it helped me a lot.

[@Thirus]

You’re welcome 😊

[@ajith007-ytb]

Thank you so much for the video, it was very helpful!

[@Thirus]

You’re welcome Ajith 😊