Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/withastro/docs/llms.txt

Use this file to discover all available pages before exploring further.

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

Build docs developers (and LLMs) love

Get started for freeTalk to us