Styling & Theming

Learn how to make your Astro site beautiful with various styling approaches.

Styling Options

Astro supports multiple styling approaches:

1. Scoped CSS - Component-level styles
2. Global CSS - Site-wide styles
3. CSS Frameworks - Tailwind, Bootstrap, etc.
4. CSS-in-JS - Styled Components, Emotion
5. CSS Preprocessors - Sass, Less, Stylus

Scoped Styles

Add styles directly in your .astro components:

---
// Component script
---

<div class="card">
  <h2>My Card</h2>
  <p>Some content here</p>
</div>

<style>
  .card {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
  
  h2 {
    color: #333;
    margin-bottom: 0.5rem;
  }
</style>

Global Styles

Import global styles in your layout:

---
import '../styles/global.css';
---

Using Tailwind CSS

Tailwind is popular with Astro. Install it with:

npx astro add tailwind

pnpm astro add tailwind

yarn astro add tailwind

Then use utility classes:

<div class="bg-white rounded-lg shadow-md p-6">
  <h2 class="text-2xl font-bold text-gray-900">Hello</h2>
  <p class="text-gray-600 mt-2">Welcome to Tailwind!</p>
</div>

CSS Variables for Theming

Create a theming system with CSS variables:

:root {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --color-text: #1f2937;
  --color-bg: #ffffff;
  --spacing-unit: 1rem;
}

[data-theme="dark"] {
  --color-text: #f9fafb;
  --color-bg: #1f2937;
}

Responsive Design

Use media queries or Tailwind’s responsive utilities:

<div class="w-full md:w-1/2 lg:w-1/3">
  <p>Responsive content</p>
</div>

<style>
  @media (min-width: 768px) {
    .container {
      max-width: 720px;
    }
  }
</style>

Next Steps

In the final chapter, we’ll cover deployment and optimization strategies to get your Astro site live and performing at its best.