--- description: Styling concepts and approaches in Astro projects. globs: /src/**/*.astro,/src/**/*.css,/src/**/*.scss,/src/**/*.less,/src/styles/**/*.css alwaysApply: true --- # Styling in Astro Projects Astro offers a flexible approach to styling, allowing you to use familiar CSS techniques while providing powerful features like scoped styles and easy integration with modern tools. ## 1. Scoped Styles (` ``` Astro achieves scoping by adding a unique hash attribute to the elements (e.g., `data-astro-cid-XXXX`) and modifying selectors. ## 2. Global Styles You have several options for applying global styles across your Astro project: ### a. Global CSS Files - Create one or more CSS files (e.g., `src/styles/global.css`). - Import them into a common layout component or directly into individual pages/components where global styling is needed. ```astro --- // src/layouts/BaseLayout.astro import '../styles/global.css'; // Import the global stylesheet --- ... ``` This is the most common method for global styles like CSS resets, typography, and global theme variables. ### b. ` ``` This is useful for quick global overrides or for styles that must target elements outside of Astro components (e.g., elements injected by third-party scripts). ## 3. CSS Variables (Custom Properties) for Theming CSS variables are excellent for theming and dynamic styling in Astro. - **Define globally**: Typically in your global CSS file or a root layout. ```css /* src/styles/global.css */ :root { --primary-color: #007bff; --secondary-color: #6c757d; --text-color: #212529; --font-family-base: 'Arial', sans-serif; } [data-theme='dark'] { --primary-color: #0056b3; --text-color: #e0e0e0; /* ... other dark theme variables */ } ``` - **Use in components**: ```astro
Hello Theming!
``` You can switch themes by changing the `data-theme` attribute on the `` or `` element. ## 4. Sass/SCSS Integration Astro has built-in support for Sass/SCSS. 1. **Installation**: ```bash npm install -D sass ``` 2. **Usage**: - Use `.scss` or `.sass` file extensions for your stylesheets. - Import them directly into Astro components or layouts. - Use `lang="scss"` in ` ``` No additional Vite configuration is usually needed for basic Sass usage. ## 5. PostCSS Astro uses Vite, which has built-in PostCSS support. 1. **Installation**: Install PostCSS and any plugins (e.g., Autoprefixer). ```bash npm install -D postcss autoprefixer ``` 2. **Configuration**: Create a `postcss.config.cjs` (or `.js`) file in your project root. ```javascript // postcss.config.cjs module.exports = { plugins: { autoprefixer: {}, // other PostCSS plugins... }, }; ``` Astro/Vite will automatically apply these PostCSS transformations. ## 6. Tailwind CSS Integration Tailwind CSS is a popular choice for Astro projects. 1. **Installation & Setup**: - Run `npx astro add tailwind` for guided setup, or manually install `tailwindcss`, `postcss`, `autoprefixer`. - This will create `tailwind.config.cjs` and update `postcss.config.cjs`. - Configure `tailwind.config.cjs` (especially the `content` array to include your Astro and UI framework component files). ```javascript // tailwind.config.cjs module.exports = { content: [ './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}', ], // ... }; ``` - Ensure Tailwind's directives are in a global CSS file (e.g., `src/styles/tailwind.css`) imported into your main layout. ```css /* src/styles/tailwind.css */ @tailwind base; @tailwind components; @tailwind utilities; ``` 2. **Usage**: Use Tailwind utility classes directly in your Astro components or any UI framework components. ```astro

Hello Tailwind in Astro!

``` ## Styling UI Framework Components When using UI frameworks (React, Svelte, Vue, etc.) within Astro: - Styles defined in the UI framework component itself (e.g., a Svelte component's `