Стили

CSS в Astro пишут прямо в компоненте, в теге <style>. Такие стили изолированы: они действуют только на разметку этого компонента и не задевают остальные страницы. Для правил на весь сайт используют общий CSS-файл.

Стили компонента

Добавьте тег <style> в конец src/components/PostCard.astro:

---
const { title, url } = Astro.props;
---
 
<article>
  <h2><a href={url}>{title}</a></h2>
</article>
 
<style>
  article {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
  h2 {
    font-size: 1.25rem;
  }
</style>

Откройте /posts — карточки получат рамку. Заголовки h2 на других страницах не изменятся: Astro добавляет элементам компонента особый атрибут и переписывает селекторы под него. Писать уникальные имена классов не нужно.

Общий CSS-файл

Правила для всего сайта — шрифт, цвета, отступы — кладут в отдельный файл. Создайте src/styles/global.css:

/* src/styles/global.css */
body {
  max-width: 720px;
  margin: 0 auto;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

Импортируйте его во фронтматтере макета src/layouts/BaseLayout.astro:

---
import '../styles/global.css';
import Header from '../components/Header.astro';
---

Стили применятся ко всем страницам, которые используют этот макет. При сборке Astro объединит и сожмёт CSS.

Глобальные правила в компоненте

Иногда нужно оформить разметку, которую компонент не создаёт сам, например HTML статьи из Markdown. Для этого есть :global():

<style>
  .content :global(p) {
    margin-bottom: 1rem;
  }
</style>

Правило подействует на любые абзацы внутри элемента с классом content этого компонента.

Классы по условию

Директива class:list собирает атрибут class из массива и объекта:

---
const { title, isDraft = false } = Astro.props;
---
 
<article class:list={['card', { draft: isDraft }]}>{title}</article>

Если isDraft равно true, элемент получит классы card draft, иначе только card.

Tailwind

Tailwind CSS — набор готовых служебных классов. Его подключают одной командой:

npx astro add tailwind

Команда установит пакеты и обновит настройки. В Astro 5 с Tailwind 4 она также создаёт src/styles/global.css со строкой @import "tailwindcss"; — этот файл нужно импортировать в макете. После этого в разметке работают классы вроде class="text-xl font-bold".

Частая ошибка

Стили пишут в <style> макета и ждут, что они оформят разметку страниц или вложенных компонентов. Изолированные стили действуют только на теги, написанные в самом файле. Общие правила кладите в global.css, а стили компонента — в его собственный <style>.