Tailwind CSS V4 is SO Good!

oh boy the Tailwind team just released the very  first Alpha version of version 4 of Tailwind CSS   for me it was yesterday evening when I came across  this tweet by Adam where he showed it to the world   I really had to resist to run back into the studio  and play with it and record this video so here I   am the morning after and I really want to take  you through what I saw yesterday evening and why   I am so excited so first let's take a brief look  at the blog post the team shared and then we will   dive into some code as well so the first thing in  the article is they're actually already working on   this for quite a while and there is also quite a  bit of under the hood improvements there the first   thing is that of course everything is about speed  nowadays so they did made some speed improvements   and I'm really not doing this enough justice but  we have so much to cover and the thing here   is everything became smaller faster simpler and  that's always a good thing right and also if we   go a little bit further you also see that They  removed a lot of additional tools that you need   from now on you simply need tailwind and maybe you  add a vite plugin or a postcss plugin that's pretty   much it. You don't need to install things like  postcss, autoprefixer and things like that anymore   and that just makes it so much easier for people  new to it to start using this but then if we keep   on scrolling we're coming really to the juicy  parts because what you see here are four bullet   points that all have to do with modern CSS and  that again proves that tnd is just CSS and now   they're even using many of these modern tools  so the first one is that they're using native   Cascade layers with these Cascade layers there is  a lot less battling with CSS specificity and the   fact that they added that in out just again makes  stillwind a lot easier to use also they're using   things like at property with at property you're  able to kind of specify a type of your custom CSS   variable and because they are now doing that by  default for their custom values like for example   the cadient variables that means that all of a  sudden you're able to animate these variables   because CSS knows it's a color and because it  knows that it's able to add a transition to it and   that is actually really cool again this is just  Blain CSS magic but the fact that they included   now out of the box that means a lot then also  they're using color mix which is also a modern   approach for CSS to kind of mix colors so what you  can do with that is you can take a color you can   add some opacity to it and color mix will simply  create a new color that is based on that opacity   and finally the four bullet has all to do with  container queries these are also now included   out of the box don't require a custom plugin  anymore and I mean container CES are just so   nice to use so that's a really nice thing to get  as well finally they're talking about composable   variants and if we look at this example where  you see group has and then you needed to use   an % before now you can simply do group has Focus  that of course again makes it so much simpler and   easier to use but if we keep on scrolling down  a little bit and you see things like group not   has spear not data active well they of course  also say it's a horrible reason but yeah then   things might be going a little bit too far but for  specific things like group has Focus that's just   so much easier to use and really nice but then if  we just keep on scrolling and skip over uh some   parts for now then we start to come at the really  exciting part and that is they call it CSS first   configuration but what you just see here is tnd  has become even more just CSS and the main thing   is if you want to use tnd now you simply need to  import the tillin CSS package after installing it   but you just import it in your CSS and from that  point on everything all of a sudden becomes CSS   variables I mean there is no Tailwind config file  needed anymore and that is so cool because we have   CSS variables now why wouldn't we use them and  you could use CSS variables before until win but   you're kind of declaring them twice you're also  setting the CSS variable value inside your team   as well so that was quite a bit of a hassle but  now that's not needed anymore you can just use   them as CSS variables and that was exactly the  part that made me so excited about this so let's   quickly take a brief look at a small project  that I've set up where we can use this today   and remember everything is still Alpha version  you should definitely not use this in production   but it's so cool to play around with and see  what the future of Tailwind will be if you   want to know how to use this Alpha version at the  bottom of the blog article which I've also linked   in the description there is some installation  instructions on how you can use them but if we   quickly jump into the small project that I set up  then what you see here is a basic Ved project that   I've just installed and what I've also did inside  of the feed configuration is that I've added the   TN CSS plug and adding that is the only thing  you need to do now and then you simply import   Tailwind CSS and that is it from that point on you  can use all of Twin's defaults because if we then   go into our app. TSX you see that there are some  regular tailin classes that you're probably Ed to   you see we have things like text 3 XL font medium  a padding everything is simply there and even the   autoc completion still works for it autocomplete  to by the way you need to upgrade your vs code   extension to the pre-release version but as soon  as you do that everything starts to work again   and now let's take a look at how we can use the  CSS variables to start customizing our team well   we go into our CSS file and what you need to add  for that is the at Team directive inside the at   Team directive you're able to specify everything  you want so you can for example say color f is   and let's see okay it's going to be R according to  co-pilot and then if you do that you go back into   your app and you can simply instead of background  on gr 300 you can use background Fu and all of a   sudden everything is red and you even see the auto  completion works and also my color highlighter   picks it up as well but just like with the I think  old TN CSS what happens is that there's variables   for all of these different colors so if you would  inspect the page right now you'll see that there's   all of these different colors generate however the  theme now is also very extensible and if you watch   my last video about pwin theme configuration you  know that I think to get any consistency in your   design you probably don't want to have 25 crates  if your design doesn't use small so what you're   able to do now is you can go in and say color-  star is initial and with that if you do that   as the very first color you define you simply  override all of the other colors or actually   remove them from your team entirely and what you  see now is that all of these colors are suddenly   gone from the tman definition and it also means  if we go back into our app the background Fu   still works but background grade 300 wouldn't  work and it's also not autoc completed anymore   simply because it doesn't exist and the same thing  you're for example able to do for your phone size   by default if you go go into the app. TSX you see  that we have a 3 XL but if we remove that you see   that we also have 2 XL four 5 6 7 we got all of  them but let's say that your text has only three   sizes you could for example say font size initial  and then we're going to say font size small is 12   pixels font size medium 16 pixels and font size  large is 20 pixels I don't know maybe that's the   only thing we use and then we go back into our  app and we can simply say text and now you see   down here we have large medium and also small  and then again this is just out complete it   again everything works like you expected and to me  this feels so much more natural to work with you   have all the CSS variables that you can use which  is just regular CSS again and once more the fact   that you can use this initial is so much nicer you  can simply remove all the things you don't need or   want and create a very small theme but still use  all the powers that tillin brings including things   like the auto completion and all of the other  utility classes and if you take a look at the   default team that V4 of tillin now Rings you see  all of the other variables that you have and that   you can override so for example breakpoint you  can also override or reset by doing breakpoint   D star initial if that's what you want and then  all of the other classes will simply work as well   although I did notice that the UN completion for  break point doesn't perfectly work yet then it   still gives you the old values so I guess that's  still something they're working on but for colors   as well as things like Shadows radiuses everything  is then simply configurable and honestly I think   with these new variables tan became so much more  approachable there is a really nice set of CSS   variables that's already there and from that point  on you can configure some remove some if you want   to and then all of the other utility classes are  simply automatically there for you you don't need   to write them at all and I mean I don't want to  create the same utility class over and over I   have done that for for over a decade already so  I'm happy that there's a tool that does that for   me but yeah this only scratch the surface of what  TN V4 does and I think if you keep on exploring   more you discover even more really amazing things  oh yeah talking about amazing things one thing I   already discovered yesterday evening on Twitter  was a tweet by Simon Swiss and he created this   very basic repo where you already experimented  with twin V4 as well and what you see here is he   imported the open props package which is a really  nice package by Adam Argy and that contains a lot   of CSS variable and this package could very  well be something that is part of your own   design system but what you then do is because  this specifies all these CSS variables you can   simply configure Tailwind CSS variables they don't  even need to be medium and large you can create   whatever name you want and Tailwind will generate  the utility classes for you you can simply set   that variable from the package as a value in  tn's team and all of a sudden you've created   your own custom team and that is of course Very  powerful because right now you can simply Define   these variables and that's the only thing you need  to do and everything starts to work automatically   from that point on so I don't know about you but  I am super excited about this new future and New   Direction that twin is heading into even though we  only scratch the surface but if you enjoyed this   very brief walk through then absolutely leave  a like And subscribe to this channel it is the   only thing that I ask from you thank you so much  for watching and I will see you in the next video

Channel: Frontend FYI

Views: 33,331

Keywords: TailwindCSS, Frontend, Webdevelopment, CSS

Id: hxXZG6U9Yjw

Length: 8min 51sec (531 seconds)

Published: Thu Mar 07 2024