Install Tailwind CSS as a PostCSS Plugin with JIT mode enabled (Latest Version v2.2)
Вставка
- Опубліковано 19 вер 2024
- 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...
Thank you ma'am much needed video.
You’re welcome!
I'm so lucky to watch this video!
Happy to know that :)
Thanks Thirus, you are the best!
Aww thanks!!
Found you on twitter. Tailwinds great. I used it in my jamstack site.
newly subbed,
Awesome! I totally love it (I know it’s evident 😀)
Another great resource 🔥 🔥 🔥. Thanks a lot
Thank you! This really helped!
You’re welcome :)
You are awesome
Thank you ☺️
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 🙏 😔
Are you using Windows? Please check the readme file on the GitHub repository to make necessary changes for Windows
@@Thirus thank you for your reply, found another way tho but I haven't applied jit to it yet
@Wildan Alif R thank you
What is the difference between NODE_ENV=development and TAILWIND_MODE=watch ? The second option does not work for me in windows
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
@@Thirus Thank you so much!
Thank You Very Much
You’re welcome :)
Can you make a video on importing local fonts in tailwind?
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
Do you see any error? Can you send some screenshots on Twitter - twitter.com/shrutibalasa
@@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.
You should update your repo to windows users ? what is the benefits here of using postcss ? it's for prefix or what ??
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.
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.
Yea that’s the one. Usually works for me
"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.
@@hasibulhasansiju thanks, I'll give that a try
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?
Run the production script once. It will even minify your CSS. After that, yes. Just copy the public folder
@@Thirus Thank you very much for your response...
Does it work the same way in Tailwind 2.2? When I build I get "npm ERR! code ELIFECYCLE"
Did you try cloning my repo? Do you get the same error?
@@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 ?
Yes, tailwind.css
Glad it worked
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
Did you try this - ua-cam.com/video/wjuwXySsvBw/v-deo.html ?
thanks
Welcome!
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?
SOLVED with cross-env module!
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 ?
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.
this jit configuration is use for react js or not
It’s different for React
What I do to achieve that
Have you been able to install tailwind in react without jit mode?
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?
Wait, are you trying to install Tailwind CSS in your Laravel project?
@@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.
So you finally got it working right? That’s great
@@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
👍👍...
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
Did you try cloning the github repository? Did that work? If that works, then compare yours with that
@@Thirus Thanks mam that github repository code it's working
So, we don't need to purge css ?
Not anymore
Am getting this error please help
'TAILWIND_MODE' is not recognized as an internal or external command
Remove that part and try again
if you are on windows use ... "dev": "set TAILWIND_MODE=watch&postcss tailwind.css -o ./public/styles.css -w --verbose"
Thanks Juan. @Sandesh - Does this work for you?
@@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.
@@Thirus Its working now...thank you
will this work for Intellij IDEA?
This is an old video. Please check the latest one.
Fantastic video! Thank you so much!
You’re welcome 😊