Install Tailwind CSS as a PostCSS Plugin with JIT mode enabled (Latest Version v2.2)

This video demonstrates how to install Tailwind CSS in a brand new project as a PostCSS plugin - with no other frameworks. It's the latest version 2.2 as of recording this video. You will also understand how to enable JIT mode, watch your files during development and optimize & minimize your code for production.
Windows users, please change the "build" script to:
"build": "set TAILWIND_MODE=watch&postcss tailwind.css -o ./public/styles.css -w --verbose"
Thanks to Juan Carlos for pointing out the solution in comments.
Boilerplate on GitHub:
github.com/Thi...
--------
The video is sponsored by Showwcase. Join me there - www.showwcase....
--------
In case you are on Windows and face an error "NODE_ENV is not recognised...", you must install win-node-env. So just run:
npm install win-node-env
Subscribe and stay tuned for tips, tutorials and more.
Follow me on Twitter: / shrutibalasa
Follow Thirus on Twitter: / thirusofficial
Visit my website: www.shrutibala...

[@knowledgely7540]

Thank you ma'am much needed video.

[@Thirus]

You’re welcome!

[@misadesign]

I'm so lucky to watch this video!

[@Thirus]

Happy to know that :)

[@gayathrithedev]

Another great resource 🔥 🔥 🔥. Thanks a lot

[@parkerrex]

Found you on twitter. Tailwinds great. I used it in my jamstack site.

[@parkerrex]

newly subbed,

[@Thirus]

Awesome! I totally love it (I know it’s evident 😀)

[@Josehernandezl]

Thanks Thirus, you are the best!

[@Thirus]

Aww thanks!!

[@kiranwicksteed3972]

You are awesome

[@Thirus]

Thank you ☺️

[@missyh3]

Thank you! This really helped!

[@Thirus]

You’re welcome :)

[@cesarrotela]

What is the difference between NODE_ENV=development and TAILWIND_MODE=watch ? The second option does not work for me in windows

[@Thirus]

When you set the mode to watch, Tailwind automatically builds everytime you save your files. It works on windows if you install cross-env npm package

[@cesarrotela]

@@Thirus Thank you so much!

[@savy5435]

Please help me, I have been trying to get this up and running for days now with no progress, it keeps saying TAILWIND_MODE and postcss isn't an internal command, it's frustrating, someone please help me out, I don't know what to do again 🙏 😔

[@Thirus]

Are you using Windows? Please check the readme file on the GitHub repository to make necessary changes for Windows

[@savy5435]

@@Thirus thank you for your reply, found another way tho but I haven't applied jit to it yet

[@savy5435]

@Wildan Alif R thank you

[@neerajsinghtangariya2587]

In my system your boilerplate is not working means some tailwind class is not working. I did fresh install and install your boilerplate also. can you plz tell what was the reason. And I'm using window os

[@Thirus]

Do you see any error? Can you send some screenshots on Twitter - twitter.com/shrutibalasa

[@neerajsinghtangariya2587]

@@Thirus No error. That is weird I don't know why this is not working. But now for learing tailwindcss I'm using other alternative which is Nextjs. Now tailwind is working properly in Nextjs.

[@wieN4rn0]

I have copied your boilerplate tailwindcss with JIT mode. I want to upload my website to server. What should I do? Can I just copy files inside public folder?

[@Thirus]

Run the production script once. It will even minify your CSS. After that, yes. Just copy the public folder

[@wieN4rn0]

@@Thirus Thank you very much for your response...

[@arpanchaudhuri8486]

Thank You Very Much

[@Thirus]

You’re welcome :)

[@s7s_space]

You should update your repo to windows users ? what is the benefits here of using postcss ? it's for prefix or what ??

[@marcelnunez1658]

Can you make a video on importing local fonts in tailwind?

[@MrCC-hx8xr]

Hi, excelent recipe. Everythink works fine, but TAILWIND_MODE=watch nope. Im on WIN 10. My code: "dev:tw:watch": "TAILWIND_MODE=watch postcss --env dev ./assets/css/app.scss -o ./assets/css/app.dev.css --watch --verbose", And i get error message ''TAILWIND_MODE' is not recognized as an internal or external command, operable program or batch file' Without TAILWIND_MODE everything works fine with JIT mode, but dont watch the "purge file", so i have the npm build run manually = its boring. Any suggestion?

[@MrCC-hx8xr]

SOLVED with cross-env module!

[@C00ltronix]

Does it work the same way in Tailwind 2.2? When I build I get "npm ERR! code ELIFECYCLE"

[@Thirus]

Did you try cloning my repo? Do you get the same error?

[@C00ltronix]

@@Thirus I didn't clone (this time). When I clone the repo I can just start, or do I need to init something? Anyway, now I did this video line by line = fine ;-) - only one tiny tiny issue, on Windows you also need to change: "prod": "set NODE_ENV=production&postcss tailwind.css -o ./public/styles.css" Let's see if I can manage to use this for Hugo.... I have actually one more question - if I have custom css, where I put them? In tailwind.css ?

[@Thirus]

Yes, tailwind.css Glad it worked

[@slackergeek2007]

Which Live Server are you using and is it working? I tried the one by Ritwick Dey, but it appears to be broken and not auto refreshing changes, even though the browser window flashes, like it was re-syncd. Anyway, I had to use Five Server, instead.

[@Thirus]

Yea that’s the one. Usually works for me

[@hasibulhasansiju]

"liveServer.settings.fullReload": true by default live server just injects the css. so you need to enable the full reload to get it working with tailwind. because when tailwind is generating the css file live server replaces it with the one in cache. Five server fully reloads by default.

[@slackergeek2007]

@@hasibulhasansiju thanks, I'll give that a try

[@hi-yi7en]

👍👍...

[@codedjango]

I am trying to use tailwind css in my Vue project....there is already a "serve" script which I use to run the code in development (command: "npm run serve")...now how do I add your "build" script in my "serve" script so that it compiles the tailwind and runs the project BOTH at the same time? OR Do I have to write a separate script? But then it becomes tedious n inconvenient? Any solution to this? The official "tailwind" docs doesn't help but your build script at least got it working....probably because you installed "postcss-cli" instead of "postcss" which is shown in official docs. Please reply - I m stuck on this

[@Thirus]

Did you try this - kzbin.info/www/bejne/rZvYqIuviNipeNk ?

[@yukiryu8530]

Hi. I try install tailwind via npm like in the documentation, after the installation finished why only package.json is missing? I try that in laragon local server and maybe permission problem or something else i don't know. I try again in document/new_folder and when finished in terminal it said finished but nothing added. Why is like that and how to fix it?

[@Thirus]

Wait, are you trying to install Tailwind CSS in your Laravel project?

[@yukiryu8530]

@@Thirus no. Just static website. I want to make portfolio website. Usually i make any website in laragon local server folder (www) so i can found all my website i create in there. Update: Finally i can install and config all colors in tailwindcss v.2. because this is the first time i use tailwindcss and i just learned from tailwind labs youtube channel this 2 days. And what make my stack longer maybe my keyword not right because of that so hard to find similar problem and the answer in internet. Because usually i use BS.

[@Thirus]

So you finally got it working right? That’s great

[@yukiryu8530]

@@Thirus yes. But with minimum documentation or reference about the components it's so hard for me only to make responsive header with dark mode toggle. From what i feel, it's not easy for beginner. So i decide back to BS again. Thank you for replying my question

[@sudipjs]

this jit configuration is use for react js or not

[@Thirus]

It’s different for React

[@sudipjs]

What I do to achieve that

[@Thirus]

Have you been able to install tailwind in react without jit mode?

[@Borma425]

thanks

[@Thirus]

Welcome!

[@masoodahmed7502]

Mam a followed your all steps correctly and in the last step which you run npm run build at the time it's showing Input error: You must pass a valid list of files to parse

[@Thirus]

Did you try cloning the github repository? Did that work? If that works, then compare yours with that

[@masoodahmed7502]

@@Thirus Thanks mam that github repository code it's working

[@jbraddockm]

Thank you for this. I was wondering if you have a tutorial that additionally shows how to integrate and compile scss files as well as to use Tailwind JIT with WordPress? I couldn’t find an up to date tutorial that address these two questions. Thx.

[@stephenlau2845]

Hi, Thanks ur Tutorial, What are the different between the method to install Tailwind Css, npm cdn Link and Jit ? Because I found some of function it can not run in npm property before it add the cdn Link...and, Can I use they 3 methods all in a project ?

[@Thirus]

CDN is limited. You can’t customise tailwind to your needs. Installing without ‘jit’ mode is totally fine - gives you all features but during development, the css file is very huge which might give some problems in browser With ‘jit’ mode, your development css file is also very small to work with. And you also get to use some custom values without first configuring them.

[@sandeshjoshi3981]

Am getting this error please help 'TAILWIND_MODE' is not recognized as an internal or external command

[@Thirus]

Remove that part and try again

[@jcarlos57]

if you are on windows use ... "dev": "set TAILWIND_MODE=watch&postcss tailwind.css -o ./public/styles.css -w --verbose"

[@Thirus]

Thanks Juan. @Sandesh - Does this work for you?

[@jcarlos57]

@@Thirus in windows we use the command "set" to create a "environment variable" with a "value" and the character "&" to separate two commands in a single line. I have tried "dev": "set TAILWIND_MODE=watch&postcss tailwind.css -o ./public/styles.css -w --verbose" .. and .. "prod": "set NODE_ENV=production&postcss tailwind.css -o ./public/styles.css --verbose" both works fine.

[@sandeshjoshi3981]

@@Thirus Its working now...thank you

[@jantu_dev]

So, we don't need to purge css ?

[@Thirus]

Not anymore

[@ragjnmusic8765]

will this work for Intellij IDEA?

[@Thirus]

This is an old video. Please check the latest one.

[@stefanocons]

Fantastic video! Thank you so much!

[@Thirus]

You’re welcome 😊