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 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
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!
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 😜✌🏻
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"
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.
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
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? 🤔
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', } } })
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.
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.
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! :)
maybe some `firefox:` and `safari:` variants are needed, to overcome some niche jank you can sometimes come across (not relating to supported properties)
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
I saw you using the ampersand &>* selector, at 26:00 which I thought was just a Sass selector. Is that a Tailwind specific feature? Something you added in PostCSS or did I miss something?
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”
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)
Came here to say this. Is there plugin for it?
@@IsThisBenton Only Windi css
@@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
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)* 😜
@@mrjohn1172 windicss.org/features/variant-groups.html, I prefer like wind css
Adam did a great job, but who else misses simon swiss
Does he left the team?
@Xagal which is his channel?
I love Simon😁
Me
Not bad from Adam but Simon is the best!
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!
Thank you! 🙌
@@internet4543 Why don’t you just check github
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 😜✌🏻
tailwind is the pioneer. but there's an underdog called unocss with crazy performance and amazing concept.
@@laodemuhammadalfatih7663 As far as I know Unocss will only work with frameworks like React or Vue, not plain Html? Correct?
+1
Bro i see you everywhere in the JS/React youtube community. Always positive comments too. Keep it up!👍
@@yoJuicy, YOU are making things positive too!
Inline selectors is a huge feature actually. Each time you guys surprise us with things we would never think we needed. Keep up.
I've been using tailwindcss since 2021, and i love it, i've built projects with it, it's amazingggg.
Thank you
I just posted a video about Tailwind CSS in 2023 - maybe this is also interesting for you. 😉
Arbitrary variants look excellent!
Gotta check if we can finally style ::-webkit-slider-thumb within the component using that.
Great job, the arbitrary variant is so amazaning, it was something that i wish i could use it ❤️
Thanks to you, I haven't written a single line of CSS for 3 years
I love the quirkiness of this, Adam - great release vid. Loving these changes too!
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"
I believe that has already been possible using the "screen" config.
or you could just add a custom Variant in the tailwind.config file
Thanks so much Adam. Arbitrary Variants solve pretty much every and any issue I had left with Tailwind. Man o man.
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.
Best intro ever 😂 Great job guys! Definitely looking forward to utilizing some of these new changes, especially arbitrary variants
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.
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
@@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.
I am using tailwind from several months ago and I love it. With these features, it will help me a lot. Thank you.
Great work boss
i really love tailwind and it make my life eaiser
Finally! If there's anything Tailwind has been missing it's aggressive undertones in the feature videos.
Amazing updates. Tailwind CSS is definitely changing the game for us mere mortals.
You are crazy good ! arbitrary variants are just amazing ! thank you for that
The arbitraty supports class is amazeballs
Hey adam 😁😁😁 great job, the arbitrary variant is so amazaning
Arbitrary variants are HUGE! I just got into Tailwind a few weeks ago and the lack of something similar really bothered me!
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.
Great keep up the work.arbitary selectors are the biggest game changer
Amazing improvements!
I was looking for arbitrary variants since forever!
One good use case for arbitrary variants is next/image related styles!
Abritrary variants look like a great way to handle styles for custom attributes with custom elements!
excited for arbitrary variants!
So Excited!
So much goodness! I never knew how much i wanted TypeScript Types until now.
15 hours ago? You were definitely the FIRST 😄
@@codephilip I'm an overachiever
I miss Simon 😭
Great Video Interesting and useful and listening all this from the founder of tailwind css loved it 🔥🔥
I just posted a video about Tailwind CSS in 2023 - maybe this is also interesting for you. 😉
those videos are so great, always mindblown afterwards, keep doing those. and ofc tailwind is great as well ;)
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? 🤔
you are amazing ! thanks for that great work
You guys are killing it.
Such a useful video, thanks for all your work on Tailwind 3.1!
Great job Adam! Really enjoyed that video
Ooooooh i won't struggle anymore with hover on disabled button, thanks!!!
Arbitrary variants are gonna be so amazing with Radix UI 😻
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.
Amazing stuff!
Great features, well done video too. Production quality is 👌🏻
Thank you so much your instructions were so easy to follow !! This helper a lot ❤️
Thank you bro !!!
I just learned tailwind last week and now there's another version. Whawt a chad
Arbitrary variants is for me the best addition to this update.
The arbitrary, so cool
cool, i'm waiting for style the scrollbar in tailwind
Every project I am using tailwind css
Great job 🥰
Thanks for your video. 🌷
Just one point I should mention is
The font size is too small
I just loved it.
26:00 YES , Thank you. Finally!
What a job once again! 🤩
Great release Adam, where is Simon ! 🙂
as a noob, I like the typescript types in the config.js
Love your work!
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',
}
}
})
Thanks you sir
What IDE/editor + extension(s) combo are you using to achieve the real time in-editor JSX previews here?
Amazing, I Luv it!
I see you using Vite to run the test pages. Excellent choice!
Big respect, Adam✊
Packed with so many goodies!
Amazing! ♥️
awesome!
Adam, you saved my life by making tailwind. Plain CSS is garbo
Cool new feature!!
Hey! What VS code theme is that? With the pink selection color? Plssss. Love Tailwindcss btw!
It's called Skye
Awesome !
Giving you a big like for that anarchist spirit at the end 😂
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.
Omg I've been waiting for thiiiis!!! Lols 😂 it's been a whileee
Is it possible to create arbitrary break points somthing link this "[1800px]:text-sm" instead of creating custom break points in taliwind config?
If I understand correctly, wouldn't that just be [@media(min-width:1800px)]:text-sm?
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.
Thank you!!
Arbitrary variants🤯👍
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! :)
nice.
I just posted a video about Tailwind CSS in 2023 - maybe this is also interesting for you. 😉
Everything is great, but IF Somehow ( no matter how! ) you can do it, bring Simon back to the channel!
Appreciate the support 🙏
@@simonswiss I'm glad that you continue to post so much useful content related to Tailwind CSS on your channel! Thank you!
@@vasiovasio My pleasure!
maybe some `firefox:` and `safari:` variants are needed, to overcome some niche jank you can sometimes come across (not relating to supported properties)
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
Cool 🔥🔥🔥🔥🔥
merci beaucoup
Tailwind css it's amazing! I love it ❤
Glad to see you filled in the empty space on the left, Adam
I saw you using the ampersand &>* selector, at 26:00 which I thought was just a Sass selector. Is that a Tailwind specific feature? Something you added in PostCSS or did I miss something?
The last feature like scss and I very like it
The intro was so chaotic lmao
When does the next episode of Full Stack Radio come out??
Adaaaaaaam!!
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”
Amazing
30:50 "because we're psychotic" lmfao XD
Nice work on 3.1. But what happened to the other guy who used to make these videos?
Tailwind CSS rocks...
what plugin in vscode do you use for the preview tab
So good 🤩
Hey Adam, do you know how to implement tailwindcss dark mode in rsuite?