What's new in Tailwind CSS v3.0?

[Music] there's plenty of new exciting features intelligent css version three so let's dive right into it [Music] the new just in time engine has now replaced the classic engine which means that stairway 3 gets a huge performance boost and new features like stackable variants arbitrary values and more so here's a brand new tailwind project i have the default css input file and the default config file and all i need to get started is to define our content array here we need to tell the just in time engine which template files to look for in my project i have an src folder with two html files so here i'll set dot slash src and catch all the html files within that directory like so so let's jump in our index.html file and here on the right panel i have the output css file which is where tailwind generates our css i've disabled preflight here just so we can better see the on demand class generation from our templates and we're going to add a class attribute to our h1 tag so i'll give you the class of text 4xl and text blue 500 and you can see tailwind generates a css on demand and it does so really really fast and so like i mentioned you can also use arbitrary values so let's set a width with a magic number of 478 pixels and since only the classes you use are actually generated we don't have to worry about file size at all anymore we don't have to worry about purging at the end of the process and it opens doors for a lot of new features without having to worry about the file size ballooning for example stackable variants so here let's target the large breakpoint and let's use motion save and then focus hover and only under those compound conditions will go minus translate y4 and tailwind will generate the css that is necessary to support this exact specific scenario not only are all variants enabled by default in tailwind 3 but the justin damaging allowed us to add a ton of new variants as well many of those were actually introduced in tellurium css version 2.1 or 2.2 under the just in time preview if you didn't obtain that preview chances are you haven't seen them yet things like first letter selection before after peer selector and many more we've covered a lot of these in the talun css 2.2 release video so you can check that out but i'll quickly show you a couple of them now for example here's how the selection variant works so here if i select the text we can see we have this default blue and i'll change this color with selection bg sky 500 for the background and selection text white and that gives us pretty nice selection styles let me show you another one first letter and here we'll go with text 7xl first letter font black and to be hidden brand first letter text sky 500. we're really excited about just in time being the default and only mode now because it brings incredible performance and gives us permission to add new features in a way that was not possible before telling css version 3 brings an extended color palette enabled by default that's a total of 22 colors including 5 grays which have been renamed to better coexist colors were one of the main contributors to file size ballooning in teluin 2 which is why we had to ship a more limited set of colors however now in tailwind 3 thanks to the new just in time engine we don't have to worry about that anymore and here's what it looks like in tailwind 3 colors for days let's try out the new colored box shadow utilities and so we're going to give these buttons a little bit of a glow so for each of the four buttons i'll add a shadow xl utility and then make that shadow colored with shadow dash and here you see that we now have all tailwinds colors available as box shadow colors so here i'm going to mirror the background color of each button like so alright so this is definitely glowing you can probably tell that this shadow is a little bit too intense and the reason is the color opacity is always 100 when you add a colored shadow so what we want to do is stamp down the color opacity by adding a opacity modifier so here i think we will go with 30 and yeah i think that works really well and we now have a nice glowing effect under our buttons creating a glow effect like this is not the only way that colored box shadow utilities are useful sometimes you may have an element on the light background color and in this case it makes sense to use a colored shadow instead of a neutral shadow for better more natural results as an example let's take a look at this white button sitting on a light pink background and currently it has a box shadow which is using a gray color it does look pretty nice but let's see how it stands compared to a button with a colored box shadow so let's grab this button and duplicate it and on this new button let's set a color shadow with shadow pink 600 and we'll set the opacity here to 20 all right so it's pretty subtle and probably even more subtle on video but this button with the color shadow feels a little bit more natural it feels like the shadow is picking up a bit of the background and looks just a little bit more realistic and so that's a good use case for a colored shadow and a pretty good design tip for you the new print variant lets you bring modifications to your designs and get them ready for printing here's a recipe website example and to help us avoid pouring flour all over our computer there is the print functionality here with this button [Music] well there's a couple of things that bother me with this printed recipe here first of all it's on two pages and the second page here is literally just the footer of the website which i'm pretty sure is not going to help me bake these cookies same deal with the navigation up here on the first page i don't really need this and there's one more thing that bothers me is the contrast on the text which is using a light gray color and i want to change this to black so let's see how we can improve the print experience with this design using the print variant we'll start by removing this header entirely and also removing the footer this header tag is what we want to hide so i'll use the print variant and simply set it to display none with hidden and this print variant will wrap our display none inside a print media query we'll do the exact same with our footer print hidden and now if we try to print the site again the header and footer are gone this is already a great improvement since the print fits in one page now i think we can also remove these action buttons here since it doesn't make sense to have them on a printed page and here's the div that wraps these two buttons so one more time print hidden okay very nice and the last thing i want to change is like i mentioned before the contrast so i want to make the body copy pure black instead of this lightish gray and also if you compare with the footer this background has a light warm gray tint and i want it completely white right at the top is where we set the background and text color and so here i'll go print bg white and print text black our website still looks exactly the same when viewed in the browser but the printing experience should be much better all right this is looking nice and clean and i think it's time to put sterling ink to work one more time oh yeah that's looking much better this time all right i'll be right back i got some baking and shopping to do [Music] here's a video embed from youtube and you will see that the aspect ratio is preserved no matter what the width of the viewport is this is currently implemented using the first party aspect ratio plugin we're setting a width of 100 on the iframe itself and then on the parent element you can see these two aspect ratio classes the way this works if i hover over this class is using a technique known as the padding hack the aspect ratio is obtained by applying a padding bottom of a value which is the calculation between the height and width ratio we want to achieve that's applied to a parent element with a position of relative and then the child element will have a position of absolute and this is the element that we want to apply the aspect ratio to so that works but it's a little complicated you need to apply the utilities to the parent element and then you can only have one direct single child element for it to work properly telling three ships with new aspect ratio utilities which makes this process much much simpler let's get rid of our aspect ratio plugin i'll also remove the wrapping div here which had the utility classes generated by the plugin the video embed looks kind of wonky now it has a width of 100 and a height of the default height of an iphone which is 150 pixels this time directly on the iframe element i will add aspect and you can see that by default tailwind ships with two aspect ratio presets aspect square one by one and aspect video 16 by nine which is exactly what we want to use here this time instead of the complicated padding bottom technique we are simply applying aspect ratio 16x9 directly on the element and just like that our aspect ratio is back to what we want and it's preserved no matter what width of viewport we're using hey i know that guy here's another example for this one i'll have to zoom in a little bit so we can see what happens when we resize the browser window so let's narrow it down and you can see that the image height remains the same and then the image gets cropped based on the width so that it fills the entire space on our image element you can see that we have a set height of 48 and then we use object cover to make sure that the image uses the whole space available let's say that instead of that behavior we wanted to apply a constant aspect ratio here to do that we can remove the fixed height and use an aspect ratio utility instead so we've tried video before so let's try square one by one and so now our cover image maintains a perfectly square aspect ratio we only ship with two presets by default video and square but check this out the arbitrary value syntax here is actually pretty sweet instead of aspect square i'll open brackets here and inside i can create any aspect ratio that i need for example three by one and if you really wanted you could even use decimals here and when the page reloaded we saw the image jump and get just a little bit higher to respect this new custom aspect ratio all right for this demo i'm going to use an ipad since it's going to make it a little bit easier to understand what's happening so here's a travel website example and it has a list of winter destinations and as you can see they can scroll horizontally so currently wherever i stop the scroll position this is where the cards stay exactly and this is the default behavior we're going to use the new scroll snap tailwind utilities to take control over where these cards stop or snap when the user stops scrolling since each of our destination cards uses the same html block i've created a simple loop here and we're outputting this block of html for each destination in our winter destinations those destinations come from a json array here ok we need to define our scroll snap utility on the scroll container element and in our case this is this ul element here that contains all the destination cards since we're scrolling horizontally here i'll use the class snap x this class by itself isn't going to work just yet as you can see wherever i stop scrolling is where the cards stay so what we need to do is define where we want the cards to snap do we want them to snap in the middle of the viewport like this do we want them to snap at the start on the edge here or at the end and this is something we have to define on each child element within the scroll container so let's add a class to the li element and in this case we want the cards to align to the center of the container when we stop scrolling so i'll use snap center here so now let's see what happens when we scroll nice you can see that every time i scroll the card snaps perfectly in the center of the viewport if i don't scroll far enough it'll just come back and if i go past a certain point it'll flick to the next one beautiful here's a one page photography website example and as i scroll down you'll see that the navigation becomes sticky and there is four sections in this website which are linked to from the navigation and as you can expect clicking on a specific section link jumps to that section in the page so currently it's a little bit abrupt it jumps right to the section and also you might notice that the heading of the section is hidden behind the navigation here tailwind 3 brings some pretty cool new scroll utilities that makes it really easy to make this ui a little bit more polished let's start by making this navigation a little bit less abrupt by using the scroll smooth utility all right so we need to set the scroll behavior on the scrolling container that we want to smoothly animate and in our case this is the entire website so i will put a class on the html tag directly taywin gives us a new scroll smooth utility class that will set the scroll behavior to smooth and so now the html tag is set to scroll smoothly so if i click on nature you can see that it will scroll down to that section nice and smooth so that was pretty easy to implement we still have this issue where if i click on nature you can see the heading is hidden behind the navigation and so what we want to do is affect the scroll position we don't want to add margin on top but we want to add a scroll margin utility so i've got my four sections here that i have collapsed and i'm going to add a class of scroll empty for margin top and i can choose from the spacing scale and i think here i will go with scroll margin top 24 so once again scroll margin top does not affect the margin on top of the element it's really only affecting the scroll position and so that means that now if i click on one of these navigation links we should have a little bit of spacing under the nav bar and see the heading properly since we've added that scroll margin top of level 24. [Music] let's take this article example and say we want to split the content here in multiple columns here's the element that wraps our paragraph and so here one way to do this would be to use grids and let's go with grid calls two for two columns and gap of eight but for this to work we need to separate our columns in container elements so we'll have a div around the first two paragraphs and another div around the last two while we have split the text in two columns there's a few problems here because we've added extra wrappers we have lost the spacing set between the paragraphs and if i wanted to change the columns to three columns we would need to change the markup and rearrange the wrapping divs so that our content spreads across three columns it's not really that practical as you need to know how much content you've got that won't work in situations where your content is coming from say a cms another issue is we can't have the column split mid paragraph which could help with having columns of equal size css actually has a really nice solution to this problem it's called multi-column layout and it's now officially supported in tailwind css all right so we're going to undo all of this and get back to our starting point and let's type columns dash and you can see we can define a range of columns let's go with two here so now we've got two columns and let's quickly try three columns as well and there you go and you can see that the text has been split automatically in a way that makes the columns as equal in length as possible we didn't have to mess around with any wrapping divs the content split has happened automatically if you want to control the gutter spacing between the columns you can use the existing gap utilities so here for our horizontal gap between the columns we'll use gap x and i will go with 12 here all right so our gap is increased now i don't think that three columns works that well with that gap so let's go back to two columns and yeah that looks really nice another really cool thing that you can do is instead of manually defining the number of columns like we do here is to use responsive columns utilities so if i go down after the 1 to 12 columns we also have columns utilities like 3xs 2xs which instead of setting a number of columns we'll set a column width and then let the browser decide how many columns it can fit within the layout so let's say we like the column width of 320 pixels we'll go with columns xs we still have two columns here because this is the amount of 320 pixel wide columns that can fit within this container but if in the article wrapper here i change the max width container from 3xl to 6xl now there's enough space to have three columns within the container so the text is going to automatically split in three columns and so responsive column utilities are super useful when you want to let the browser decide how many columns to use based on the space available [Music] here's the settings form example and as i go through the fields you'll see that we have this brand color going however the file upload button has the default browser styles and if i click on the radio buttons or the check box you can see they use the default system blue let's make this form more on brand with two simple changes i'll start by changing the accent color for the radio buttons and checkbox since i want all the inputs in this form to take our brand accent color i'll go in the form element and here add an accent color utility and use our brand color of violet 500 and just like that our radio buttons and checkbox match the brand a little bit closer the next obvious thing we want to change is this file upload button and here's the input element so maybe let's start by adding a background color with bg and we'll use our violet brand color and here i'll go with 200 and that's not what we were hoping for the whole input has a violet 200 background and our button is still gray and this is where the new file modifier comes handy let's try it out i'll keep this violet 200 background class but i'll prefix it with file column doing so will scope this class to the file selector button pseudo class which happens to be the selector for this button so you can see that now the button has a background of violet 200 and not the whole input let's continue styling that button so we have a background color and for the text color i'll go file text violet 700 and i'll also change the font weight with file font semi-bold nice and let's also remove this default border with file border none next let's add some internal padding and rounded corners file px4 and file py2 for the padding and file rounded full for the rounded corners starting to look pretty good let's add a bit of spacing between the button and the text here with file margin right six and for the last touches i'll add a simple hover state and here we'll stack two variants together hover file and we'll change the background color with bg and we'll use violet 100 and with these simple changes that didn't require much effort our form is looking much more on brand okay so here we have a list of frequently asked questions and as you can see each question can be toggled opened or closed these faqs are implemented with the details tag meaning that it will only show the summary when it's closed and when it's open it will show the rest let's say that we wanted to apply different styles to a question when it's open to attract more attention to it so let me show you something i'll apply a background of white as well as a shadow xl on the first details element and so now it clearly stands out but we want these styles to be applied only when the question is open and not when it's closed like this and turns out the details element has an open attribute to it when it's open to demonstrate that i'll go in the second details and add open and you can see now the second question is displayed as open and we can target this open attribute with the new open variant and do the same for the shadow open column and just like that these utilities will only be applied when the details element is open so here's the bio section of a designer's personal website and you can see it includes a few links in it let's bring a little bit of variation and color to them using the new text decoration utilities here's our three links with the class of underline and here we're going to add the decoration dash class and you can see we have access to all of taywin's colors here and so the first link will be ember 500 and we'll make the second sky 500 and the last one pink 500 and just like that we've got colorful links now and you can see that the underline is skipping the descenders in the words which is pretty nice and something that you cannot do with borders the new arbitrary properties allow you to use absolutely any css property you can think of even if it hasn't been added to tailwind css yet let's take a look all right so we're going to take this little article as an example and so we've got a bit of text and then a floated image we're going to use a couple of css properties that are not part of telu and css to play around with the image and how the text wraps around it so here's our image tag and here i'll open square brackets for the new arbitrary properties syntax and inside of that you can use absolutely any css key value pair so on our image let's use the clip path property and we'll set the value to the circle shape okay nice but let's have a little bit more fun with it so i want a circle which has a radius of seventy percent and has its center at twenty percent from the left and thirty percent from the top now watch out arbitrary values cannot contain spaces so here we're going to replace each of the space with an underscore which will resolve to the correct syntax all right that's kind of interesting now but it would be much nicer if the text was wrapping around the image following the curve here and for that we can use another css property called shape outside and here i'll use the exact same circle than in our clip path and just like that we've created a clipping mask for our image and we have the text wrapping around nicely around the curve and so here's the css we've generated on the fly and that's pretty cool but you may ask more than ever why not just use inline styles the real power of these arbitrary properties is they can do things that are absolutely impossible with inline styles arbitrary properties can be paired with any of tailwind's modifier whether it be hover or focus state or maybe a responsive breakpoint something you cannot do with inline styles back in our example we have a different aspect ratio applied to the image at a larger breakpoint and with that aspect ratio our circle clip path kind of falls apart so we got a clip path definition here and we'll really find this at the large breakpoint so lg and once again clip path and here instead of a circle we're going to have a polygon and here i'll just paste some coordinates for our polygon points notice once again that the spaces are replaced with underscores so let's take a look and yeah nice our new clip path looks pretty good you can see that the text is still following the curve from the circle that we had defined so once again let's copy that polygon and for the large breakpoint the shape outside property will follow this exact same polygon and boom that's looking pretty cool all right we've just done something that inline styles cannot do define two properties and then redefine these two properties in the media query for the large breakpoints so let's take a look at the result we have the circle crop until we hit the large break point and then we have a custom shape polygon by the way arbitrary properties also work with css custom properties or css variables let's take a quick look so let's say in a css input file we define the variable at the root scope my shape and so here it would be a circle you could totally replace the two instances where we use that shape with var dash dash my shape so now the really cool thing here instead of redefining these two properties i can get rid of one of them and simply redefine the my shape variable to be a polygon and these are using the root scope my shape value which is our circle and then at the large break point we redefine the value of my shape which will update the clip path and shape outside properties and let's verify that circle and polygon that's pretty cool the new play cdn gives you all the power of tailwind css via a simple script tag in your document heads so here's the bare bones html page and i'm going to add a script tag that points to cdn.teloncss.com and just like that i have access to the full power of tailwind css let's try it out text for xl text center arbitrary values also work so text dash and let's use a hex color of 1e90ff you can customize your config file in another script tag and here i'll override the default tailwind.config so here i can access the theme we're going to extend our colors object with a new fancy blue color and this hex value is the same that i've used down here so i can now replace this with text fancy blue and it still works let's write some custom css in a style tag and by giving it a custom type attribute of text tailwind css i can now inside here use tailwind's custom functions and directives so let's create a class called my class and here i'll use at apply and we'll consolidate the utilities that we had used on the h1 below okay now let's go in the h1 tag and delete these classes so you can see in the preview that the styles are gone and we're going to replace that with my class and yep that just works please note that the play cdn as its name suggests is meant to play or prototype with tailwind we do not recommend using this in production as you won't obtain the best performance results we've covered a lot and we've definitely not covered everything there's plenty more like support for text indent wheel change touch actions flag spaces and much more be sure to check out the release notes for a full list of things we've added to tailwind css 3.0 we really hope you enjoyed this release i'm gonna sign off for now you're an absolute legend for watching this video all the way through thank you so much and i will see you in the next one have fun [Music]

Channel: Tailwind Labs

Views: 91,629

Keywords:

Id: mSC6GwizOag

Length: 26min 33sec (1593 seconds)

Published: Thu Dec 09 2021

Reddit Comments

[u/contactlite]

Jaw dropping!