i hope you feel so empowered having done your very first Astro component even though it's very simple now we're going to talk about styling in this module we've already mentioned here that style tags within Astro files they're scoped to that file i should mention once again that the tag actually has to be present or a class or whatever it happens to be so you could give this thing a class if you wanted to we could call it like link or something like that and then I could come over here and dolink but it's only links in this file not in the slot but actually in the file that will be referenced so for instance if I come over here let's get rid of this and now this should no longer be read right because I don't have a dot link here you might think that you could come over here and just say hey I know what I'll do i'll reference let's see right over here I'll have some kind of tag inside here so let's have something with a class like this and we'll say like hi and notice this is not read because it's just part of the slot it actually has to be referenced from the file style itself hopefully that makes sense let's come back out this way so the scoped styling is really helpful aster actually applies like a data attribute and uses that to style it in your CSS all right now we're back to kind of as we started let's talk about some other options you've got you could of course just use a style attribute now here this could just be a string like background of black and that will show right there you could also use like a CSS and JS style syntax and here we could say something like background of black once again that would work now you can also with a class use like a CSS module where you import some kind of stylesheet and then pick off a certain class within that like title or link or whatever it happens to be all that is built in by default in Astro now in the last several years the rise of Tailwind and other CSS frameworks has helped people template out sites quicker and you'll be happy to know if you're a Tailwind dev that it's really easy to get started with Astro i'm going to come over here and go and kill my dev server and use the MPX command we'll do astro add tailwind now you might remember I showed you the Astro config file and this is where that comes in handy because what I can do is use this nice little helper that will install Tailwind for me it's going to install all the dependencies that I need we'll actually generate my Tailwind config file for me and notice it's going to update my astro.config.mjs file it's going to update it by importing Tailwind and adding it as an integration we'll talk about more integrations as we go but that's how nice it is to get started with Tailwind that's all I have to do hey this is Chris from the future just want to jump in real quick and say a couple of things tailwind 4 is now out and supported by Astro so there's just one slight change and that is the Tail 1 config file is now just a CSS file which means you do have to import it globally so like in a layout or something like that just like you would any other global CSS file and then you can do exactly what I explain in the rest of the video okay back to the video so that means I could literally come over here and just change this to like text I don't know 5 XL and that's a Tailwind class and notice it just works out of the box of course I've got my Tail 1 config if I want to do more to it but all this is because I've installed that one little package the Astroconfig.js just like we saw in the CLI here has added this integration so that way I can use this throughout my project and it knows to look for it now lastly I want to talk about global styles now as we've already mentioned here this will not be global if I come back over here we change this back to a normal anchor link it's only the one that's in this link component this one that's referenced here that will actually get our styling however what you can do for these style tags if you want to is make them global with the is global declaration now as soon as I do that notice this actually picks up the same styling now it's just this styling here obviously not the class cuz that's to the component itself but the style tag is now global now while you can do that that's not typically what you do for a global stylesheet so let's go ahead and get rid of this declaration right here and I want to come over here to my base layout every page I'm currently using uses this and anywhere you import a CSS file it's global for anything in that file and importantly anything in the slots or anything that's referenced there so let's come over here and inside the src directory again because I want Aster to touch it I'm going to create a styles directory now you can name this stylesheet whatever you want but just so I remember that it's global I typically call it global so let's call it global.css and perhaps here let's just take the body we'll make this background color something like peach puff all right so now we've got this here but it's not referenced anywhere so it's not actually working now what I want to do is import this up top just relatively so wherever it is in the project so I'll come up i know it's in my styles directory and then it's my global CSS as soon as I save this notice that both the home and the about will now take on that styling anywhere you import styling that component and anything inside that component or that's referenced even a slot will take on that styling so this is typically how I use global styles now let's just explore that a little bit if I come over here get rid of it in the base layout i go over to about and I import it over here now notice over here on about it's going to have that styling but on home it will not let's mix it up let's take it over here to our link component and you take your guess what do you think is going to happen as soon as I import it up here well notice it's going to be on the home it's going to be on the about because it's been imported and both of those are used in the base layout so therefore they both get this stylesheet as well anywhere you're importing your stylesheet if that component is used in any other file it will pull in all that styling so while technically not all imports are global typically I think of them that way because I'm only really going to use it if I know exactly where that's going to be referenced which for me is typically only in my layout files now Astra is smart enough that even though I have two links here right a link here and let's actually create one more link right so both of these links it's only going to reference that stylesheet once it won't pull it in two times in fact I can see that if I come over here and do mpm run build let's come up to my disc and I've got my index right here and notice that I've got this one stylesheet showing right here this underscore aster shows me this one CSS file which happens to contain all my Tailwind classes but it also contains the the link wherever that's at right here right and notice as we mentioned before it has this data attribute for the local styles here but the imported styles this background color here is on the body and it's just global we've got one more video to look at to understand how scripting works so far we've understood the structure of an Astro project the structure of an Astro page how slots and props work we've understood styling now it's time to understand how to work with JavaScript in Astro i trust you enjoyed that video i'll remind you that this whole playlist is a sneak peek of module one for my course Learnstro.dev if you're interested in getting that course at a discount check out the link below i'll catch you in the next one thanks for watching happy coding