Skip to content
Clameyes
Blog

Tailwind

2 posts with the tag “Tailwind”

Using Tailwind CSS with Astro Starlight

I tried using Tailwind CSS with Astro’s documentation template Starlight, so here’s a memo for future reference.

Adding Tailwind CSS

We’ll add Tailwind CSS to an existing Starlight project. (For new projects, see here)

  1. Add Astro’s Tailwind integration:

    Terminal window
    pnpm astro add @astrojs/tailwind

  2. Install Starlight’s Tailwind plugin:

    Terminal window
    pnpm add @astrojs/starlight-tailwind

  3. Create a CSS file for Tailwind’s base styles (e.g., src/styles/tailwind.css):

    src/styles/tailwind.css
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

  4. Update astro.config.mjs:

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

    export default defineConfig({
    integrations: [
        starlight({
        title: 'Documentation using Tailwind',
        customCss: [
            './src/styles/tailwind.css',
        ],
        }),
        tailwind({
        applyBaseStyles: false,
        }),
    ],
    });

  5. Add Starlight’s Tailwind plugin to tailwind.config.mjs:

    tailwind.config.mjs
    import starlightPlugin from '@astrojs/starlight-tailwind';
    

    /** @type {import('tailwindcss').Config} */
    export default {
    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    plugins: [starlightPlugin()],
    };

Styling Starlight using Tailwind

Starlight uses Tailwind’s theme configuration values in its UI.

As an example, here’s how to change the accent color used for links and other elements:

colors.accent: Used for links and highlighting the current item

We’ll use Tailwind’s color settings for this example.

To check colors, refer to the Tailwind CSS official website.

tailwind.config.mjs
import starlightPlugin from '@astrojs/starlight-tailwind';
import colors from 'tailwindcss/colors';


/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        accent: colors.red,
      },
    },
  },
  plugins: [starlightPlugin()],
};

When executed, the colors will change as follows:

Image from Gyazo

Creating a Custom Theme

Starlight’s color themes can be controlled by overriding custom properties.

Starlight provides a theme color editor.

You can access the theme color editor through the link below: