The All-New Just-in-Time CDN — Tailwind CSS v3.0 Preview

[Music] telling css is designed to be run as part of your build step but we've always made a cdn version available for quick demos or prototyping directly in the browser now while this is great it always had a number of drawbacks to keep the cdn file size reasonable we've always had to exclude most of tailwind's variants like active group focus or dark modes you also couldn't customize tailwind with your own colors breakpoints or font families and of course none of the new just in time mode features were available for tailwind css 3.0 we've totally revamped the cdn story instead of shipping a limited pre-compiled version of tailwind we've created a new just-in-time cdn that compiles right in the browser with javascript with the new just in time cdn you now have the full power of tailwind css available to you and in this video we take an early sneak peek at that [Music] alright so here we have a very simple html file and what i'm going to do is add the just in time cdn link in the script tag in the document head so after the title here i will paste the cdn link let's keep in mind that this is a sneak peek video at the time of recording this tailwind css 3.0 is not out yet and so this is sort of a placeholder url for the cdn link and by the time tailwind css 3.0 comes out this will definitely change and when i save this you can see that the styles have changed tailwinds preflight is resetting the heading sizes the typography so it tells me that tailwind css is now working so let me start by adding a little bit of padding on the body tag so p-4 so it looks a little bit nicer and now as you can see we can apply any existing tailwind css class so on the h1 tag i'll add text blue 500 text 4xl and font bold another great feature that's available in just in time mode is arbitrary values which is useful when you need to break out of your design system so let me show you an example of that instead of text blue 500 we will open square brackets and i'll pass a custom hex value here of 5e 1e c7 and yep it's working now keep in mind that when using arbitrary values like this you typically break away from the predefined scales so make sure you understand the trade-offs and when is the right time to use this for your project okay so that's useful for a one-off use but what if we wanted to use that color here somewhere else in the project in a normal tailwind css project you would add this color to your config file and well you can do exactly the same with the cdn so let's go just under the cdn script tag and we'll open another script tag and here we'll write tailwind.config and we'll define an object that will redefine the default config here we will go in theme and then extend the colors object and let's create a new color that we will call lavender which will be our 5e 1e c7 hex color and so this will create utilities like bg lavender or text lavender so here instead of text with the arbitrary value i'll replace this with text lavender and it still works just fine all right next we'll style these two paragraphs of text you can see we have a div that wraps both paragraphs so i'll add a class of py-six just to add some vertical spacing and you know what would be nice to use here the typography plugin and turns out that you can do that very easily when using the cdn link you can pass a query parameter called plugins and this will allow you to specify any tailwind css first party plugin available so here we want the typography plugin and if you wanted more than one plugin you can have comma separated values like we could have forms but here we just want typography and if for some reason you need to specify a version of this plugin you can do it like so all right so let's save this and if we go back down to the div with the two paragraphs here i can add the prose class from the typography plugin and you can see the typography plugin in action that changed the color the line height spacing and link styling great so now let's style the last thing down here the try it out button so let's move down and here on the anchor tag i will add a class attribute the background color will be bg dash and we'll use a custom lavender color and the text will be white and let's add some padding px5 and py2 and let's also add inline block so it respects the vertical spacing and padding let's change the font weight with font medium and we'll add some rounded corners and a box shadow okay a button is looking pretty good in the previous version of the cdn most of tailwind's variant had to be disabled and you basically only had access to hover or focus and even there they were conservatively only enabled to certain plugins with the new just in time cdn you have access to absolutely all of tailwind's variants so if i change the color of the button on a hover with bg blue 500 something like this has always been working but in the previous version of the cdn if i tried something like active bg red 500 this would not have worked because the active variant is not enabled by default but here if i click on the button you can see that it works out of the box and you not only have access to all the variants but you can also stack variants together if you need so you could do something crazy like md dark disabled focus hover bg blue 500 and that would work as well that is if that made sense for your app but as you can see really powerful stuff all right i'll remove this last class and let's say we wanted to abstract away all these utility classes in a reusable class component to do that we need to write some custom css and so still in our html file let's open a style tag but here for the type attribute instead of having text css we will have text slash tailwind css and so this just tells the tellurid cdn that it needs to pass these styles which allows us to use special functions and directive of tellurium css like at apply so here let's create a class called btn and here i'll use at apply and i will paste all the utilities that we had applied on this try it out button like so and so let's go down in our anchor tag and instead of all these classes i will just use the new btn component class and as you can see our button still works including the hover and active variants all right so as you can see the new just in time seed end is really cool and you might just think well i'll use this to ship to production but slow down the justin time cdn is not really intended to be used that way it has a fairly large file size at about 100 kilobytes which is definitely more than what you would get if you compile the static tailwind css file also because the stars are generated at runtime you might experience this flash of unstyled content which is definitely something you want to try to avoid you should really consider the just in time cdn as a development tool and then compile a static css file for whatever you ship to production and once again keep in mind that at the time of recording this video we're looking at an alpha release of tailwind css3 the cdn link will change and we'll probably find a few little issues between now and the official stable 3.0 release alright that about wraps it up for this video as always thank you so much for watching and i will see you in the next one bye for now [Music]

Channel: Tailwind Labs

Views: 22,276

Keywords:

Id: QAIdYGslQGo

Length: 7min 24sec (444 seconds)

Published: Tue Oct 26 2021