Just-In-Time: The Next Generation of Tailwind CSS

One of the hardest constraints we've had to deal with as we've improved Tailwind CSS over the years is the generated file size in development. With enough customizations to your config file, the generated CSS can reach 10mb or more, and there's only so much CSS that build tools and even the browser itself will comfortably tolerate.
Today I'm super excited to share a new project we've been working on that makes this constraint a thing of the past: a just-in-time compiler for Tailwind CSS.
Blog: blog.tailwindc...
GitHub: github.com/tai...

[@jarridcrews9024]

"I'm not the cops." That's just WHAT COPS WOULD SAY.

[@iamsaura]

Exposed

[@natetronn]

I'm never building a design system using all brackets. You know, just to be on the safe side.

[@webinatic216]

but he might be the sheriff

[@dossy.]

11:20 Adam's the undercover design system cops, noted.

[@iftakharhussain]

Can you guys help me setting the dev environment? I am new to js and want to lean tailwind. I can't figure out how to set dev environment like Adam Wathan. Someone Please help me.

[@harvanchik]

Just when we thought TailwindCSS could not get any better. This is amazing!

[@niteshkumarsukumaran]

Yeah right!😁

[@FlorinPop17]

This is awesome! 👏

[@somerandomchannel382]

@Md Irshad Is there an example app using tailwind jit? Preferely also with CRA ? I would make an edit video of this there is alot missing. How to run from a new App How to add postcss:build Why not add the github repo in comment of what you showing Adam?

[@juliantaylor8371]

i guess Im asking the wrong place but does anybody know of a method to log back into an instagram account?? I stupidly forgot the account password. I love any tricks you can give me!

[@alexliam9786]

@Julian Taylor instablaster ;)

[@juliantaylor8371]

@Alex Liam i really appreciate your reply. I found the site thru google and I'm trying it out now. I see it takes quite some time so I will get back to you later when my account password hopefully is recovered.

[@juliantaylor8371]

@Alex Liam It did the trick and I now got access to my account again. I'm so happy! Thanks so much, you really help me out !

[@abigah]

"This is annoying" - Adam and team before rewriting the internet to be faster.

[@fabiothebest89lu]

@@green-coder-clj thanks for your work..I appreciate that.

[@cowslaw]

This blew my mind, and then you got to the on-demand classes. This is fantastic Adam, great work!

[@CodingNuggets]

I love Tailwind. This just put a huge 😁 on my face. Adam, you are awesome! I'm so excited to see what's coming next in Tailwind.

[@codybontecou]

You guys clearly understand the headache within your framework. This looks like a massive step in the right direction.

[@mohammadoulabi4212]

This is legit the most shockingly amazing thing i have seen for css so fa

[@mohammadoulabi4212]

@@green-coder-clj is that so for real? What idea exactly and what is the reference that its stolen

[@milanosheineken6599]

@@green-coder-clj Do you have a patent? If not, get over it.

[@johnp6759]

@@milanosheineken6599 Why would he need a patent?... Would you honestly not support someone if they could prove they created something that was stolen/used without credit? (not saying this is the case here as I haven't yet looked into it). Just that saying "get over it" makes you look like a one-sided fangirl.

[@aurelianspodarec2629]

@@johnp6759 So he can earn money for his ideas.

[@milanosheineken6599]

@@johnp6759 Actually, no. I'm not on anyone's side, I'm just telling the truth.

[@rukasu-se]

absolutely : awesome : like : just - [ wow ] I was always hesitant to use tailwind on specific designs, but this changes everything !

[@PierreLebrunAnthony]

Parameterized utility classes 🤯 You've solved every single rough edge of tailwind in a single stroke of genius. Bravo 👏 Just... Bravo 👏

[@genehenson8851]

This is totally sick! I love it when developers understand the pain points of their tools and take steps to address them. What you've done here is far beyond expectation!

[@alexandros-markovits]

Love how tailwind evolves and how fast it does it! It should be the new standard already!

[@lechretiendev]

Awesome. Best ever CSS Framework ✨🤩

[@dyunior]

Awesome integration, "almost" inspired by WindiCSS.. btw I cant wait to use it.

[@tamrat_assefa]

This is sensational. I am really excited for this. I guess the only downside to this is no more playing around with adding classes in the dev tools because the classes won't be there. But that's something I can live without.

[@Shaffefr]

I guess that most of the time the classes you'll play with will be available because used elsewhere. But I saw on Twitter that they are aware of this and I'm sure they'll find something 😊

[@A.D.G]

They’ll end up with some sort of TailwindCSS Dev Tools feature where you can add classes via the dev tools and there will be a Web Worker that does the JIT compilation in real time for you. Give it a bit and they will sort out these problems.

[@azzazkhansiddiqui]

Best tooling for TailwindCSS! I'm simply in love with it! 😍 Hope they announce a stable version soon.

[@JhonnyMichel]

GET OUT OF HERE! This is UNBELIEVABLE! I’m out of words, can’t even process how amazing this is

[@FalkoJoseph]

Generating on-demand styles with those brackets is quite next-gen. Really impressive!

[@ExpDev69]

So freaking hyped for this! Amazing work.

[@Ese_osa]

Absolutely amazing. Jit compiler idea for tailwind css is actually the work of genius mind

[@clearcss3382]

Changing the game again. Whole `nother level. What we think is impossible, this man, team blows us away. Fantastic work!

[@Vlmarq]

I am in love with the on-demand classes. Definitely a win for Tailwind!

[@kelvinsmith4894]

Wow... This framework made me fall in love with web dev. This hi how framework creators should be thinking

[@maskman4821]

This is freaking awesome, tailwindcss is the most advanced css framework technology you can ever imagine, Adam Watham is really something, now I just need to take some good design courses and I recently found out figma channel will be releasing a series of design principle courses and hopefully I can learn something out of it and create appealing and stunning pages on my own !!!

[@abelmurua6980]

TailwindCSS getting better and better. Amazing, Thanks for this awesome tool. Keep it up team

[@leetrout337]

This is really slick! I was just learning Tailwind and was confused what was going on. Thanks for this video

[@sagnickbhowmick6191]

Tailwind: *introduces jit* Bootstrap: Hey bro, stop!! Are you trying to kick us out of this field?!

[@raiyansarker3809]

This is just what was lacking in tailwind. Loved it!

[@Prajna11]

Adam & Team, Thank you so very much for your hard work on this project. Please keep producing premium tools. Worth every penny. Much appreciated.

[@squishydough2866]

The impact of JIT cannot be understated. This is so cool.

[@palyanytsia]

Tailwindcss is one of the coolest technology that I've opened for myself in 2020

[@serhiicho]

Thank you Adam and others for working on Tailwind, we really need it

[@ryanbeatbox]

Already plugged it into a project I'm working on, it's such a huge difference in output. Nicely nicely done.

[@Givmiakis]

JIT for CSS classes...?! We can treat previously static class names as function references with custom parameters...?! What a classy solution for CSS classes! WOW! just WOW!

[@scotttang6229]

Awesome. I’m loving my experience with Tailwind + headless UI.

[@horaciocoronel]

Wow! Just wow! I'm blown away for all these new features! I want to try it ASAP! Congrats Adam and the Tailwind team!

[@zbecknell]

This is unreasonably cool. I'm one of them "all variant" type people with a huge dev file... this is going to make things so much better. Astounding. I'm proud to support y'all with a Tailwind UI purchase as you GET IT! This wasn't even on the radar and I'm like "let's see what they have for 2.1!" and it's this awesomeness! Great job!!

[@sashankthupukari3933]

Amazing work! So excited to try this out

[@stasdeep]

This is mental! Exactly what I need, thank you so much for your amazing framework.

[@Quabbe2]

Exciting! Not having to fiddle with the config file any longer is so huge. Thanks Adam and team!

[@noriods]

Mind blown! Easily my biggest (and only) pain working with Tailwind. Solved! Thanks Adam for all that you and the team do!

[@SusanthCom]

Innovative development. ❤️❤️❤️ keep rocking 🔥🔥🔥

[@gustavovasquezveliz7046]

amazing. When I was learning tailwind, dealing with a config.js file was something that made me doubt about moving to this new framework. With jit compiler, things get more easy. Thanks.

[@rolandowebdev]

JIT is so overpowering, that's like writing CSS very easy🔥🔥

[@RangelNetto]

LOL. The bundle size was the unique thing I wasn't so happy in Tailwind. And right now, looks like I have nothing else to complain about! U guys are doing a amazing Job, thanks!

[@pyongits]

Finally, my browser will not suffer anymore with this feature. Thanks, Adam.

[@mohammadalishahbazi756]

I have been using Tailwindcss for lots of projects, and I am saying this is a game-changer, seriously. LOVE IT

[@vcizek6047]

Amazing!!!! You blew my mind! I was waiting for this kind of feature. Superb work!!!

[@claystation6360]

Haven't slept in 2 days. The developer experience(dev and prod) is phenomenal with JIT! Works like a charm. No more waiting 🙌

[@karllson]

We are truly watching the SpaceX of CSS frameworks... awesome job!

[@Nintron]

This is amazing, legitimately amazing! Love tailwind but the load times were getting a little annoying albeit still totally worth it. This is amazing for streamlined reloading! love it!

[@danieljames95]

I've tried a LOT of different frontend styling options, and after working with Tailwind for a few months, I've become more and more confident that this is the best possible abstraction for styling websites. It just makes so much sense, and allows developers to move so quickly while ALSO encouraging them to stick to best practices and a consistent design system. That's a deadly combo. I can't imagine going back to any other option. I hope I never have to write another "outer-wrapper-content-container" class name again. I was already in love with Tailwind, but I'm super amped to see this square bracket syntax and this JIT stuff. Keep it up!

[@rfmiotto]

This is simply awesome! Tailwind Labs are always exceeding our expectations. Fantastic work! I can't wait to see this feature fully integrated into the Tailwind 3.x defaults

[@Asjasification]

This is sick!!

[@andymark0by]

Oh, WOW 🤩 Awesome, all my next projects will use JIT.

[@ErmandDurro]

This is so cool! Amazing work 💪👏 Thanks a lot for all the contribution to the community 🙏

[@webdecode5120]

Man tailwind is becoming like a whole galaxy for the frontend world I mean everyday it is coming with something new and unbelievable I was just out of control when saw the just in time thing and really man you are awesome. I saw this video and next minute I added jit in my trial project and it feels great when styles and classes are generating on demand now you don't have to worry about anything all will be handled by TW.🔥🔥

[@decipher824]

This is really cool🔥🔥🔥 Great work Adam, loved it❤️

[@DioArsya]

This is just another level. Another dimensions. Great work!

[@tomasrodriguez4532]

Big stuff there, I really like it!!! Congrats Adams, I am waiting for the next generation of Taildwind CSS.

[@brijeshdave]

This is marvellous 👌🏻👏🏻...u r like Ironman of css world...awesome thanks 🙏🏻

[@SergueiCambour]

Wow, it is really cool, Adam, thanks a lot! Looking forward for new updates!

[@boravivek]

Loving this JIT thing, gonna explore it. The file size will be amazingly handled now. Thanx for the update 😁

[@shafiu283]

This convinced me that Tailwind is the future of CSS

[@loursk]

This is really something that we all needed i guess, i had to close my dev tool all the time because my browser was really struggling with the css. I had to use purge on a dev environnement and compile everytime to get something smooth. Really great improvement! This is also really nice you thought about micro customizations like the use of px. Really nice job!

[@MatthewHinton]

The jit improvements look great.

[@abdulmohsen]

Tailwind singlehandedly making me love working with CSS

[@kendriip]

This isa game changer update. Just when I thought this was the best CSS framework it got better.

[@ashleyredman]

The bracket syntax is actually insane, love it!

[@bilal-khan]

I don't think I am ever going to use any other framework. This is fantastic 👌

[@aghileslounis]

You guys are Genuis, you are really trying hard to make tailwind the best it can be ! im so excited for this i hope it will be active by default really fast ! Fantastic waaaw thank you for everything!

I rewatched this epic video now just for fun.

[@jamielovelace]

Very cool with the on demand custom style stuff, good work team 🙌🙌🙌

[@snakemanluffy7645]

We will forget about the CSS file. Tailwind is making more features so we don't have to go to CSS file. Now it's dynamic! wow! I wish tailwind had vanilla javascript components at least for simple things like dropdown, toast, accordion, simple slider, modal, etc. With JIT there is more room to add more things.

[@niteshkumarsukumaran]

OMG! This is awesome, can't wait to test 😍🔥

[@natterstefan]

Wow, that's incredible and I am super excited to use this. Thanks for creating this and tailwind in general!

[@holygl]

Daaaannnnnnngggg! You guys rock! TW keeps getting better and better. Keep up the stellar work!

[@AllahomAnsorGaza]

man you the best WE LOVE YOU FROM EGYPT Keep the good work boss

[@81gamer81]

This is soooooo goood. Did have to update laravel mix to be compatible with postcss 6. But its well worth it. dev build took 10-30 seconds. Now its almost instant. And auto updates when editng blade file is really great

[@Jr-xs9hy]

wow, this is such a huge improvement. It just opens up more possibilities for Tailwind. Downloading it now.

[@amarubhe2381]

Amazing work by Tailwind Lab

[@BrianDillingham]

What a next level refinement. Kudos Adam + team

[@vasiovasio]

Wow, The Legend Himself! Keep going Adam and be healthy, you and your family!

[@Zoutzuurtjes]

What a relief is Tailwind. Thanks a lot!

[@hanzofuma]

Oh, thank god yesterday I was struggling with Maizzle to create email templates i even decided to make a solution like this, so I can get only the style that I need but here we are. Thank you for this it saved my day and my time

[@AlejandroVivas]

wow this is incredible. Congratz guys, you really love developers, i love this!!

[@ChirutacDumitru]

Adam, great step, this is a music to my ears and cure for my pains

[@torchic]

Amazing thanks for all your hard work Labs team! 💚

[@coltonwilliams1565]

Holy crap. Thank you for these updates. These are the exact things that I didn’t like about Tailwind and now it’s fixed

[@jimmyj.6792]

Awesome work Adam. Really nice community to continue to improve Tailwindcss 😍

[@SexyB3ast]

Literally solved my main complains about Tailwind. 12/10.

[@tririfandani1876]

that is really awesome 🔥 now I don't have to wait like 30 seconds just to change my tailwindcss config file when I'm working on my next.js project the square brackets syntax is also brilliant 💎

[@Muphet]

i love this. i used inline styles for single element so often it actually hurt me. Adam never disappoints

[@CarlFurrow]

This is really cool. I'm looking forward to using this when released.

[@arlansync482]

Awesome, it solving most of my problem when working with CSS

[@ManuGanji]

I'm really excited to try this out. Thank you for doing this. :)

[@karlmichael8968]

For real, sometimes you guys makes me feel motivated and dumb at the same time 😁😔

[@iftakharhussain]

Can you help me setting the dev environment? I am new to js and want to lean tailwind. I can't figure out how to set dev environment like Adam Wathan. Someone Please help me.

[@alialnaghmoush]

I hope to support the direction from right to left “RTL” There are more than a billion people who use this direction “RTL” and need this feature

[@ThomasBurleson]

really nice feature. superb work!

[@petercossey4179]

Hell yeah! Love the constant innovation and execution.