Astro-tailwind-config-viewer NPM

`astro-tailwind-config-viewer`

This is an Astro integration that injects a route and a Dev Toolbar App in development for tailwind-config-viewer.

Usage

Prerequisites

Although @astrojs/tailwind is not technically required, I don't see why you'd use this integration with it. Make sure that astroTailwindConfigViewer is called after @astrojs/tailwind:

export default defineConfig({
  integrations: [tailwind(), astroTailwindConfigViewer()],
});

This integration only works with Astro 4 and above, and requires at least tailwindcss 3.0.

Installation

Install the integration automatically using the Astro CLI:

pnpm astro add astro-tailwind-config-viewer

npx astro add astro-tailwind-config-viewer

yarn astro add astro-tailwind-config-viewer

Or install it manually:

Install the required dependencies

pnpm add astro-tailwind-config-viewer

npm install astro-tailwind-config-viewer

yarn add astro-tailwind-config-viewer

Add the integration to your astro config

+import tailwindConfigViewer from "astro-tailwind-config-viewer";

export default defineConfig({
  integrations: [
    tailwind(),
+    tailwindConfigViewer(),
  ],
});

Configuration

Here is the TypeScript type:

export type Options = {
  configFile: string;
  endpoint: string;
  overlayMode: "embed" | "redirect";
};

`configFile`

This option is really important. The value needs to be the same as @astrojs/tailwind configFile option.

Why do I need to duplicate this option?
This is a current limitation of Astro. An integration cannot access options or data from another integration. However, there is a proposal for it on the Astro roadmap: upvote it! Link to proposal

`endpoint`

By default, the config viewer is injected at /_tailwind. Setting this option will allow you to change it.

`overlayMode`

The Dev Toolbar App has 2 modes:

redirect (default): clicking on the app icon will open the viewer in a new tab
embed: clicking the app icon will show a panel with an embedded viewer. Note that the viewer is still accessible at the endpoint.