astro-styling

Add a `<style>` block inside the `.astro` file and Astro automatically scopes it to the component using a unique data attribute. Use the `class:list` directive for conditional classes and `:global()` only when targeting child component elements.

Install `tailwindcss` and `@tailwindcss/vite`, add the Vite plugin to `astro.config.mjs`, and create a global.css with `@import "tailwindcss"`. Import that stylesheet once in your root layout; no tailwind.config.js or content globs are needed.

UnoCSS offers faster builds, smaller bundles, and configurable presets via `@unocss/astro`, while Tailwind has a larger ecosystem. Both use similar utility class syntax, so the choice depends on build performance needs versus ecosystem maturity.

Use CSS Modules (`.module.css`) for framework components like React, Vue, or Svelte co-located with Astro, since scoped `<style>` blocks only work in `.astro` files. CSS Modules also suit styles shared across frameworks.

Yes, install the `sass` package and add `lang="scss"` to the `<style>` tag in your `.astro` file. Vite handles compilation with no extra configuration, and you can organize partials with `@use` imports.

Place global styles in the root layout, either by importing a CSS file or using `<style is:global>`. Avoid `is:global` in regular components, and define design tokens as CSS custom properties on `:root` for theming and dark mode.