Documentation

Styling and Tailwind Customization

Customize colors, typography, and spacing with Tailwind.

Tailwind config

Update theme tokens in tailwind.config.cjs:

extend: {
  colors: {
    primary: {
      100: '#dd429d',
      200: '#b14bf4',
      300: '#485cfb'
    }
  }
}

Global styles

Global styles live in src/styles/global.css. Keep changes minimal and prefer Tailwind utilities in components.

Component styling

Use utility classes directly in Astro components. This keeps styles close to the markup and easy to maintain.