Astro

Installation

pnpm

pnpm add -D tailwindcss-obfuscator

npm

npm install -D tailwindcss-obfuscator

yarn

yarn add -D tailwindcss-obfuscator

Configuration

Astro uses Vite, so use the Vite plugin:

// astro.config.mjs
import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import TailwindObfuscator from "tailwindcss-obfuscator/vite";

export default defineConfig({
  integrations: [tailwind()],
  vite: {
    plugins: [
      TailwindObfuscator({
        prefix: "tw-",
        verbose: true,
      }),
    ],
  },
});

Astro syntax

The plugin supports Astro-specific syntax:

class attribute

---
const title = 'Hello'
---

<div class="flex items-center bg-blue-500">
  <h1 class="text-xl font-bold">{title}</h1>
</div>

class:list directive

---
const isActive = true
---

<div class:list={[
  'flex items-center',
  { 'bg-blue-500': isActive },
  { 'bg-gray-500': !isActive }
]}>
  Content
</div>

With React / Vue / Svelte components

---
import ReactComponent from './ReactComponent.tsx'
import VueComponent from './VueComponent.vue'
---

<ReactComponent className="bg-blue-500 p-4" />
<VueComponent class="bg-red-500 p-4" />

Compatibility

Astro	Status
5.x	Stable
4.x	Stable

Full example

// astro.config.mjs
import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import react from "@astrojs/react";
import TailwindObfuscator from "tailwindcss-obfuscator/vite";

export default defineConfig({
  integrations: [tailwind(), react()],
  vite: {
    plugins: [
      TailwindObfuscator({
        prefix: "tw-",
        verbose: true,
        exclude: ["dark", "light", /^prose/],
        mapping: {
          enabled: true,
          file: ".tw-obfuscation/class-mapping.json",
        },
      }),
    ],
  },
});