Tailwind CSS V4 For NextJS, Astro and Vite TODAY

Tailwind version 4 is almost out it's now an alpha release and that means we can all get our hands on it and try it out and that's exactly what we're going to do so real quick their plog post which I've linked to in the description goes over all the new features but the really big one is the new oxide engine that replaces the old tool chain that used to use post CSS and Auto prefixer with a brand new unified tool chain written in Rust which is I guess what we do nowadays on top of lightning CS and the sum total is it's basically 10x faster than what we had before now at the end of the blog post it covers how to try it out with vit or the CLI and that's great but I wanted to not just show you V4 on beat but also on nextjs and Astro as well and even trying out with shad Cen let's get into [Music] it the first thing we're going to try V4 out on is nextjs and to do do that we are going to use the gigantic component starter that I built in a previous video showing how to take a gigantic Tailwind component and break it into its parts and pieces we're going to go see how Tailwind 4 applies to this gigantic Tailwind component so I'm going to copy the starter into a new directory called gigantic components and then I'm going to bring that up in vs code of course all this code is available to you for free in a link in the description right down below let's first fired up and see how it looks before or V4 all right we got our nice big product page with lots of Tailwind in it so we're going to stress out V4 we're going to see if it actually works with all of this cool Tailwind now I built this application using nextjs with the regular template and that was just using I guess v34 probably of Tailwind at the time so let's see how we can Port it to V4 so the first thing we're going to do is add the Tailwind CSS at next that's going to give us the V4 release and we're also going to use Tailwind CSS post CSS so that's their flavor I guess of post CSS also at the next version so let's hit go now the next thing we should do is remove the content from our Tailwind config there we go we deleted it that's one of the really cool things about this oxide engine you don't actually have to specify the content it has a much better content finder it'll find anything in any directory inside the source so that's really cool but you know honestly we're not actually doing a lot in here we setting up the background image which we're not even using we're not putting any plugins so you know what I'm just going to delete this all together bye-bye Tailwind config but now I do need to go and alter my post CSS config So currently we've got these plugins tail one CSS and auto prefixer we're going to replace that with Tailwind CSS post CSS let's give it a go and boom it's entirely unstyled so that's not great well what's the problem well if I go over into my source my app and into my global. CSS we're basically bringing in all the Tailwind that's not how you do it anymore now we use the import command and specify Tailwind CSS what's it save and there we go now we have version four of Tailwind on our nextjs application it's that easy I love it when we're removing code to get into a port that is amazing next up show you how to do V4 in vit now back in the terminal I'm going to create my V tw4 application using the react template and I'll bring that up in vs code now this doesn't have any Tailwind in it at all so we're actually going to start by installing Tailwind now again I'm going to bring in tail1 CSS at the next release but I'm also going to bring in tail1 cssv that is the V adapter for V4 now over my V config I'm going to bring in the tail and CSS plug-in and then I'm going to invoke that then over in my source I'm going to get rid of everything in the app CSS don't need that anymore I'm going to replace everything in the index CSS with that import tail in CSS just like we did in next and you know what that's probably good enough so I'm going to go over to my app jsx I'm going to replace that with just hello from Tailwind 4 big and bold let's hit save and see how it looks there you go hello from Tailwind for big and bold now that's not a great demo let's make that even better so I'm going to go back into my index HTML and first I'm going to get this into a dark Theme by painting the background black and giving us a white text there you go nice white on black and then I'm going to bring some example code into app.jsx of course all this code is available to you in the GitHub repository so you don't have to type it in for yourself let me just go show you what it looks like and then we can talk about it okay cool look at this we've got a cool poster display for our Dune movies I'm going to bring this in I'm going show you how this works responsibly so we're going to go from a horizontal card layout to a vertical card layout Isn't that cool and the way that that's done is with container queries which are now built into V4 so you don't need to bring in the container query plugin thank you thank you so right at the top here we' got a div that uses the Tailwind at container that says that that div is a container for container queries so any contain coner queries from then on down are relative to that div which is that container then in the main we can use things like at xcl flex and at XL flex wrap to say that when that container is in the XL size then we want to move into Flex mode with flex wrap that's what gives us our two card layout so instead of doing Excel like you would with a media query you use at XL and that gives you a container query so why not just use a media query instead of a container query well the great thing about a container query is that that actually is laying out everything relative to the size of the container and that container can be any div inside the application so if I were to wrap this in a div that was just say medium size if I go back into my application now because the container that we're laying out in is smaller we are getting our vertical layout so it's automatically adjusting to the size of the container that it's placed within which is fantastic because if you're only using media queries you're not actually relative to what you're being contained within you're actually just always relative to the whole size of the page now here's something that's even cooler about these container queries I'm going to get rid of my exterior container now I've given each title for each movie the class name of title so now I'm going to Define that title class in our index CSS and here's the really cool thing now watch the size of the title so what we're doing is we're scaling the size of the title based on the size of the container that we're placing the title into so how are we doing that now inside of our title class we've got two container queries one is relative to the large size and another is relative to the small size of container both adjust the font size but they use two different clamping functions now clamp takes three parameters the first is the minimum size the second is your preferred size and the third is the maximum size so in the case the size we're saying that we want to go from one R to two REM and we want to use the container query inline size as the scaling functions that's that 2 cqi so that's why as you make the container smaller and smaller that inline size gets smaller so the font size gets smaller along with it so nice all right enough about container queries let's try V4 on Astro so back in the terminal I'm going to run my pmpm create command again but this time I'm going to create an astro app with the name asro T4 again all this code is avilable to you in the GitHub Link in the description right down below I'm going to start off with an empty app and I'll bring it up in VSS code now this doesn't have Tailwind in it at all so let's go and install Tailwind now again I'm going to use the next version of Tailwind CSS it's going to give us V4 but I'm going to use post CSS like we did with nextjs now notice I've got no post CSS config to adjust so I need to create a post CSS config now normally I'd use JS here but in the Astro context we want to use a module so I'm going to use MJS now instead of saying module. exports and giving it that object I'm going to say export default because that's how you do it in esm all right let's go over to our source and then inside of source I'm going to create a new file called app.css and in there I'm going to import Tailwind CSS that's going to give us tailwind and I'm just going to use exactly the same Dune example that we had before so I'm going to do that title as well and then finally we need to go into pages into our index. asro file and I'm going to replace the contents entirely with our Dune example and hit save and let's see how we go all right this time we're on Local Host 4321 let's see and there we go Tailwind V4 on Astro and all we need to do was bring in the libraries create a post CSS config and then import tail1 CSS into our app and we had tail1 V4 now the news is not so good about Shad CN let's take a look all right so in the GitHub repo associated with this video and Link in the description right down below there's a Shad CN test directory that is a nextjs app router application on 14 that I installed Shaden into I then imported button into it and then over in the page file I created a bunch of different button variants and and let's take a look at the result we get unfortunately no styling on chadan which is a real drag in addition to that I actually did have to make some changes to Global CSS I had to remove the applications of border border and BG background because neither of those was defined inside of Tailwind so there's clearly some issue with shanen and Tailwind at this time but I'm sure that's all going to get resolved all right well I hope this helps you experiment with Tailwind V4 Alpha in your own application if you have any questions or comments be sure to put that in the comment section right down below in the meantime of course if you like this video hit that like button and if you really like the video hit the Subscribe button and click on that Bell and be notified the next time a new blue collar coder comes out

Channel: Jack Herrington

Views: 10,375

Keywords: tailwind, tailwind css, tailwindcss, jack herrington, jack harrington, tailwind css colors, react tailwind, tailwind ui, vite tailwind, tailwind nextjs, tailwind astro, astro tailwind, tailwind css nextjs, tailwind vite, vite tailwind css, tailwind v4, tailwind media queries, tailwind shadcn, shadcn tailwind, media queries tailwind, blue collar coder, nextjs14

Id: YzQrHnlWyZ0

Length: 10min 43sec (643 seconds)

Published: Mon Mar 11 2024