Skip to content

Astro Styling — CSS Strategies and Scoped Styles

DodaTech Updated 2026-06-28 4 min read

In this tutorial, you will learn about Astro Styling. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Astro styling: scoped CSS, global styles, Tailwind CSS integration, CSS modules, and best practices for styling Astro components.

In this lesson, you'll apply scoped styles in components, add global CSS, integrate Tailwind CSS, use CSS modules, and organize your styling for maintainability.

What You'll Learn

How scoped CSS works in Astro, add global stylesheets, install Tailwind CSS, use CSS modules with framework components, and organize styling.

Why It Matters

Good styling practices prevent CSS conflicts, reduce bundle size, and make your codebase maintainable as it grows.

Real-World Use

DodaTech uses Tailwind CSS for utility-first styling with Astro's scoped CSS for component-specific overrides, keeping styles predictable.

flowchart LR
    A[Styling Options] --> B[Scoped CSS]
    A --> C[Global CSS]
    A --> D[Tailwind]
    A --> E[CSS Modules]
    B --> F[Component-Scoped]
    D --> G[Utility Classes]
    style A fill:#ff5a03,color:#fff

Scoped CSS

Styles in .astro components are automatically scoped:

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

<article class="card">
  <slot />
</article>

Output: Astro adds a unique data attribute to the HTML elements and rewrites the CSS selectors. The styles only apply to this component, never leaking to other parts of the page.

Global CSS

Add global stylesheets in src/styles/:

/* src/styles/global.css */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

Import in your layout:

---
import "../styles/global.css";
---
<html>
  <body><slot /></body>
</html>

Output: The global CSS is inlined in the <head> of every page. No external CSS file request is needed.

Tailwind CSS

Install Tailwind:

npx astro add tailwind

This adds the Tailwind integration. Use utility classes directly in templates:

<article class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
  <h2 class="text-xl font-semibold text-gray-800">{title}</h2>
  <p class="text-gray-600 mt-2">{description}</p>
</article>

CSS Modules

Use CSS Modules with framework components:

/* src/components/Counter.module.css */
.wrapper {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.button {
  background: #0070f3;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
}

// src/components/Counter.tsx
import styles from "./Counter.module.css";

export default function Counter() {
  return (
    <div className={styles.wrapper}>
      <button className={styles.button}>Click me</button>
    </div>
  );
}

Output: CSS Modules generate unique class names, preventing conflicts with other components.

Conditional Styling

Use dynamic classes in Astro:

---
const isActive = true;
const theme = "dark";
---
<div class={`card ${isActive ? "active" : ""} theme-${theme}`}>
  Content
</div>

Common Mistakes

  1. Using scoped attribute: Astro scopes styles automatically. Adding scoped is unnecessary and may cause issues with older CSS parsers.
  2. Putting global styles in components: Global resets and base styles belong in a shared stylesheet, not duplicated across components.
  3. Overusing !important: Scoped styles already have specificity guarantees. Using !important makes overrides harder.
  4. Not using Tailwind's JIT in production: Tailwind purges unused styles in production. Ensure your content paths are configured correctly.
  5. Mixing Tailwind utility classes with custom CSS: Use one approach per component. Mixing both leads to confusion about which styles apply.

Practice Questions

  1. How does Astro scope CSS? Answer: Astro adds a unique data attribute to HTML elements and rewrites CSS selectors to only match elements with that attribute.

  2. How do you add global styles in Astro? Answer: Import a .css file in your layout component. The styles are inlined in the page <head>.

  3. What is the benefit of CSS Modules? Answer: They generate unique class names that prevent conflicts, useful for framework components where scoped styles aren't available.

  4. How do you install Tailwind CSS in Astro? Answer: Run npx astro add tailwind. It installs and configures the Tailwind integration.

Challenge

Style a documentation page using Tailwind for layout and spacing, with scoped CSS for component-specific card styles, and CSS Modules for a React search component.

Mini Project

Create a styled landing page with: a global CSS reset, Tailwind for the grid layout and typography, scoped styles for hero section cards, and CSS Modules for an interactive testimonial carousel component.

FAQ

Can I use Sass or Less in Astro?

: Yes. Install sass and use .scss files. Astro processes them automatically.

Do scoped styles increase bundle size?

: Marginally. The scoping adds data attributes and rewritten selectors, but the size increase is negligible.

Can I use CSS-in-JS with Astro?

: Yes. Styled-components and Emotion work with React islands in Astro. Use them only in framework components.

How do I share CSS variables across components?

: Define variables in a global stylesheet or use @property in a shared CSS file imported by your layout.

What's Next

Learn about Astro Integrations for extending Astro with official and community plugins.

← Previous Astro Fonts — Managing Typography and Font Optimization Next → Astro Integrations — Official and Community Plugins

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Astro