astro-tailwind-config-viewer
v2.0.1
Published
Explore your Tailwind config visually directly in your browser while developing.
Downloads
204
Maintainers
Readme
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 tabembed
: clicking the app icon will show a panel with an embedded viewer. Note that the viewer is still accessible at theendpoint
.
export default defineConfig({
integrations: [
tailwind(),
tailwindConfigViewer({ overlayMode: "/embed" }),
],
});
Contributing
This package is structured as a monorepo:
playground
contains code for testing the packagepackage
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.