astro/docs/styling.md

💅 Styling

Styling in Astro is meant to be as flexible as you’d like it to be! The following options are all supported:

Framework	Global CSS	Scoped CSS	CSS Modules
.astro	✅	✅	N/A¹
.jsx | .tsx	✅	❌	✅
.vue	✅	✅	✅
.svelte	✅	✅	❌

¹ .astro files have no runtime, therefore Scoped CSS takes the place of CSS Modules (styles are still scoped to components, but don’t need dynamic values)

All styles in Astro are automatically autoprefixed and optimized, so you can just write CSS and we’ll handle the rest ✨.

🖍 Quick Start

Styling in an Astro component is done by adding a <style> tag anywhere. By default, all styles are scoped, meaning they only apply to the current component. To create global styles, add a :global() wrapper around a selector (the same as if you were using CSS Modules).

<!-- src/components/MyComponent.astro -->

<style>
  /* Scoped class selector within the component */
  .scoped {
    font-weight: bold;
  }

  /* Scoped element selector within the component */
  h1 {
    color: red;
  }

  /* Global style */
  :global(h1) {
    font-size: 32px;
  }
</style>

<div class="scoped">I’m a scoped style and only apply to this component</div>
<h1>I have both scoped and global styles</h1>

Tips

• <style> tags within .astro files will be extracted and optimized for you on build. So you can write CSS without worrying too much about delivery.
• For best result, only have one <style> tag per-Astro component. This isn’t necessarily a limitation, but it may result in better optimization at buildtime.
• If you want to import third-party libraries into an Astro component, you can use Sass! In particular, @use may come in handy (e.g. @use "bootstrap/scss/bootstrap");

📘 React / Preact

.jsx files support both global CSS and CSS Modules. To enable the latter, use the .module.css extension (or .module.scss/.module.sass if using Sass).

import './global.css'; // include global CSS
import Styles from './styles.module.css'; // Use CSS Modules (must end in `.module.css`, `.module.scss`, or `.module.sass`!)

📗 Vue

Vue in Astro supports the same methods as vue-loader does:

• Scoped CSS
• CSS Modules

📕 Svelte

Svelte in Astro also works exactly as expected: Svelte Styling Docs.

👓 Sass

Astro also supports Sass out-of-the-box. To enable for each framework:

• Astro: <style lang="scss"> or <style lang="sass">
• React / Preact: import Styles from './styles.module.scss';
• Vue: <style lang="scss"> or <style lang="sass">
• Svelte: <style lang="scss"> or <style lang="sass">

💁‍ Sass is great! If you haven’t used Sass in a while, please give it another try. The new and improved Sass Modules are a great fit with modern web development, and it’s blazing-fast since being rewritten in Dart. And the best part? You know it already! Use .scss to write familiar CSS syntax you’re used to, and only sprinkle in Sass features if/when you need them.

🦊 Autoprefixer

We also automatically add browser prefixes using Autoprefixer. By default, Astro loads the [Browserslist defaults][browserslist-defaults], but you may also specify your own by placing a Browserslist file in your project root.

🍃 Tailwind

Astro can be configured to use Tailwind easily! Install the dependencies:

npm install --save-dev tailwindcss

And also create a tailwind.config.js in your project root:

// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: ['./public/**/*.html', './src/**/*.{astro,js,jsx,ts,tsx,vue}'],
  // more options here
};

Be sure to add the config path to astro.config.mjs, so that Astro enables JIT support in the dev server.

  // astro.config.mjs
  export default {
+   devOptions: {
+     tailwindConfig: './tailwindConfig.js',
+   },
  };

Now you’re ready to write Tailwind! Our recommended approach is to create a public/global.css file (or whatever you‘d like to name your global stylesheet) with Tailwind utilities like so:

/* public/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

💁 As an alternative to public/global.css, You may also add Tailwind utilities to individual pages/*.astro components in <style> tags, but be mindful of duplication! If you end up creating multiple Tailwind-managed stylesheets for your site, make sure you’re not sending the same CSS to users over and over again in separate CSS files.

📦 Bundling

All CSS is minified and bundled automatically for you in running astro build. Without getting too in the weeds, the general rules are:

• If a style only appears on one route, it’s only loaded for that route (/_astro/[page]-[hash].css)
• If a style appears on multiple routes, it’s deduplicated into a /_astro/common-[hash].css bundle
• All styles are hashed according to their contents (the hashes only change if the contents do!)

We’ll be expanding our styling optimization story over time, and would love your feedback! If astro build generates unexpected styles, or if you can think of improvements, please open an issue.

⚠️ Ordering may not be guaranteed. Though we try and preserve your ordering as much as possible, there are no guarantees between pages. For example, if one page loads a.css, b.css, and another loads b.css, there’s a chance that b.css may load first (as it’s a shared asset). The best course of action is to reduce your styles’ dependence on ordering as much as possible. But if specific order is required, Sass’ @use is highly recommended or you must guarantee that all styles load in the same order on every page.

📚 Advanced Styling Architecture in Astro

Too many development setups take a hands-off approach to CSS, or at most leave you with only contrived examples that don’t get you very far. Telling developers “Use whatever styling solution you want!” is a nice thought that rarely works out in practice. Few styling approaches lend themselves to every setup. Astro is no different—certain styling approaches will work better than others.

An example to illustrate this: Astro removes runtime JS (even the core framework if possible). Thus, depending on Styled Components for all your styles would be bad, as that would require React to load on pages where it’s not needed. Or at best, you’d get a “FOUC” as your static HTML is served but the user waits for JavaScript to download and execute. Or consider a second example at the opposite end of the spectrum: BEM. You can use a completely-decoupled BEM or SMACSS approach in Astro. But that’s a lot of manual maintenance you can avoid, and it leaves out a lof of convenience of Astro components.

We think there’s a great middle ground between intuitive-but-slow CSS-in-JS and fast-but-cumbersome global CSS: Hybrid Scoped + Utility CSS. This approach works well in Astro, is performant for users, and will be the best styling solution in Astro for most people (provided you’re willing to learn a little). So as a quick recap:

This approach is good for…

• Developers wanting to try out something new in regard to styling
• Developers that would appreciate some strong opinions in CSS architecture

This approach is NOT good for…

• Developers that already have strong opinions on styling, and want to control everything themselves

Read on if you’re looking for some strong opinions 🙂. We’ll describe the approach by enforcing a few key rules that should govern how you set your styles:

Hybrid Scoped + Utility CSS

Scoped styles

You don’t need an explanation on component-based design. You already know that reusing components is a good idea. And it’s this idea that got people used to concepts like Styled Components and Styled JSX. But rather than burden your users with slow load times of CSS-in-JS, Astro has something better: built-in scoped styles.

<!-- src/components/Button.astro -->
<style lang="scss">
  /* ✅ Locally scoped! */
  .btn {
    padding: 0.5em 1em;
    border-radius: 3px;
    font-weight: 700;
  }
</style>
<button type="button" class="btn"><slot></slot></button>

Note: all the examples here use lang="scss" which is a great convenience for nesting, and sharing colors and variables, but it’s entirely optional and you may use normal CSS if you wish.

That .btn class is scoped within that component, and won’t leak out. It means that you can focus on styling and not naming. Local-first approach fits in very well with Astro’s ESM-powered design, favoring encapsulation and reusability over global scope. While this is a simple example, it should be noted that this scales incredibly well. And if you need to share common values between components, Sass’ module system also gets our recommendation for being easy to use, and a great fit with component-first design.

---

By contrast, Astro does allow global styles via the :global() escape hatch, however, this should be avoided if possible. To illustrate this: say you used your button in a <Nav /> component, and you wanted to style it differently there. You might be tempted to have something like:

<!-- src/components/Nav.astro -->
---
import Button from './Button.astro';
---

<style lang="scss">
  .nav :global(.btn) {
    /* ❌ Don’t do this! */
  }
</style>

<nav class="nav"><button>Menu</button></nav>

This is undesirable because now <Nav> and <Button> fight over what the final button looks like. Now, whenever you edit one, you’ll always have to edit the other, and they are no longer truly isolated as they once were (now coupled by a bidirectional styling dependency). It’s easy to see how this pattern only has to repeated a couple times before being afraid that touching any styles anywhere may break styling in a completely different part of the app (queue peter-griffin-css-blinds.gif).

Instead, let <Button> control its own styles, and try a prop:

<!-- src/components/Button.astro -->
---
export let theme;
---
<style lang="scss">
  /* ✅  <Button> is now back in control of its own styling again! */
  .btn {
    [data-theme='nav'] {
      // nav-friendly styles here…
    }
  }
</style>

<button type="button" data-theme="{theme}"><slot></slot></button>

Elsewhere, you can use <Button theme="nav"> to set the type of button it is. This preserves the contract of Button is in charge of its styles, and Nav is in charge of its styles, and now you can edit one without affecting the other. The worst case scenario of using global styles is that the component is broken and unusable (it’s missing part of its core styles). But the worst case scenario of using props (e.g. typo) is that a component will only fall back to its default, but still usable, state.

💁 Why this works well in Astro: Astro is inspired most by JavaScript modules: you only need to know about what’s in one file at a time, and you never have to worry about something in a remote file affecting how this code runs. But we’re not alone in this; Vue and Svelte have both capitalized on and popularized the idea that styles and markup are natural fits in the same component file. You can still have separation of concerns even with markup, styling, and logic contained in one file. In fact, that’s what makes component design so powerful! So write CSS without fear that you picked a name that’s used by some other component across your app.

Utility CSS

Recently there has been a debate of all-scoped component styles vs utility-only CSS. But we agree with people like Sarah Dayan who ask why can’t we have both? Truth is that while having scoped component styles are great, there are still hundreds of times when the website’s coming together when two components just don’t line up quite right, and one needs a nudge. Or different text treatment is needed in one component instance.

While the thought of having perfect, pristine components is nice, it’s unrealistic. No design system is absoutely perfect, and every design system has inconsistencies. And it’s in reconciling these inconsistencies where components can become a mess without utility CSS. Utility CSS is great for adding minor tweaks necessary to get the website out the door. But they also are incomplete on their own—if you’ve ever tried to manage responsive styles or accessible focus states with utility CSS it can quickly become a mess! Utility CSS works best in partnership with component (scoped) CSS. And in order to be as easy as possible to use, Utility CSS should be global (arguably should be your only global CSS, besides maybe reset.css) so you don’t have to deal with imports all willy-nilly.

Some great problems best handled with Utility CSS are:

• margin
• padding
• text/background color
• font size and family
• default element styling

In Astro, we recommend the following setup for this:

<head>
  <link rel="stylesheet" href="/styles/global.css" />
</head>

And in your local filesystem, you can even use Sass’ @use to combine files together effortlessly:

├── public/
│   └── styles/
│       ├── _base.scss
│       ├── _tokens.scss
│       ├── _typography.scss
│       ├── _utils.scss
│       └── global.scss
└── src/
    └── (pages)

What’s in each file is up to you to determine, but start small, add utilities as you need them, and you’ll keep your CSS weight incredibly low. And utilities you wrote to meet your real needs will always be better than anything off the shelf.

So to recap, think of scoped styles as the backbone of your styles that get you 80% of the way there, and utility CSS filling in the remaining 20%. They both work well in tandem, with each compensating for the other’s weakness.

💁 Why this works well in Astro: Astro was built around the idea of Scoped CSS and Global Utility CSS living together in harmony ♥️! Take full advantage of it.

More suggestions

”But wait!” you may ask, having read the previous section. ”That doesn’t take care of [my usecase]!” If you‘re looking for more pointers on some common styling problems, you may be interested in the following suggestions. These all are cohesive, and fit with the Hybrid Scoped + Utility philosphy:

1. Split your app into Layout Components and Base Components
2. Avoid Flexbox and Grid libraries (write your own!)
3. Avoid margin on a component wrapper
4. Avoid global media queries

Suggestion #1: Split your app into Layout Components and Base Components

While this guide will never be long enough to answer the question ”How should a page be laid out?” (that’s a design problem!) there is a more specific question hiding within that we can answer: “Given a layout, how should components/styles be organized?” The answer is don’t bake layout into components. Have layout components that control layout, and base components (buttons, cards, etc.) that don’t control layout. What does that mean? Let’s walk through an example so it’s more clear. Pretend we have a page that looks like this (numbers for different components):

|---------------|
|       1       |
|-------+-------|
|   2   |   2   |
|---+---|---+---|
| 3 | 3 | 3 | 3 |
|---+---+---+---|
| 3 | 3 | 3 | 3 |
|---+---+---+---|

The layout consists of a big, giant, full-width post at top, followed by two half-width posts below it. And below that, we want a bunch of smaller posts to fill out the rest of the page. For simplicity, we’ll just call these <BigPost> (1), <MediumPost> (2), and <SmallPost> (3). We add them to our page like so:

---
// src/pages/index.astro

import Nav from '../components/Nav.astro';
import BigPost from '../components/BigPost.astro';
import Grid from '../components/Grid.astro';
import MediumPosts from '../components/MediumPosts.astro';
import SmallPosts from '../components/SmallPosts.astro';
import Footer from '../components/Footer.astro';
---
<html>
  <body>
    <Nav />

    <Grid>
      <BigPost />
      <MediumPosts />
      <SmallPosts />
    </Grid>

    <Footer />
  </body>
</html>

This looks clean, but looks can be deceiving. At first glance, we may think that <Grid> is controlling the layout, but that’s an illusion. We actually have <BigPost> handling its own width, <MediumPosts> loading 2 components and controlling its width, and <SmallPosts> loading 4+ components and controlling its width. In total, including <Grid>, that means 4 components are all fighting over the same layout. Remove one post from <MediumPosts>, the layout breaks. Edit <BigPost>, the layout breaks. Edit <Grid>, the layout breaks. If you think about it, none of these components are truly reusable—they might as well just be one big file.

This is actually the Global CSS Problem in disguise—multiple components fight over how they all lay out together, without layout being one, central responsibility (kinda like global CSS)! Now that we identified the problem, one way to fix this is to hoist the entire layout to the top level, and load all components there, too:

---
// src/pages/index.astro

import Nav from '../components/Nav.astro';
import BigPost from '../components/BigPost.astro';
import MediumPost from '../components/MediumPost.astro';
import SmallPost from '../components/SmallPost.astro';
import Footer from '../components/Footer.astro';
---

<html>
  <head>
    <style lang="scss">
      .wrapper {
        max-width: 60rem;
        margin-right: auto;
        margin-left: auto;
        padding-right: 2rem;
        padding-left: 2rem;
      }

      .grid {
        display: grid;
        grid-gap: 1.5rem;
        grid-template columns: 1fr 1fr 1fr 1fr;
      }

      .big-post {
        grid-column: span 4;
      }

      .medium-post {
        grid-column: span 2;
      }

      .small-post {
        grid-column: span 1;
      }
    </style>
  </head>
  <body>
    <Nav />

    <div class="wrapper">
      <div class="grid">
        <div class="big-post"><BigPost postId={12345} /></div>

        <div class="medium-post"><MediumPost postId={12345} /></div>
        <div class="medium-post"><MediumPost postId={12345} /></div>

        <div class="small-post"><SmallPost postId={12345} /></div>
        <div class="small-post"><SmallPost postId={12345} /></div>
        <div class="small-post"><SmallPost postId={12345} /></div>
        <div class="small-post"><SmallPost postId={12345} /></div>
        <div class="small-post"><SmallPost postId={12345} /></div>
        <div class="small-post"><SmallPost postId={12345} /></div>
        <div class="small-post"><SmallPost postId={12345} /></div>
        <div class="small-post"><SmallPost postId={12345} /></div>
      </div>
    </div>

    <Footer />
  </body>
</html>

Getting over that this is more code, it’s actually a much cleaner separation. What was a four-component layout is now managed 100% within the top-level index.astro (which we can now consider a Layout Component, and if we wanted to reuse this we could extract this into its own file). Your layout is centralized, and now these components truly are reusable because they don’t care one bit about whether they’re in the same grid or not. You can edit styles in any of these files now without fear of styles breaking in another.

The basic rule is that when orchestrating multiple components, that’s a unique responsibility that should live in one central place, rather than split between 4 components as we were doing. In fact, top-level pages are great at this, and should always be the starting point of your layout components. See how far you can take it, and only extract layout components when you absolutely have to.

To recap: if you have to touch multiple files to manage one layout, you probably need to reorganize everything into a Layout Component.

💁 Why this works well in Astro: In Astro, anything can be a .astro component, and you never incurr performance problems no matter how many components you add. But the main benefit to Layout isolation is how much it cuts down on the amount of CSS you need.

Suggestion #2: Avoid Flexbox and Grid libraries (write your own!)

This may feel like a complete overreach to tell you not to use your favorite layout framework you’re familiar with. After all, it’s gotten you this far! But the days of float madness are gone, replaced by Flexbox and Grid. And the latter don’t need libraries to manage them (often they can make it harder).

Many front-end developers experience the following train of thought:

1. I should reuse as much CSS as possible (good!)
2. Many pages reuse the same layout, … (hold up—)
3. … therefore I can find an existing solution to manage all my duplicate layouts (wait a minute—)

While the logic is sound and the first point is correct, many developers assume #2 is correct when that is not the reality for many. Many projects contain myriad layouts that are different from one part of a website to another. And even if they are the same on one breakpoint doesn’t mean they are the same on all breakpoints!

Ask yourself: If there really were more unique layouts in my website than I assumed, why am I trying to deduplicate them? You’ll probably start to realize that fewer of your layouts are reusable than you thought, and that a few, thoughtful, custom layout components can handle all your needs. This is especially true when you Centralize your layouts into Layout Components (previous suggestion).

Another way to look at it: if you have to spend a couple hours learning a proprietary styling framework, wrestling with it, filing issues, etc., why not just spend that time on Flexbox and Grid instead? For many people, learning the basics only takes an hour, and that can get you pretty far! There are great, free, learning resources that are worth your time:

• Flexbox Froggy
• CSS Grid Garden

So in short: stop trying to deduplicate layouts when there’s nothing to deduplicate! You’ll find your styles not only easier to manage, but your CSS payloads much lighter, and load times faster.

💁 Why this works well in Astro: grid libraries are a quick path to stylesheet bloat, and a major contributor to people attempting to treeshake their styles. Astro does not treeshake unused CSS for you, because that can cause problems. We’re not saying you have to be library free; we’re big fans of libraries like Material UI. But if you can at least shed the thousands upon thousands of layouts you’re not using from your styling library, you probably don’t need automatic treeshaking.

Suggestion #3: Avoid margin on a component wrapper

In other words, don’t do this:

<!-- src/components/MyComponent.astro -->
<style lang="scss">
  .wrapper {
    /* ❌ Don’t do this! */
    margin-top: 3rem;
  }
</style>

<div class="wrapper"></div>

If you remember the CSS box model, margin extends beyond the boundarieso of the box. This means that when you place margin on the outermost element, now that will push other components next to it. Even though the styles are scoped, it’s technically affecting elements around it, so it breaks the concept of style containment.

When you have components that rearrage, or appear different when they’re next to other components, that’s a hard battle to win. Components should look and act the same no matter where they are placed. That’s what makes them components!

💁 Why this works well in Astro: margins pushing other components around creeps into your styling architecture in sneaky ways, and can result in the creation of some wonky or brittle layout components. Avoiding it altogether will keep your layout components simpler, and you’ll spend less time styling in general.

Suggestion #4: Avoid global media queries

The final point is a natural boundary of Scoped Styles. That extends to breakpoints, too! You know that one, weird breakpoint where your <Card /> component wraps awkardly at a certain size? You should handle that within <Card />, and not anywhere else.

Even if you end up with some random value like @media (min-width: 732px) {, that’ll probably work better than trying to create a global magic number somewhere that only applies to one context (an arbitrary value may be “magic” to the rest of an app, but it does still have meaning within the context of a component that needs that specific value).

Granted, this has been near-impossible to achieve until Container Queries; fortunately they are finally landing!

Also, a common complaint of this approach is when someone asks ”What if I have 2 components that need to do the same thing at the same breakpoint?” to which my answer is: you’ll always have one or two of those; just handle those as edge cases. But if your entire app is made up of dozens of these cases, perhaps your component lines could be redrawn so that they’re more layout-isolated in general.

💁 Why this works well in Astro: this is probably the least important point, which is why it’s saved for last. In fact, you could probably skip this if it doesn’t work for you. But it’s something that people try to architect for at scale, and having a global system to manage this can often be unnecessary. Give not architecting for global media queries a try, and see how far it takes you!

👓 Further Reading

This guide wouldn’t be possible without the following blog posts, which expand on these topics and explain them in more detail. Please give them a read!

• Layout-isolated Components by Emil Sjölander
• In defense of utility-first CSS by Sarah Dayan

Also please check out the Stylelint project to whip your styles into shape. You lint your JS, why not your CSS?