help again

[noble sluice]

how do i setup tailwind css on astro starlight black theme?

[scarlet wharf]

Hi @noble sluice. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To set up Tailwind CSS on an Astro Starlight site using the Starlight Black theme, follow these steps:

1. Create a Starlight Project (if you haven't already):
   You can start with a basic Starlight project:

   npm create astro@latest -- --template starlight
   

   Or, if you want Tailwind pre-configured:

   npm create astro@latest -- --template starlight/tailwind
   

   Getting Started

2. Add Tailwind CSS to Your Project:
   If you didn't use the Tailwind template, add Tailwind manually:

   npx astro add tailwind
   

   Starlight Tailwind CSS Guide

3. Install Starlight’s Tailwind Compatibility Package:

   npm install @astrojs/starlight-tailwind
   

4. Update Your Global CSS:
   Replace the contents of src/styles/global.css with:

   @layer base, starlight, theme, components, utilities;
   @import '@astrojs/starlight-tailwind';
   @import 'tailwindcss/theme.css' layer(theme);
   @import 'tailwindcss/utilities.css' layer(utilities);
   

   Styling Starlight with Tailwind

5. Configure Starlight to Use Your Tailwind CSS:
   In your astro.config.mjs, ensure your customCss array includes your Tailwind CSS file:

   import { defineConfig } from 'astro/config';
   import starlight from '@astrojs/starlight';
   import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
integrations: [
starlight({
title: 'Docs with Tailwind',
customCss: [
'./src/styles/global.css',
],
}),
],
vite: { plugins: [tailwindcss()] },
});

[Starlight Tailwind CSS Guide](<https://starlight.astro.build/guides/css-and-tailwind/#add-tailwind-to-an-existing-project>)

6. **Install and Apply the Starlight Black Theme:**
- Visit the [Starlight Black Theme page](<https://starlight-theme-black.vercel.app/>) for installation instructions.
- Typically, you’ll install the theme as a package and add its CSS to your `customCss` array, or follow the theme’s documentation for any additional steps.

**Note:** The knowledge sources do not provide the exact npm install command or configuration for the Starlight Black theme, so please refer to the theme’s own documentation for the final integration step.

Once these steps are complete, your Starlight site will use Tailwind CSS and the Starlight Black theme together.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------