Install & Explore JIT Compiler for Tailwind CSS in a simple project
Вставка
- Опубліковано 19 вер 2024
- 'JIT' mode is now included in Tailwind CSS directly. Watch • Install Tailwind CSS a... for the latest version installation.
Tailwind Labs announced the release of an experimental JIT compiler for Tailwind CSS. In this video we’ll see what it is all about, how to install it with PostCSS for an existing project, and what are the new features that come with it.
Referred blogpost: blog.tailwindc...
Subscribe and stay tuned for tips, tutorials and more.
Follow me on Twitter: / shrutibalasa
Follow Thirus on Twitter: / thirusofficial
Visit my website: www.shrutibala...
#tailwindcss #tailwindJIT
This has been the clearest explanation so far not only on jit but how to get started with tailwind CSS. and only in a 14 min video! thanks! subscribed!
Awesome! Thank you 😊 Do check out the other videos of Tailwind CSS in the playlist
This is one of the best dev channels I've found this month. My goto place for tailwindcss related content.
Awesome to know that! Thank you 😊
Thank you so much, I was struggling with the large rebuild times, this has helped me reduced the time to few ms. Thanks again
You’re welcome. Now JIT mode is default.
Great stuff Shruti!
Thank you Simon 😊
Great video and great explanation. Dam with jit it has become so fast...
I know right?
@@Thirus For sure...
omgg, big thanks for making this vid 🙌
Big welcome 😊
enjoy this tutorial, very clear since it explain the core advantage of JIT with super really simple example but easy to scale, thank you very much
I’m really glad it helped :)
Thank you so much. First video with jit setup. Waiting for Jit config with react. It will help lot.
Will try that!
Very well explained, keep sharing.
Thank you 😊
Great!
If you run into npm run build error after installing @tailwindcss/jit note below:
Tailwind has updated 'jit', no need to have '@tailwindcss/jit' in your postcss file. Just include mode: 'jit' in your tailwind.config.js.
That should fix it, cheers
ty for tutorial. you can install the vscode extension "PostCSS Language Support" to remove the underlines for @tailwind in tailwind.css
Thanks for that
thanks, JIT is cool and i like it
Me too!
Can we use this JIT compiler in any large or small scale projects? Btw thanks for the tutorial
Yes, definitely. The Jit mode is now directly available in Tailwind latest version. Do check the docs and use it that way
@@Thirus okay thank you so much!
Thanks for this video! it helped me a lot! a question ... how can I minify the styles.css file with a command in my package.json file?
I have the same question.
You should be able to do it using ‘cssnano’ package.
Check this for detailed explanation - github.com/tailwindlabs/tailwindcss/discussions/2819#discussioncomment-134820
I exactly did what you're doing but after I run the 'build' script i see lots of classes in css file which I didn't use... I don't know how to remove them.... Plzz reply
Try running it again. They should be gone
素晴らしい
I cant get the border working can you check the issue thanks. It works with CDN maybe a bug
Can you share a screenshot? (On Twitter may be)
@@Thirus ok on twitter hopefully
Can you make a video how to use tailwind css with sass then we don't have to put same class over & over again?
Why sass? You can use the “apply” directive to extract classes
@@Thirus because we can make our own reusable components for future use....
Most of people have their projects built on top of Webpack. How to integrate this great Jit/Tailwind instrument into it? Is Jit compiler compatible with Webpack at all?
Yes, it is compatible. It mostly works the same way. Need to replace “tailwindcss” with “@tailwindcss/jit” and it should work I’m guessing
@@Thirus Thirus, you are wonderful. Thank you!
Thanks for the video. But there is a issue that I'm facing. Say, I have added a p-2 class. The related styles then gets added to the file. but if I change my mind and remove that class, the watch script watches it but doesn't instantly removes it from that file. I have to rerun "npm run build". I hope you understand what I am trying to say
Yes it will be there until you build again, just in case you decide to add it back.
@@Thirus Thanks for the reply
Have you tried this with React? Is it different to install?
Haven’t tried, but it’s similar set of steps. Adam Wathan shows JIT with React in his demo video - ua-cam.com/video/3O_3X7InOw8/v-deo.html
@@Thirus He uses next in the video unless I missed something. I tried create-react-app but couldn't get it to work. It needs postcss 8 I think and we have to use 7. Got a little confusing. Might be a good video to use it? Anyway thanks and nice video
Oh is it? I’m not a React developer, but I’ll try and get back
The build script is not not working
What’s the error?
@@Thirus cannot read property 'theme' of undefined
try to keep tailwindcss instead of '@tailwindcss/jit' in postcss.config.js
@@kokuga9117 then how i can use jit feature?