Free & Open Source

Add custom prefixes to Tailwind CSS classes

Instantly namespace your Tailwind CSS utility classes with a custom prefix. Perfect for avoiding conflicts in micro-frontends, design systems, WordPress plugins, and legacy codebases.

Inputclass="..."
Output

Why use Tailwind Prefixer?

When Tailwind's built-in prefix config isn't enough, this tool transforms your existing markup instantly.

HTML & JSX Support

Handles both class="..." for HTML templates and className="..." for React/JSX. Switch modes with one click.

Modifier-Aware

Intelligently preserves Tailwind modifiers like hover:, sm:, dark:, focus: while only prefixing the base utility class.

Real-Time Preview

See your prefixed output instantly as you type. No submit buttons, no waiting — just paste and get results.

Framework Agnostic

Works with React, Vue, Angular, Svelte, Astro, PHP, Laravel Blade, WordPress — any framework that uses Tailwind CSS.

Negative Values Preserved

Correctly handles negative utility classes like -mt-4, -translate-x-1/2 by preserving the negative sign before the prefix.

One-Click Copy

Copy the transformed result to your clipboard with a single click. Paste it directly into your codebase.

How it works

Three simple steps to prefix all your Tailwind classes.

1

Set your prefix

Enter any custom prefix like "tw-", "app-", or "my-project-". The default is "tw-".

2

Paste your code

Paste your HTML or JSX markup containing Tailwind CSS classes into the input panel.

3

Copy the result

Your prefixed code appears instantly in the output panel. Copy it with one click.

REST API

Prefixer API

Integrate the prefixer directly into your build pipeline, CI/CD, or any automation tool. Send a POST request and get your prefixed code back as JSON.

POST/api/prefix

Request body

ParameterTypeRequiredDescription
prefixstringYesThe prefix to add before each Tailwind class (e.g. "tw-")
textstringYesThe HTML or JSX code containing Tailwind classes to prefix
modestringNo"html" (default) for class="..." or "jsx" for className="..."
cURL Example
curl -X POST https://tailwind-prefixer.web.app/api/prefix \
  -H "Content-Type: application/json" \
  -d '{
    "prefix": "tw-",
    "text": "<div class=\"flex items-center p-4\">Hello</div>",
    "mode": "html"
  }'
Response200 OK
{
  "success": true,
  "prefix": "tw-",
  "mode": "html",
  "original": "<div class=\"flex items-center p-4\">Hello</div>",
  "result": "<div class=\"tw-flex tw-items-center tw-p-4\">Hello</div>"
}
JavaScript / Node.js
const response = await fetch("/api/prefix", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    prefix: "tw-",
    text: '<div class="flex items-center p-4">Hello</div>',
    mode: "html"   // or "jsx" for className
  })
});

const data = await response.json();
console.log(data.result);

Error responses

400

Missing or invalid prefix or text parameter, or malformed JSON body.

Common use cases

Micro-frontends

Avoid CSS conflicts between independently deployed apps.

WordPress Plugins

Prevent style collisions with other themes and plugins.

Design Systems

Namespace utilities for multi-brand design tokens.

Legacy Integration

Safely add Tailwind alongside existing CSS frameworks.

Component Libraries

Ship scoped styles that won't leak into consumer apps.

Email Templates

Prefix classes to avoid email client CSS overrides.