astro-tailwind-config-viewer

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 tailwindConfigViewer is called after @astrojs/tailwind:

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

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:

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. Defaults to "tailwind.config.mjs".

const configFile = "custom-tailwind.mjs"

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

endpoint

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

export default defineConfig({
  integrations: [
    tailwind(),
    tailwindConfigViewer({ endpoint: "/foo" }),
  ],
});

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.

export default defineConfig({
  integrations: [
    tailwind(),
    tailwindConfigViewer({ overlayMode: "/embed" }),
  ],
});

Contributing

This package is structured as a monorepo:

• playground contains code for testing the package
• package contains the actual package

Install dependencies using pnpm:

pnpm i --frozen-lockfile

Start the playground and package watcher:

pnpm dev

You can now edit files in package. Please note that making changes to those files may require restarting the playground dev server.

Licensing

MIT Licensed. Made with ❤️ by Florian Lefebvre.

Acknowledgements

• Tailwind config viewer
• Nuxt Tailwind module