Skip to main content
Astro makes styling easy. Write CSS directly in components, import stylesheets, or use your favorite CSS framework like Tailwind.

​
Scoped Styles

Add a <style> tag to any .astro component for automatic CSS scoping: 
<style>
  h1 { color: red; }
  .text { color: blue; }
</style>
Scoped styles are compiled with unique attributes and only apply to that component: 
<style>
  h1[data-astro-cid-hhnqfkh6] {
    color: red;
  }
</style>
Scoped styles don’t leak to child components. To style children, wrap them in a container you can target.

​
Global Styles

Opt out of scoping with is:global: 
<style is:global>
  h1 { color: red; }
</style>
Mix global and scoped styles using :global(): 
<style>
  h1 { color: red; } /* scoped */
  article :global(h1) { color: blue; } /* applies to child h1s */
</style>

​
Dynamic Classes

Use class:list for conditional classes: 
---
const { isRed } = Astro.props;
---
<div class:list={['box', { red: isRed }]}>
  <slot />
</div>

<style>
  .box { border: 1px solid blue; }
  .red { border-color: red; }
</style>

​
CSS Variables

Pass variables from frontmatter with define:vars: 
---
const foregroundColor = "rgb(221 243 228)";
const backgroundColor = "rgb(24 121 78)";
---
<style define:vars={{ foregroundColor, backgroundColor }}>
  h1 {
    background-color: var(--backgroundColor);
    color: var(--foregroundColor);
  }
</style>
<h1>Hello</h1>

​
Passing Classes to Children

Accept and apply a class prop in child components: 
---
const { class: className, ...rest } = Astro.props;
---
<div class={className} {...rest}>
  <slot/>
</div>
Use it in parent components: 
<style>
  .red { color: red; }
</style>
<MyComponent class="red">This will be red!</MyComponent>

​
External Stylesheets

​
Import Local Stylesheets

Import CSS files in your component frontmatter: 
---
import '../styles/utils.css';
---
<html><!-- Your page --></html>

​
Import from npm Packages

Import stylesheets from npm packages: 
---
import 'package-name/styles.css';
---
If the package doesn’t use file extensions, configure Vite: 
// astro.config.mjs
export default defineConfig({
  vite: {
    ssr: {
      noExternal: ['package-name'],
    }
  }
});
Load stylesheets from public/ or external URLs: 
<head>
  <link rel="stylesheet" href="/styles/global.css" />
  <link rel="stylesheet" href="https://cdn.example.com/style.css" />
</head>

​
CSS Cascade Order

CSS is evaluated in this order:
  1. <link> tags (lowest precedence)
  2. Imported styles
  3. Scoped styles (highest precedence)
Scoped styles always come last but may be overridden by more specific selectors from imports.

​
Tailwind CSS

​
Add Tailwind 4

Install Tailwind using the Astro CLI: 
npx astro add tailwind
Import Tailwind in your CSS: 
/* src/styles/global.css */
@import "tailwindcss";
Then import this file in your layout: 
---
import "../styles/global.css";
---

​
Upgrade from Tailwind 3

  1. Add Tailwind 4 support via CLI or manual installation
  2. Uninstall the old integration: 
    npm uninstall @astrojs/tailwind
  3. Remove from config: 
    // Remove this line
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  integrations: [], // Remove tailwind()
});

​
CSS Preprocessors

Astro supports Sass, Stylus, and Less via Vite.

​
Sass

npm install sass
Use in components: 
<style lang="scss">
  $color: red;
  h1 { color: $color; }
</style>

​
Stylus

npm install stylus

<style lang="stylus">
  color = red
  h1
    color: color
</style>

​
Less

npm install less

<style lang="less">
  @color: red;
  h1 { color: @color; }
</style>

​
LightningCSS

npm install lightningcss
Configure in astro.config.mjs: 
export default defineConfig({
  vite: {
    css: {
      transformer: "lightningcss",
    },
  },
});

​
PostCSS

Create a postcss.config.cjs file: 
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano'),
  ],
};

​
Framework Styles

​
React / Preact

import './global.css';
import Styles from './styles.module.css';

​
Vue

<style lang="scss" scoped>
  h1 { color: red; }
</style>

​
Svelte

<style lang="scss">
  h1 { color: red; }
</style>

​
Markdown Styling

Style Markdown by:
  • Adding imported stylesheets to your layout
  • Using <style is:global> in the layout
  • Adding CSS integrations like Tailwind with the typography plugin

​
Production Builds

​
Bundle Control

Astro minifies and bundles CSS automatically. Shared CSS is split into chunks for reuse. Styles above 4kB are linked, smaller ones are inlined. Configure the inline threshold: 
export default defineConfig({
  vite: {
    build: {
      assetsInlineLimit: 1024,
    }
  },
});
Control stylesheet inlining: 
export default defineConfig({
  build: {
    inlineStylesheets: 'never' // or 'always'
  }
});

​
Advanced Imports

​
Raw CSS

Import CSS as a string: 
---
import rawStyles from '../styles/main.css?raw';
---
<style is:inline set:html={rawStyles}></style>

​
URL References

Get a direct URL to a CSS file: 
---
import stylesUrl from '../styles/main.css?url';
---
<link rel="stylesheet" href={stylesUrl}>