@astrojs/starlight-tailwind

• 5.0.0

  Mar 11, 2026

  ✨ Major Changes

  • #3644 0d2e7ed Thanks @HiDeoo! - ⚠️ BREAKING CHANGE: The minimum supported version of Starlight is now 0.38.0

    Please use the @astrojs/upgrade command to upgrade your project:

    npx @astrojs/upgrade

• 4.0.2

  Oct 31, 2025

  🐞 Patch Changes

  • #3500 7700456 Thanks @delucis! - This is the first release published with OIDC trusted publishing.
• 4.0.1

  Apr 17, 2025

  🐞 Patch Changes

  • #3132 5959919 Thanks @HiDeoo! - Fixes an issue where all border styles were not reset by the Starlight’s Tailwind compatibility package like in Tailwind base styles.
• 4.0.0

  Apr 16, 2025

  ✨ Major Changes

  • #2322 f14eb0c Thanks @HiDeoo! - ⚠️ BREAKING CHANGE: The minimum supported version of Starlight is now 0.34.0

    Please use the @astrojs/upgrade command to upgrade your project:

    npx @astrojs/upgrade

  • #2322 f14eb0c Thanks @HiDeoo! - Adds support for Tailwind v4, drops support for Tailwind v3.

    ⚠️ BREAKING CHANGE: Tailwind v3 is no longer supported. Tailwind v4 support in Astro is now provided using a Vite plugin and the Astro Tailwind integration is no longer required.

    1. Remove the Astro Tailwind integration. The Astro Tailwind integration is no longer required with Tailwind v4.

       import { defineConfig } from "astro/config";
       import starlight from "@astrojs/starlight";
       import tailwind from "@astrojs/tailwind";
       
       export default defineConfig({
         integrations: [
           starlight({
             title: "Docs with Tailwind",
             customCss: ["./src/tailwind.css"],
           }),
           tailwind({ applyBaseStyles: false }),
         ],
       });

    2. Install Tailwind v4. Install the latest version of the tailwindcss and @tailwindcss/vite packages.

       Use the astro add tailwind command to install and configure both packages:

       npx astro add tailwind

    3. Update Tailwind base styles. Tailwind CSS base styles needs to be updated for Tailwind v4 and also to use Starlight Tailwind CSS.

       @tailwind base;
       @tailwind components;
       @tailwind utilities;
       @layer base, starlight, theme, components, utilities;
       
       @import '@astrojs/starlight-tailwind';
       @import 'tailwindcss/theme.css' layer(theme);
       @import 'tailwindcss/utilities.css' layer(utilities);
       
       @theme {
         /*
         Configure your Tailwind theme that will be used by Starlight.
         https://starlight.astro.build/guides/css-and-tailwind/#styling-starlight-with-tailwind
         */
       }
       
       /*
       Add additional Tailwind styles to this file:
       https://tailwindcss.com/docs/adding-custom-styles#using-custom-css
       */

    4. Update Tailwind customizations. If you previously customized your Tailwind theme configuration in the tailwind.config.mjs file, such customizations are now defined through CSS using the @theme block in your Tailwind base styles.

       1. Locate existing customizations in your tailwind.config.mjs file. The following example defines customizations for the accent colors, gray scale, and font families used by Starlight:

          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: {
                  // Custom accent colors.
                  accent: colors.fuchsia,
                  // Custom gray scale.
                  gray: colors.slate,
                },
                fontFamily: {
                  // Custom text font.
                  sans: ['"Atkinson Hyperlegible"'],
                  // Custom code font.
                  mono: ['"IBM Plex Mono"'],
                },
              },
            },
            plugins: [starlightPlugin()],
          };

       2. The above customizations can be migrated to the new @theme block in the file containing your Tailwind base styles as follows:

          @layer base, starlight, theme, components, utilities;
          
          @import '@astrojs/starlight-tailwind';
          @import 'tailwindcss/theme.css' layer(theme);
          @import 'tailwindcss/utilities.css' layer(utilities);
          
          @theme {
            /* Custom accent colors. */
            --color-accent-50: var(--color-fuchsia-50);
            --color-accent-100: var(--color-fuchsia-100);
            --color-accent-200: var(--color-fuchsia-200);
            --color-accent-300: var(--color-fuchsia-300);
            --color-accent-400: var(--color-fuchsia-400);
            --color-accent-500: var(--color-fuchsia-500);
            --color-accent-600: var(--color-fuchsia-600);
            --color-accent-700: var(--color-fuchsia-700);
            --color-accent-800: var(--color-fuchsia-800);
            --color-accent-900: var(--color-fuchsia-900);
            --color-accent-950: var(--color-fuchsia-950);
            /* Custom gray scale. */
            --color-gray-50: var(--color-slate-50);
            --color-gray-100: var(--color-slate-100);
            --color-gray-200: var(--color-slate-200);
            --color-gray-300: var(--color-slate-300);
            --color-gray-400: var(--color-slate-400);
            --color-gray-500: var(--color-slate-500);
            --color-gray-600: var(--color-slate-600);
            --color-gray-700: var(--color-slate-700);
            --color-gray-800: var(--color-slate-800);
            --color-gray-900: var(--color-slate-900);
            --color-gray-950: var(--color-slate-950);
            /* Custom text font. */
            --font-sans: 'Atkinson Hyperlegible';
            /* Custom code font. */
            --font-mono: 'IBM Plex Mono';
          }

    We recommend checking your site’s appearance when upgrading to make sure there are no style regressions caused by this change.

    For full details about upgrading from Tailwind v3 to v4, see the official upgrade guide.

• 3.0.1

  Mar 21, 2025

  🐞 Patch Changes

  • #2991 b8a4800 Thanks @florian-lefebvre! - Adds support for @astrojs/tailwind v6
• 3.0.0

  Dec 13, 2024

  ✨ Major Changes

  • #2612 8d5a4e8 Thanks @HiDeoo! - ⚠️ BREAKING CHANGE: The minimum supported version of Starlight is now 0.30.0

    Please use the @astrojs/upgrade command to upgrade your project:

    npx @astrojs/upgrade

  🐞 Patch Changes

  • #2664 62ff007 Thanks @HiDeoo! - Publishes provenance containing verifiable data to link a package back to its source repository and the specific build instructions used to publish it.
• 2.0.3

  May 21, 2024

  🐞 Patch Changes

  • #1906 b079ae11 Thanks @delucis! - Fixes default font-family in non-Starlight pages when using Tailwind plugin
• 2.0.2

  Apr 9, 2024

  🐞 Patch Changes

  • #1726 1aae51ac Thanks @delucis! - Adds warning log if a user tries to set colors.white in their Tailwind theme config with an object instead of a string.
• 2.0.1

  Nov 1, 2023

  🐞 Patch Changes

  • #903 232f512 Thanks @torn4dom4n! - Show tailwind.config.mjs file in docs
• 2.0.0

  Sep 1, 2023

  ✨ Major Changes

  • #615 7b75b3e Thanks @delucis! - Bump minimum required Astro version to 3.0

    ⚠️ BREAKING CHANGE Astro v2 is no longer supported. Make sure you update Astro, Starlight, and any other integrations at the same time as updating the Tailwind plugin.

• 1.0.2

  Aug 29, 2023

  🐞 Patch Changes

  • #529 c2d0e7f Thanks @delucis! - Log warning if Tailwind prefix is set to “sl-”
• 1.0.1

  Aug 14, 2023

  🐞 Patch Changes

  • #503 c81b158 Thanks @delucis! - Loosen @astrojs/starlight peer dependency range to allow higher minor versions.

  • Updated dependencies [5e3133c, fcff49e, 3c87a16, cd28392, d8669b8]:

    • @astrojs/starlight@0.7.2
• 1.0.0

  Aug 10, 2023

  🍿 Minor Changes

  • #337 555826d Thanks @delucis! - Add Tailwind plugin

  🐞 Patch Changes

  • Updated dependencies [2e0fb90, 0119a49, d076aec, 73eb5e6, 461a5d5, 06a205e, 6a7692a]:
    • @astrojs/starlight@0.7.0