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:

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

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:

1pnpm astro add astro-tailwind-config-viewer

1npx astro add astro-tailwind-config-viewer

1yarn astro add astro-tailwind-config-viewer

Or install it manually:

1. Install the required dependencies

1pnpm add astro-tailwind-config-viewer

1npm install astro-tailwind-config-viewer

1yarn add astro-tailwind-config-viewer

2. Add the integration to your astro config

1+import tailwindConfigViewer from "astro-tailwind-config-viewer";
2
3export default defineConfig({
4  integrations: [
5    tailwind(),
6+    tailwindConfigViewer(),
7  ],
8});

Configuration

Here is the TypeScript type:

1type Options = {
2  configFile: string;
3  endpoint: string;
4  overlayMode: "embed" | "redirect";
5};

configFile

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

1const configFile = "custom-tailwind.mjs"
2
3export default defineConfig({
4  integrations: [
5    tailwind({ configFile }),
6    tailwindConfigViewer({ configFile }),
7  ],
8});

endpoint

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

1export default defineConfig({
2  integrations: [
3    tailwind(),
4    tailwindConfigViewer({ endpoint: "/foo" }),
5  ],
6});

overlayMode

The Dev Toolbar App has 2 modes:

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

1export default defineConfig({
2  integrations: [
3    tailwind(),
4    tailwindConfigViewer({ overlayMode: "/embed" }),
5  ],
6});

Contributing

This package is structured as a monorepo:

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

Install dependencies using pnpm:

1pnpm i --frozen-lockfile

Start the playground and package watcher:

1pnpm 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