Style Astro Pages with Many Different Options

Instructor: [0:00] Let's see how we can style our Astro websites. If we open the index page again, we'll see that we already have some class names appended to elements like the span, the paragraph with the instructions class, etc.

[0:15] If we scroll down, we're going to see that there's a style tag at line 70. This is the built-in way of styling Astro components and pages. The styles within the style element are scoped. Let's see an example. If we scroll up to line 37, we're going to see how the text gradient class is defined.

[0:36] If we inspect the actual title in Chrome, we're going to see a new property that starts off with data-astro-cid and then an identifier. This property is then used to target the text gradient class so it can provide the styles that we wrote down in the style tag. This feature prevents style leaking since the generated IDs are unique for each element.

[1:03] This means that it's also safe to use low-specificity selectors like H1 in this case because they will too get decorated with a uniquely generated ID just for themselves. What if we want to avoid that? What if we want to write global, unscoped CSS? If we want to make the whole style tag global, we can append is:global to it.

[1:27] If we save, we're going to see that the ID is now gone and the applied CSS does not include the ID. If we don't want to treat all of the styles as global but just some specific selectors, we can use the colon global selector that comes with Astro.

[1:45] In this case, the H1 style block will be treated as global while the text gradient at the bottom will be treated as scoped. Let's see this. There we go, our H1 does not include the generated ID while the text gradient does include that.

[2:03] If we revert our changes and save again, we're going to see that the H1 now does have the ID appended to it. There's also a way to apply multiple conditional classes to a certain element and we can use the class:list attribute that comes with Astro.

[2:21] Let's check it out. First, let's define a variable called isRed and set it to . Now, let's scroll down to the H1 element and use the class:lists attribute to provide all of the classes.

[2:36] We're going to provide an array where the first class can be, for example, box, and then the second element is going to be an object where the class by the name red is going to be applied only if the isRed variable is true.

[2:53] These elements, as you can see, can be either strings or objects and even a nested array of strings. If we save this, we're going to see that our H1 tag now contains a class attribute with the value of box. That's because we provided it as the first element. If we scroll up and set the isRed to true, we're also going to see the class name red aside from the box.

[3:22] To define these classes is really easy. We can just scroll down to our style tag and define the red class. Let's say we're going to set a two-pixel solid red border for the red element, and there's the border. We can also define and use CSS variables. First, let's create a couple of variables for our CSS variables.

[3:49] Let's make one for the foreground and give it a value of red and another one for our background and give it a value of lavender. To define the values, let's scroll down to the style tag and use the define:vars attribute, which also comes with Astro and accepts an object so we can pass our foreground and background variables that we defined above.

[4:15] Now, we can use them the same way we use CSS variables. Let's scroll down to the H1 style block and set the color property to var foreground and the background property to var background.

[4:33] Now we can see that our background has turned into the lavender color and our foreground, which is the welcome to text, has turned into red. Ignore the gradient. That's controlled by a different class.

[4:48] The cool trick about this is since we're using JavaScript to define the variables on the style block, we can extract them into plain variables, which also allows us to obtain them from the outside of the component and that's a cool feature that Astro has. Another way that we can define our styles is by using the inline style attribute.

[5:09] Let's scroll down to the H1 tag again and provide the style attribute. It accepts an object for CSS in JS-like syntax. For example, we can do font-weight and set that to 300. Now our font has a light text. If you prefer to write your CSS into actual CSS files, you can do that too. Let's create a styles directory into the source folder and create an index.css file.

[5:41] All right, so let's create a style block for the H1 element and set the text-decoration to underline. To use this file, we'll go back to our page file and simply import the CSS file. So that would be one level up, /styles/index.css. If we save this, we can see that our H1 now has an underline, which we define in the index.css file.

[6:07] We can also see that the contents of our index.css file got added to the head tag of our website. Astro also comes with support for third-party CSS libraries, like for example Tailwind CSS. To set up Tailwind, we need to run npx astro add tailwind. This will install the astro.js/tailwind package and also the official Tailwind CSS package.

[6:36] Now, it tells us that Astro will generate a minimal Tailwind config file for us, so let's accept that. And that it also going to make a few changes into the astro.config file. More specifically, import Tailwind from the astro.js/tailwind package and append it to the integrations array. Let's accept this as well.

[6:59] Now we've set up Tailwind into our astro project. This is how Astro installs official integrations. Of course, you could do this process manually, but save yourself some time and just run a single command. OK, let's run npm run dev again, and refresh the page. Let's open our index page again and try to use some of the Tailwind classes.

[7:22] Let's select the instructions paragraph and add the italic class, text right, and leading loose classes. If we save, we can see the changes are reflected immediately. Our Tailwind classes indeed work. The text is on the right side, it uses an italic font, and the leading between the lines is set to loose.

[7:48] All right, now let's do a recap. We learned that the built-in way of defining styles in Astro is by adding a style element at the bottom of the page.

[7:58] By default, the styles are scoped, meaning Astro will generate unique IDs for each of the elements, to prevent style leaking. We could opt out of this behavior by either adding the isGlobal attribute to the style element to make all of the styles global or by using the :global selector to opt out of specific style selectors.

[8:21] If we want to apply multiple conditional classes, we could use the class:list attribute and provide an array of either strings for the class name or objects for the conditional classes to it. We can also define CSS variables by adding the define:vars attribute to the style tag.

[8:41] For quick touch-ups or exceptions, we could also use inline styles by adding the styles attribute to the element we want to style. Astro also has support for Tailwind CSS, which we can add by running npx astro add tailwind. Tailwind has an official integration in Astro, so by running this command, Astro will set up everything for us.