# astro-tailwind-config-viewer

> Explore your Tailwind config visually directly in your browser while developing.

Latest version **2.0.2** (published 2025-10-20) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install astro-tailwind-config-viewer
pnpm add astro-tailwind-config-viewer
yarn add astro-tailwind-config-viewer
bun add astro-tailwind-config-viewer
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2025-10-20 |
| First published | 2024-01-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 4 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 15 |
| Author | florian-lefebvre |
| Maintainers | florian-lefebvre |
| Keywords | astro-integration, astro-component, withastro, astro, devtools |

## Links

- npm: https://www.npmjs.com/package/astro-tailwind-config-viewer
- Repository: https://github.com/florian-lefebvre/astro-tailwind-config-viewer
- Homepage: https://github.com/florian-lefebvre/astro-tailwind-config-viewer#readme
- Issues: https://github.com/florian-lefebvre/astro-tailwind-config-viewer/issues
- npm.io page: https://npm.io/package/astro-tailwind-config-viewer

## Dependencies (4)

- [ufo](https://npm.io/package/ufo.md) ^1.5.3
- [serve-static](https://npm.io/package/serve-static.md) ^1.15.0
- [astro-integration-kit](https://npm.io/package/astro-integration-kit.md) ^0.13.2
- [tailwind-config-viewer](https://npm.io/package/tailwind-config-viewer.md) ^2.0.2

## Recent versions

- 2.0.2 (latest) — 2025-10-20
- 2.0.1 — 2024-05-15
- 2.0.0 — 2024-05-14
- 1.0.3 — 2024-02-13
- 1.0.2 — 2024-01-22
- 1.0.1 — 2024-01-21
- 1.0.0 — 2024-01-15
- 0.0.4 — 2024-01-15
- 0.0.3 — 2024-01-15
- 0.0.2 — 2024-01-15
- 0.0.1 — 2024-01-15

## README

# `astro-tailwind-config-viewer`

This is an [Astro integration](https://docs.astro.build/en/guides/integrations-guide/) that injects a route and a Dev Toolbar App in development for [`tailwind-config-viewer`](https://github.com/rogden/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`:

```ts
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:

```bash
pnpm astro add astro-tailwind-config-viewer
```

```bash
npx astro add astro-tailwind-config-viewer
```

```bash
yarn astro add astro-tailwind-config-viewer
```

Or install it **manually**:

1. Install the required dependencies

```bash
pnpm add astro-tailwind-config-viewer
```

```bash
npm install astro-tailwind-config-viewer
```

```bash
yarn add astro-tailwind-config-viewer
```

2. Add the integration to your astro config

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

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

### Configuration

Here is the TypeScript type:

```ts
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`](https://docs.astro.build/en/guides/integrations-guide/tailwind/#configfile). Defaults to `"tailwind.config.mjs"`.

```js
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.

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

#### `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`.

```js
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: 

```bash
pnpm i --frozen-lockfile
```

Start the playground and package watcher:

```bash
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](https://github.com/florian-lefebvre/astro-tailwind-config-viewer/blob/main/LICENSE). Made with ❤️ by [Florian Lefebvre](https://github.com/florian-lefebvre).

## Acknowledgements

- [Tailwind config viewer](https://github.com/rogden/tailwind-config-viewer)
- [Nuxt Tailwind module](https://github.com/nuxt-modules/tailwindcss)

---
_Source: https://npm.io/package/astro-tailwind-config-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._