What's new in Tailwind CSS v3.1?

[@dawidwraga]

30:08 is a perfect example of why we need the ability to apply multiple classes to a single selector. If you have to copy paste that line multiple times then your html will quickly become hard to maintain. Current syntax: sm:p-4 sm:m-4 sm:top-5 Suggested improvement: sm:(p-4 m-4 top-5)

[@IsThisBenton]

Came here to say this. Is there plugin for it?

[@jjdevcode9635]

@@IsThisBenton Only Windi css

[@PlayWithNiz]

@@IsThisBenton This isn't a perfect solution - But I like to use clsx to split out my breakpoint classes so they're easier to manage. On my phone so this won't be perfect, but something like className={clsx('sm:a sm:b', 'md:a2', 'lg:b2')} (prettier will make this look nicer) and similar when using apply directly in a stylesheet, 1 apply per breakpoint

[@mrjohn1172]

you can't put spaces in your classes so it would be like *sm:(p-4_m-4_top-5)* but I would prefer *sm:(p-4,m-4,top-5)* 😜

[@jjdevcode9635]

@@mrjohn1172 windicss.org/features/variant-groups.html, I prefer like wind css

[@hamzaabde1595]

Adam did a great job, but who else misses simon swiss

[@rodolfhoazevedo5420]

Does he left the team?

[@JosePerez-qt8cf]

@Xagal which is his channel?

[@PhongLe89]

I love Simon😁

[@being_aslam_tiger]

Me

[@MrCC-hx8xr]

Not bad from Adam but Simon is the best!

[@tylerscramble]

I can't think of any project that explains their features and updates better than Tailwind. Arbitrary variants are crazy and the examples are immediately relevant to issues we commonly encounter. Thank you to the whole team!

[@TailwindLabs]

Thank you! 🙌

[@minnow1337]

@@internet4543 Why don’t you just check github

[@universecode1101]

Hey Adam 😊 Thanks for your amazing job, Tailwind Css is a game changer. As a Js -React developer, it is very difficult to think of a project without Tailwind, so thanks to the whole team 😜✌🏻

[@laodemuhammadalfatih7663]

tailwind is the pioneer. but there's an underdog called unocss with crazy performance and amazing concept.

[@jenstornell]

@@laodemuhammadalfatih7663 As far as I know Unocss will only work with frameworks like React or Vue, not plain Html? Correct?

[@markg5986]

+1

[@yoJuicy]

Bro i see you everywhere in the JS/React youtube community. Always positive comments too. Keep it up!👍

[@markg5986]

@@yoJuicy, YOU are making things positive too!

[@BarisPalabiyik]

Inline selectors is a huge feature actually. Each time you guys surprise us with things we would never think we needed. Keep up.

[@MuriJaf]

I've been using tailwindcss since 2021, and i love it, i've built projects with it, it's amazingggg. Thank you

[@lukas.webdev]

I just posted a video about Tailwind CSS in 2023 - maybe this is also interesting for you. 😉

[@kanuos]

Arbitrary variants look excellent! Gotta check if we can finally style ::-webkit-slider-thumb within the component using that.

[@shadkamel362]

Great job, the arbitrary variant is so amazaning, it was something that i wish i could use it ❤️

[@GrizhlieCodes]

Thanks so much Adam. Arbitrary Variants solve pretty much every and any issue I had left with Tailwind. Man o man.

[@FullStackFool]

I love the quirkiness of this, Adam - great release vid. Loving these changes too!

[@PauloMenezes28]

Nice features, a good way to easier this custom variants is creating a name in the tailwind.config.js, like "has-backdrop": "@supports(backdrop-filter:blur(0px))" and in the html we say: "hover:bg-white [has-backdrop]: bg-white/25"

[@Pepsiaddicto]

I believe that has already been possible using the "screen" config.

[@synth32]

or you could just add a custom Variant in the tailwind.config file

[@cr0w312]

Thanks to you, I haven't written a single line of CSS for 3 years

[@ardianfazricom]

I am using tailwind from several months ago and I love it. With these features, it will help me a lot. Thank you.

[@mryechkin]

Best intro ever 😂 Great job guys! Definitely looking forward to utilizing some of these new changes, especially arbitrary variants

[@denilsoncosta9837]

Great job, I'm just waiting for group selectors some thing like hover:{bg-white, text-dark} and {hover, active}:bg-pink. Would be great.

[@afifu]

No, it will make your CSS size bigger. Imagine you have 4 element with this class: hover:bg-pink active:bg-pink {hover, active}:bg-pink {active, hover}:bg-pink 👆 Will generate 4 class in your CSS. The current feature is just right, you should use it individually: hover:bg-pink active:bg-pink hover:bg-pink active:bg-pink 👆 Only 2 class will be generated

[@antoruby]

@@afifu that’s right, but the compiler should optimize the class generation to avoid this problem. It doesn’t have to be a burden for the developer.

[@tamrat_assefa]

The enabled variant is gonna be so useful. All my button components have this weird conditional CSS that adds hover states only if its not disabled. I think the new approach is much cleaner. Nice video and nice update. Thanks Adam and the Tailwind Labs team.

[@AllahomAnsorGaza]

Great work boss i really love tailwind and it make my life eaiser

[@aghileslounis]

You are crazy good ! arbitrary variants are just amazing ! thank you for that

[@visheshgupta4990]

Great Video Interesting and useful and listening all this from the founder of tailwind css loved it 🔥🔥

[@lukas.webdev]

I just posted a video about Tailwind CSS in 2023 - maybe this is also interesting for you. 😉

[@zenvibes_hub]

Hey adam 😁😁😁 great job, the arbitrary variant is so amazaning

[@clearcss3382]

Amazing updates. Tailwind CSS is definitely changing the game for us mere mortals.

[@dancewithakshara09]

Great keep up the work.arbitary selectors are the biggest game changer

[@pavelino17]

those videos are so great, always mindblown afterwards, keep doing those. and ofc tailwind is great as well ;)

[@chrismingay6005]

Finally! If there's anything Tailwind has been missing it's aggressive undertones in the feature videos.

[@juanmacias5922]

Such a useful video, thanks for all your work on Tailwind 3.1!

[@jdlien81]

Great features, well done video too. Production quality is 👌🏻

[@crampssss]

I miss Simon 😭

[@jackmcdade]

So much goodness! I never knew how much i wanted TypeScript Types until now.

[@codephilip]

15 hours ago? You were definitely the FIRST 😄

[@jackmcdade]

@@codephilip I'm an overachiever

[@phaze7272]

excited for arbitrary variants!

[@kimbapslayer1995]

The arbitraty supports class is amazeballs

[@oldo-nicho]

Great job Adam! Really enjoyed that video

[@zohrasabahat]

Thank you so much your instructions were so easy to follow !! This helper a lot ❤️

[@cotneit]

Arbitrary variants are HUGE! I just got into Tailwind a few weeks ago and the lack of something similar really bothered me!

[@cintron3d]

Amazing improvements!

[@chrisnewman6670]

Can’t wait to try out arbitrary variants. Might turn out to be the best way to override certain 3rd party Angular lib component styles.

[@81NARY]

One good use case for arbitrary variants is next/image related styles!

[@MattChinander]

You guys are killing it.

[@JeremyJaydan]

Abritrary variants look like a great way to handle styles for custom attributes with custom elements!

[@gabrielegiannotti2876]

I was looking for arbitrary variants since forever!

[@ayoubMazouz]

So Excited!

[@rudikurniawan99]

The arbitrary, so cool

[@LinusForsell]

Thank you for the update! 🥳 Arbitrary variants are definitely super useful - but things quickly become overly verbose and hard to read when you need to write complex ones over and over. How about chaining utility classes on variants? Something along the lines of [variant-1]:[variant-2]:m-2+p-4+bg-slate-900+text-white This would be useful already when, say, writing a hover variant. E.g. hover:bg-white/50+text-slate-900 Not super clean, but a lot less repetition... No? 🤔

[@willvincentparrone3339]

I just learned tailwind last week and now there's another version. Whawt a chad

[@davidwebca]

Arbitrary variants are so good for scoping styles! Ex.: A component needs to be styled differently when it's inside sections of the site, etc.

[@iknownotwhoiam]

Arbitrary variants are gonna be so amazing with Radix UI 😻

[@wfl-junior]

26:00 YES , Thank you. Finally!

[@abdelhameedhamdy]

Great release Adam, where is Simon ! 🙂

[@CodeAProgram]

Every project I am using tailwind css

[@juanbaro3924]

you are amazing ! thanks for that great work

[@buddhavskungfu]

At this rate, TailwindCSS is going to eliminate the need for creating the Directive file(s). The only files you need to edit is the `tailwind.config.js` file and your project's component's HTML. Of course, you can add custom styles into the config file with the plugin, but it would be nice to add a string to add TailwindCSS classes and pseudo classes like @apply in the directive folder. I'm not sure if it's possible. Example addComponents({ '.card': { tw--apply: " bg-red-100 hover:bg-blue-900". // 👈 borderRadius: '.25rem', boxShadow: '0 2px 4px rgba(0,0,0,0.2)', '&:hover': { boxShadow: '0 10px 15px rgba(0,0,0,0.2)', }, '@media (min-width: 500px)': { tw-apply: "bg-green-500", // 👈 borderRadius: '.5rem', } } })

[@benoitleger-derville6986]

What a job once again! 🤩

[@katywings]

Giving you a big like for that anarchist spirit at the end 😂

[@federicoottavio]

Ooooooh i won't struggle anymore with hover on disabled button, thanks!!!

[@Mecabricks]

Arbitrary variants is for me the best addition to this update.

[@nikkoabucejo3886]

Omg I've been waiting for thiiiis!!! Lols 😂 it's been a whileee

[@mahdirezazadeh5076]

Thanks for your video. 🌷 Just one point I should mention is The font size is too small

[@eyalgantz]

Packed with so many goodies!

[@michaelscofield1970]

Adam, you saved my life by making tailwind. Plain CSS is garbo

[@BrettPeary]

Amazing stuff!

[@soviut303]

I see you using Vite to run the test pages. Excellent choice!

[@dian_the_second]

as a noob, I like the typescript types in the config.js

[@RyanMorey1]

The intro was so chaotic lmao

[@rajahutan12134]

cool, i'm waiting for style the scrollbar in tailwind

[@jenstornell]

A child selector! 🌟🌟🌟 A brilliant way to solve it with arbitrary variants. The rest of the features are fine I guess but not as revolutionary to my workflow as child selector.

[@themarksmith]

Love your work!

[@vasiovasio]

Everything is great, but IF Somehow ( no matter how! ) you can do it, bring Simon back to the channel!

[@simonswiss]

Appreciate the support 🙏

[@vasiovasio]

@@simonswiss I'm glad that you continue to post so much useful content related to Tailwind CSS on your channel! Thank you!

[@simonswiss]

@@vasiovasio My pleasure!

[@ajpl87]

30:50 "because we're psychotic" lmfao XD

[@joetrubenstein]

Big respect, Adam✊

[@oelschlegel]

What happened to Simon? JK Adam, good to hear from you. Just a quick tip on recording audio, see if you can find a de-esser plugin to help reduce sibilance ("s"-sounds) as they can get particularly harsh sounding. New update looks great! :)

[@cowslaw]

Glad to see you filled in the empty space on the left, Adam

[@nikstu2792]

Arbitrary variants🤯👍

[@benkrakarwalid6039]

Great job 🥰

[@ericchristian9026]

Cool new feature!!

[@saidjonrko]

I am not a front-end developer , but i know css. But i don't like dealing with css files. And i Love tailwindcss Because it lets me control layout right in the html file. i don't have go to css file.

[@imsarvesh_]

I just loved it.

[@JimmyMoCapaldi]

Thank you bro !!!

[@madebylewis]

maybe some `firefox:` and `safari:` variants are needed, to overcome some niche jank you can sometimes come across (not relating to supported properties)

[@michaelandreuzza]

There's one for blur. Like headless UI is using on the nav. Is a js snippet dropped on the config that detects Firefox and you can use firefox:opacity-100

[@peroforrr7663]

1year and no one new video :o

[@lukas.webdev]

I don't think that there will be a next video ... But I just posted a video about Tailwind CSS in 2023 - maybe this is also interesting for you. 😉

[@peroforrr7663]

@@lukas.webdev yes I whated it now, good but the next I request a advenced design techniques video using tailwind css

[@anassfiqhi3517]

Amazing, I Luv it!

[@AviNerenberg]

What IDE/editor + extension(s) combo are you using to achieve the real time in-editor JSX previews here?

[@lucianooliveira2445]

Tailwind css it's amazing! I love it ❤

[@tomlomn5221]

nice.

[@lukas.webdev]

I just posted a video about Tailwind CSS in 2023 - maybe this is also interesting for you. 😉

[@khauvannam]

The last feature like scss and I very like it

[@Pepsiaddicto]

Awesome, but I think the most obvious/common usage of arbitrary variants is when you want to add a lot of different styles to nested components by modifying a data property or class of the root element using javascript. Is it possible to use attribute selectors with these since you'd need brackets? I.E [&[data-is-active]]:bg-red-600? Also being able to apply these to the “group” property would be awesome. I.E “group[.active]:bg-red-600”

[@paulkocher2793]

Amazing! ♥️

[@anaycoding6594]

It's 2022 man how do you not know that

[@seamini9172]

I fuckin' love tailwind! That is all.

[@nxshipon6470]

Thanks you sir

[@nicolaskeith8945]

Adaaaaaaam!!

[@kuldeepjaswal4655]

awesome!

[@sijmon20031]

Awesome !

[@tahadlrb7267]

Add making group of styles feature in different situations: for ex ---> hover:(bg-red-500 text-white font-bold) , i am really wait for it....

[@eduardoserrano2015]

Hey! What VS code theme is that? With the pink selection color? Plssss. Love Tailwindcss btw!

[@ZAK43210]

It's called Skye

[@returnZeroo]

I really miss Simon on this channel.

[@simonswiss]

I miss it too - It was a lot of fun making videos for my favourite CSS framework and getting paid for it ✨

[@myestery]

just when I said tailwind was perfect

[@GabrielMartinez-ez9ue]

Thank you!!

[@delisandor5337]

I like this guy:)

[@linhtutkyaw3675]

Cool 🔥🔥🔥🔥🔥

[@ZyncInteractive]

Nice work on 3.1. But what happened to the other guy who used to make these videos?

[@hamitaksln]

23:31 Was it really 'badass"? :D