Перейти к содержимому

12. Tailwind CSS

Tailwind CSS — utility-first CSS фреймворк, позволяющий строить дизайн прямо в разметке с помощью готовых классов. В Astro его установка занимает одну команду.

Установка Tailwind

npx astro add tailwind

Команда автоматически:

Устанавливает @astrojs/tailwind и tailwindcss
Создаёт tailwind.config.mjs
Обновляет astro.config.mjs

Конфигурация

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

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

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        brand: '#FF5D01',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

Использование в .astro файлах

<html lang="ru">
  <head>
    <title>Мой сайт</title>
  </head>
  <body class="bg-slate-950 text-slate-200 min-h-screen font-sans">
    <header class="sticky top-0 bg-slate-900 border-b border-slate-800 px-6 py-4">
      <nav class="max-w-6xl mx-auto flex items-center justify-between">
        <span class="text-orange-500 font-bold text-xl">🚀 MyApp</span>
        <div class="flex gap-6 text-sm text-slate-400">
          <a href="/" class="hover:text-white transition-colors">Главная</a>
          <a href="/blog" class="hover:text-white transition-colors">Блог</a>
        </div>
      </nav>
    </header>

    <main class="max-w-4xl mx-auto px-6 py-12">
      <h1 class="text-4xl font-bold mb-4">Добро пожаловать</h1>
      <p class="text-slate-400 text-lg">Создан с помощью Astro и Tailwind CSS.</p>
    </main>
  </body>
</html>

Tailwind с React/Vue Islands

Tailwind классы работают внутри JSX/TSX без дополнительной настройки:

export default function Card({ title, description, tag }) {
  return (
    <div className="bg-slate-800 rounded-xl p-6 border border-slate-700 hover:border-orange-500 transition-colors">
      <span className="text-xs font-semibold text-orange-500 bg-orange-500/10 px-2 py-1 rounded-full">
        {tag}
      </span>
      <h3 className="text-slate-100 font-bold text-lg mt-3 mb-2">{title}</h3>
      <p className="text-slate-400 text-sm leading-relaxed">{description}</p>
    </div>
  );
}

Директива @apply

@apply позволяет создавать переиспользуемые классы из Tailwind утилит:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-lg
           font-semibold text-sm transition-all duration-200;
  }

  .btn-primary {
    @apply bg-orange-500 text-white hover:bg-orange-600 active:scale-95;
  }

  .btn-ghost {
    @apply text-slate-400 hover:text-white hover:bg-slate-800;
  }

  .card {
    @apply bg-slate-800 rounded-xl border border-slate-700 p-6;
  }
}

<button class="btn btn-primary">Отправить</button>
<button class="btn btn-ghost">Отмена</button>

Dark Mode с Tailwind

export default {
  darkMode: 'class', // или 'media'
  // ...
};

<body class="bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100">
  <div class="bg-slate-100 dark:bg-slate-800 p-4 rounded-lg">
    <h2 class="text-slate-800 dark:text-slate-100">Заголовок</h2>
    <p class="text-slate-600 dark:text-slate-400">Описание</p>
  </div>
</body>

Адаптивный дизайн

<!-- Mobile-first подход -->
<div class="
  grid
  grid-cols-1          <!-- Мобильный: 1 колонка -->
  md:grid-cols-2       <!-- Планшет: 2 колонки -->
  lg:grid-cols-3       <!-- Десктоп: 3 колонки -->
  gap-4
  md:gap-6
">
  <Card />
  <Card />
  <Card />
</div>

Интерактивный пример