What's new in Tailwind CSS v3.1?

hey i'm adam the creator of tillwin css how are you you doing okay not not okay you're a little bit sad a little bit sad because it's been six months since we released a new version of town one that had any new features or anything cool anything to get excited about at all well it's time to put away that tissues because we just released 101 css 3.1 and i'm here to tell you all about it [Music] if you're working on a tailwind project where you need to make any customizations to the config file you're probably referencing the documentation anytime you need to make a change just to figure out what the options called what values it takes how it's structured and stuff like that so to make this easier until in css 3.1 we've started shipping first party typescript types for the config i'll show you how it works so if i head over to the config file here you can see if i go into an option like extend and pull up my completions there's just nothing here specific to tailwind at all because vs code just has no idea what the shape of this object is supposed to be but if i head to the top here and i add a type annotation where i import tillandcss.config now if i go down into extend to bring up my completions again boom all of a sudden it knows about all the different keys in your tail and theme that you might want to edit so maybe you know that you want to change the font but you don't really remember what the key is you can just type font ah font family that's definitely the one i want to change or maybe you want to add a new gradient or something it's like gradient gradient color stops okay i never would have memorized that but now it's there and i can pull it up really quickly without jumping into the documentation it's also useful for other spots in the config like say i wanted to disable uh the background opacity plugin not a lot of people even know you can do this but you can disable plugins in tailwind using the core plugins config so you might just come here and open this up and type plug core plugins there it is make that an object and then just type you know opacity where's background opacity there it is turn it off and you're good to go so for existing projects all you have to do is add this comment to the top of the file like we talked about but for new projects we actually scaffold the config file with this type annotation in there automatically for you already i'll show you how that looks let's go ahead and delete this config file we'll open up the terminal here and we'll run npx tow and css init check out our new config file and there you go it's already got that annotation added so we get all the useful autocomplete stuff that we need to make any changes that we want to the config file without having to dig into the documentation at all [Music] when you're just using tone directly most of your styling happens directly in your html but on big projects it's basically inevitable that you end up with a bunch of custom css in your project as well for working with third-party libraries and for all sorts of other reasons for example here's a project where i've got a bunch of custom styles for styling algolia's doc search widget and i've also got a bunch of custom styles for like a custom prism theme for doing like syntax highlighting now these files can get pretty long depending on how much customization you're doing like this doc search file like this is hundreds of lines of css because of all this sort of custom svg embedded images we're doing and stuff to sort of get it looking exactly the way that we want and you wouldn't want this just mixed in with your big main css file ideally you want to like break this stuff up into separate files you can keep things organized and have any idea where any of your styles actually are now the way you'd normally do this in a tillwin project is using the post css import plugin so you'd create a post css config add the post css import plugin at the beginning get all that wired up and then you can start splitting things up into separate files sort of like i've done here so we've got a main.css file it imports taiwan's base layer then it adds our prism styles then our doc search styles then the components layer then the utilities layer now setting up post css import isn't really a big deal if you're already working on a project that's using post css and already has a postcss config but it can be a bit of a pain when you're just using tailwind cli directly especially if you're using our standalone cli where you don't actually want to have a node modules folder or install any node dependencies at all so in tailing css 3.1 we've actually embedded post css import directly in our cli so you don't need to configure anything if you want to be able to split your files up into multiple imports like this so in this project i've actually got the tailwind cli standalone executable here so you can see i've got no node module stuff no package.json no javascript dependencies at all yet if i head over to the terminal and i run that executable we'll compile css main.css let's spit that out into dist main.css and you'll also notice we don't even have a tailwind config file here so let's just specify the content that we're looking at directly on the command line here so we'll just look at the index.html file and if i've typed this right boom that compiled let's go take a look at the compiled css so you can see we've got all of our preflight styles and with any luck yeah there's our doc search styles there's our prism styles and there's our utilities and stuff at the end so no configuration necessary just start using imports splitting your files up however you want if you're using the cli all that's going to be automatically handled for you if you are using tailwind as a post css plug-in still which is also a great way to use tailwind it makes a lot of sense when you're working in projects that already sort of have a post css integration set up like next js is a great example of this then you will still want to set up post css import yourself but if you're just using rcli and just want things to be super simple totally done for you now one feature of taiwan that a surprising number of people i think don't actually know about is the theme function that you can use in your css to reference any of the values from your design system like your colors your spacing values stuff like that a lot of people use apply when they want to take like a tailwind value and mix it into some custom css but i actually like the theme function better personally because it's a little bit more direct with fewer side effects i'll show you what it looks like so here we have a project where we're trying to integrate with this third-party date picker that has its own css and the only way to actually style the state picker is to write custom css that sort of overrides the css that ships with the library so you can see here this is this r suite date picker and it exposes a bunch of these css variables to style it and i'm using those css variables along with the theme function to set them to different colors and stuff in this case so you can see i can do like theme then colors dot the color name dot the value and that'll set this variable to that value which shows up over here in the actual styled version of the day picker now one place that you'll see we've got something a little different happening going on here that is a little bit hard to notice if you're not looking closely is for the range background so you see this like light pinkish reddish background for the actual like date range here i'm setting that with just like a hard-coded rgb color with a transparency value and the reason i'm doing this is because up until now using the theme function in tailwind you had no way to actually specify the alpha channel so what i've done here is just hard coded the color then left a comment for any other developers on the team so they know where that color came from until in css 3.1 we've made this a lot easier by actually making it possible to specify the alpha value when you're pulling in a color from your theme so let's just duplicate this i'll show you what you can do now so we can do theme colors dot rows dot 300 and then we do a slash 25 percent so this is using the same syntax as the sort of modern rgb function where you do a slash and then the alpha value and now with any luck if we delete this and we go over here and refresh this you can see yeah everything still looks the same but now we don't have any sort of magic numbers in our css file without specifying where they actually came from or how they're actually linked to our design tokens we've also made this work in your tailwind config file so if i head over to the config file here say i want to set like the default ring color and the ring utilities are what we use in tone to sort of mimic like a focus indicator with box shadows so i could do something like ring color and then i can pull in the theme function and then if i want to set the default in the past you know i could do something like colors.rose.300 or whatever but i couldn't set the alpha value now just like in your css you can set the alpha value using this space slash syntax to set the alpha value just like you would with the new rgb and hsl functions in css [Music] if you've ever tried to define your custom colors until when using css variables you probably know that it's a bit of a pain to do it if you want things like the opacity modifier to work the way that you have to do it right is you have to in your css file define your custom colors using just the color channels so you don't actually have like rgb in here or anything you just have this is the r value the g value and the b value and then in your config file and this is where it gets a little bit gnarly is you have to create some sort of helper function like this with opacity thing that's a function that returns a function that receives this possibly defined opacity value value and then down here you define your colors using this helper and this sets things up using this you know anonymous function such that when you try to do stuff like you know fill brand 60 like we have here that it actually respects that alpha value we try to make this a little bit easier until in css 3.1 by getting rid of the need for this sort of crazy boilerplate function thing i'll show you what you can do instead now instead of that you can just use a format string so we can do something like rgb and then we want to do var color brand i think it was and then we can do slash and then use this placeholder alpha value thing it sort of looks like what you'd see in like a css spec when they're telling you the syntax for a particular value so you can do this anyways and now everything is just going to work without having to define that function or anything like that i put together this kind of interesting demo to show how this all works so we've got this little newsletter sign up thing and you can see there's a couple different shades of blue here especially for like focus styles and stuff like that but the way that i've actually built this is it's all just using this one brand color that's it and all of the different shades here are coming from just using opacities so if you look here this circle this is actually the circle behind this little paper airplane so that's at like a 10 opacity and then you've got the paper airplane which is that like a 60 percent opacity and it's got some opacity stuff inside of it and then this focus ring you know if we find that somewhere you can see it's got like a brand color focus ring but at 25 and then same with this button i think that's probably at a different opacity so that's at 50 so the cool thing about this is uh if you're building a sort of widget like this maybe this is like something that you need people to be able to embed on their own sites and easily customize to match their brand and stuff like that all you have to do is change one color and the whole thing is going to sort of adapt as best it can to look kind of cool so i'll show you what i mean here i'm going to paste in some different css here and you can see everything still looks the same but what i've done here is i've taken color brand which originally had the actual color defined in it and now i'm using that to reference another color so i've got like five different colors up here to find a sky color purple pink emerald and orange um now watch what happens if i just change brand to be like purple oh the whole thing just kind of updates and still looks pretty good honestly pink you know so there's like another shade just by changing the one variable uh emerald and orange and it all looks surprisingly good really about as good as i think you're going to get when you're trying to build something designed to be like really themeable if you're working on your own custom site that's kind of meant to just be one color i do think you get better results by sort of hand picking all the colors and not trying to rely on just opacity and sort of letting all this stuff cascade through in this magical way but if you're building the sort of thing that needs to be themeable this is a pretty cool technique and now into in css 3.1 it's a lot easier to set up without all that crazy function stuff [Music] so we've added some new utilities to tailwind 3.1 ready for it drum roll drum roll drum roll border spacing not exactly exciting admittedly but i will teach you how it works and i'll show you the example that actually motivated us to add it which i do think is a little bit more interesting so i've got a table here with some states and cities it's just a regular collapsed border table if i want to separate the borders and control that spacing in 3.1 i can do that with border separate which we already did have but the new one is border spacing so with border spacing 2 it adds a gap between them using the two value from the spacing scale four eight you know whatever you want to create whatever ridiculous looking table that i would never actually design or put into a real application but let me show you the example that i think is a little bit more interesting and sort of surprising actually so uh check this out i've got another table here and this is actually a table from tone ui and sort of the cool feature about this table is that it has a sticky header that stays there as you scroll but if you're looking closely you'll notice see this little border here at the bottom of the table header when i scroll the border goes away what the hell that sucks so in towards ui we actually added just a regular inline style to fix this because the only way that you can fix this is using border spacing and border separate so let me show you how it actually works here's the table if i add border separate to it of course it's going to look like trash you know adds these weird gaps between everything but now if i had border spacing 0 it goes back to looking exactly the way it did with collapsed borders but now when i scroll that bottom border is preserved which i think is pretty key when you're trying to do a sticky header table like this so there you go border spacing not the world's most exciting utility but it does have some utility if you have the right problem [Music] so we've added a handful of new variants until in css 3.1 and two of those are the enabled and optional variants now you might be asking yourself why would we even add variants for enabled and optional enabled and optional are literally the default states of any element so why do you need to specifically say oh when this is enabled do this or when this is optional do this when you could just not include a variant at all since it's going to apply to the default state of that element anyways i'll show you some useful examples so here's an example here where we've got a disabled button and the disabled style is setting the opacity to 75 sort of just fading it out kind of pretty classic disabled button treatment we also have a hover style here where we're changing the background color on hover now watch what happens when i hover over this disabled button you can see the background color is still changing even though it's disabled so in the past you might have fixed this by just writing this very specific selector to just do something like hover disabled bg indigo 500 which is basically taking the default background color and reapplying it on hover when it's disabled to make sure that this doesn't kick in so you can see that does fix the problem and the background color doesn't change this is okay right it's not the worst solution in the world but with the enabled variant look what you can do you can only change the hover style when it's enabled so we don't have to add that extra class at all we don't have to re-specify or duplicate this default color we just make sure that we only change the background style on hover if it's enabled and now when it's disabled yeah it doesn't change so it's less code and i think a little bit more expressive so i like the solution a lot next let's take a look at the optional variant so i've got another demo here admittedly this one is not quite as compelling as the first one but i do think it is kind of interesting so if you take a look at this demo here we've got sort of two form fields this one's required so we've sort of annotated it with this little required text and this one's optional so we haven't added anything there now this requires us of course to have different markup for these so the required one has this extra div whereas the other one doesn't and this is totally fine i think but i'll show you a trick that's kind of cool that will let you use the exact same markup for both of these which it could be valuable if you're using um a component framework like react review or something and you want to just reuse this sort of form group component and just pass in like a required prop and rather than conditionally rendering some markup just let css handle whether it should be shown or not so i'll show you how it works up here in the input i'm going to add a class of peer now what this does is basically mark it as a sibling that we might want to style based on and then down here in the required thing i'm going to add rather than just adding something using the optional variant i'm going to use pier optional i'm going to hide it if the pure is optional so what this is saying is if this input is optional then this is going to be hidden now you'll see if i get rid of this required oh all of a sudden that goes away so what that lets me do is take this markup and use it in both spots and now i can use the exact same markup in both situations and all i have to do is change the required attribute and this little help text is just going to automatically show or hide based on that attribute without having to write any javascript or anything to actually conditionally render the markup it's all being handled in css which i think is pretty cool we've also added new variants that allow you to conditionally style an element when the user has explicitly requested more or less contrast i bet you didn't even know this was possible in css but there's a media query feature called prefers dash contrast that can be set to more or less and that lets you conditionally change how an element looks based on the user's contrast preference show you how it works so here we got a little form here it's got kind of a lightish border and a pretty reasonable placeholder color but i could imagine how you might want to make the border darker and the placeholder a little bit darker if someone has explicitly said hey i want a higher contrast ui so this is what that looks like to do in practice here all we have to do is use the contrast more variant and then we can maybe set the border to something like border slate 400 and maybe we'll make the placeholder darker too so maybe we'll say placeholder slate 600 if someone has requested this gets you know a little bit darker and maybe let's make it 500 i think 600 might be too easily confused with a real value now you're not going to see any change here but watch what happens when i head over to the browser so here we've got the accessibility preferences open on mac os and this is where i can request increased contrast and this will propagate through the browser and actually fire that media query so watch what happens when i go ahead and increase the contrast here so you can see the border got darker and the placeholder got darker and pretend you didn't see [Music] that another variant we've added in 3.1 is the backdrop variant for styling the backdrops of native dialog elements yeah if you didn't already know a lot of modern browsers are shipping support for this new dialog element which is designed to let you create like custom modal dialogues without writing tons of javascript or doing a lot of that stuff uh yourself i don't think it's a hundred percent there or ready for prime time yet but it's it's pretty impressive and you can do a lot with it and it doesn't take a lot of work to get it working so i'll show you a demo of it here so i've got an example here of like this little hiring application you can imagine someone's applied for a job and we have this disqualify button and i've just wired this up with like vanilla javascript um you can see basically what happens is when someone clicks the disqualify button we call the show modal function on the dialog itself so here's the dialog element and i'm just kind of referencing that with an id and here's the button with the id that i'm wiring up that javascript to so when i click this button what's going to happen is the dialog is going to open up so i click this we get this dialog and you can see there is a subtle native backdrop there it's like a kind of a semi-transparent black or gray color to sort of fade things out back there so with the new backdrop variant in tailwind 3.1 we can actually customize this so check this out why don't we head over to the actual dialog itself and i'm going to say backdrop and let's make it a different color like bg slate 900 like 50 or something like that so when i open this hopefully we get a much darker background and it's using the same gray as like the rest of the site so that's going to look kind of nice and cool and why don't we add like a backdrop blur as well that would be kind of neat right check this out so if we go back here we say backdrop backdrop blur now when we open it whoa it's maybe a little too blurry but let's play with it a little bit why don't we bring the opacity of the backdrop down like 25 uh still pretty aggressively blurry what if we say blur sm what do we get then ah that's a little nicer maybe we can even bring this down to like 10 or something yeah i don't know like that looks pretty cool to me so that's how you can customize the style of the native backdrop pseudo-element with utility classes in taiwan css v 3.1 [Music] okay so you know how a couple versions ago we added support for arbitrary values lets you do stuff like this where you can take like a background color utility instead of using a value from your theme you can just put in like any hex code that you want and it'll just use that value so it lets you sort of escape from your theme and kind of do one-off stuff without having to write custom css for it in 3.1 we've added support for arbitrary variants so what the hell is an arbitrary variant let me show you you know how we have regular variants here like hover so you can see when i hover over all these elements they get a little bit lighter so this is a sort of native built-in modifier or variant in tow and css arbitrary variants are like arbitrary values but for variants i'll show you what it looks like we can do square brackets here just like we can for the the value portion of a utility and then inside the square brackets we write basically like a nested looking selector and tailwind is going to automatically apply that selector to conditionally apply these styles it sounds confusing but when i show you an example you'll understand what i mean so instead of writing hover using the native hover modifier or variant why don't we do ampersand colon hover now we can see that when we hover over it hey it still works and we're doing it with an arbitrary variant this time instead of a built in variant so that's an example of sort of doing it with sort of a built-in one right but why would you do that there's no reason to do that hover is already built in so what would you actually use this for so let me show you one kind of neat simple example first and then i'll show you some more crazy interesting examples so one thing that people ask for a lot in tailwind is the ability to style all of the children with a particular style if you look at what we've got here every single one of these cards has the same like p4 class on it for example they've got a bunch of classes that are the same but p4 is a decent example now in most projects like this stuff is in a loop you know so it's only defined once anyways but there are situations where you do duplicate things a lot of the time and maybe it's nice to sort of have a single source of truth for the style um so let's look at how you actually solve this with arbitrary variance so i'm just going to go through and delete the p4 style from all these so now we actually have no padding on all these right i'm going to go up to the parent and okay if we put p4 on the parent that's obviously not going to work but what can we do with an arbitrary variant well it's just a selector right like a nested selector string so what if we do ampersand child combinator asterisk boom we just targeted all of the children of this and gave them all that padding that's kind of cool this is a feature that people have asked for to be sort of included until one by default for a long time and we sort of punted on it because we couldn't figure out the exact api but now you can just do it yourself using arbitrary variance which is pretty pretty pretty cool uh what's another thing that you can do here oh another good thing is for situations where things need to be parameterizable what i mean by that is when you have a modifier that you kind of wish you could pass some sort of value to it a good example of this is like a supports query in css so you might not notice this but on all of these cards here there's a little bit of a backdrop player and if we open this in firefox you can see that there is no blur because firefox doesn't support backdrop filter without enabling this sort of experimental flag now if the blur isn't there a lot of the time it sort of hurts the contrast and makes things harder to read so in my projects what i tend to do is i tend to use a less transparent color for firefox than i do for other browsers so that things are easier to read there but i can still take advantage of the cool blur effects in safari and chrome so how could we kind of handle this with an arbitrary variant so to make things a little bit more obvious i'm going to change all these default colors down to like 25 so it's really really quite transparent and you can see in firefox how it's starting to interfere with the text a little bit more here so let's head back here we'll just maybe work on the very first one so what we want to do is we want to only use such a transparent background if the browser actually supports backdrop filter um so instead of setting it to 25 by default let's set to like 75 by default which is nice and easy to read even without a blur you know even in firefox and now let's change it down to 25 only if backdrop filter is supported so i'm going to create an arbitrary variant over here we're going to bring it down to 25 and let's try and write this arbitrary variant so what we want to do is say supports backdrop filter blur zero pixels and with any luck when we save this okay so now we're saying if the browser supports backdrop filter use this more transparent color and you can see that did kick in here which is using chrome under the hood if we head over to firefox though it stayed the lighter color because firefox doesn't support that backdrop blur so that's kind of cool that lets you do pretty sophisticated stuff directly in your html now without having to go ahead and create a custom class for this yes it's a little bit nasty looking and complicated looking but it's no more complicated in my mind than opening a css file and writing this in css honestly i would rather see this slightly messy looking class in the markup then have to manage a whole set of custom styles somewhere else and kind of do all the mental work to map things back and forth i'm done with that i like styling things in the html i think it's i think it's awesome so uh what else can you do with this stuff well you can also combine this with built-in variants so say what do we want to do here so here we have like on hover we set it to uh to 75 right that means that in firefox uh there is no hover styles right now because it's it's 75 by default so why don't we make it go to like 100 in firefox so i think we could probably just do that by getting rid of this so now it's going to go to 100 right so you can actually see that let's keep it at just 75 for the browsers that do support backdrop filter so what i'm going to do is i'm going to copy this arbitrary variant and i'm going to add a hover variant here as well and set this to 75. now if we've done this right this should still be 75 but the one in firefox is going to be 100. so that's kind of cool um what else can we do here okay let's do a really really wild example um say we wanted to change the color of this text only on this card when you hover that text and we want to do it from the parent because we're psychotic all right let's see what happens let's see if we can do it so we're going to write an arbitrary variant i think we're going to want to do something like text like pink 500 and let's figure out what we actually want to write so we want to target let's see that's the third child right so why don't we do nth child 3 and we want to target what element of it so we want to get it's like div div p and maybe a good way to get this is this is the only p that's the first one in a in its parent this is like the second element here so if we use like a first child on a p tag uh maybe we can actually get this get this to work so we're gonna use an underscore for a space and let's just say first child and just like hope that we got this right okay so that actually changed without being on hover right pretty crazy so let's make it only happen on hover so now if we hover the card it changes to pink um let's move the hover to the front and now it should only target it when we hover that specific element boom so is there any like good use for this i don't know probably not maybe maybe actually if you're working on something where you don't control the html and all you have is like the wrapper element and then you're injecting some crazy markdown or something like that and you need to uh kind of traverse it and style specific things honestly i could see how this this could be pretty useful it's a bit crazy for sure um but i don't know it's cool it's a sharp knife be careful with it but i believe in giving people sharp knives and letting people kind of figure out how to use things responsibly i'd rather give you all the power in the world and let you do what you want with it than kind of put training wheels on the framework or handcuff you in any way so this is just a cool example of a really crazy thing you can do now in 3.1 i use it responsibly but hopefully you can find things that you can do with this that actually make your life better and make it easier to build the things that you're trying to build so there you go that's 101 css 3.1 hope you love it and we'll see you in another video soon

Channel: Tailwind Labs

Views: 116,892

Keywords:

Id: nOQyWbPO2Ds

Length: 33min 19sec (1999 seconds)

Published: Thu Jun 09 2022