💅 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 (`.astro`)	✅	✅	N/A¹
React / Preact	✅	❌	✅
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)

🖍 Styling by Framework

Astro

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).

<!-- astro/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:

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">

🦊 Autoprefixer

We also automatically add browser prefixes using Autoprefixer. By default, Astro loads the default values, 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', './astro/**/*.{astro,js,jsx,ts,tsx,vue}'],
  // more options here
};

Then add Tailwind utilities to any Astro component that needs it:

<style>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

You should see Tailwind styles compile successfully in Astro.

💁 Tip: to reduce duplication, try loading @tailwind base from a parent page (./pages/*.astro) instead of the component itself.

4.4 KiB Raw Blame History Unescape Escape