Typed Tailwind

Typed Tailwind is a code-generation tool that turns a Tailwind CSS config into a TypeScript class of chainable, type-checked utility methods for building className strings.

What is Typed Tailwind?

Typed Tailwind is a developer tool that brings static typing to Tailwind CSS. It takes your Tailwind configuration file as input and generates a single TypeScript file containing a class whose methods correspond to every utility class in your config. This generated file can be imported into any TypeScript project, and its methods enforce valid utility names at compile time — catching typos and undefined colors before your code runs. The project is MIT-licensed, hosted on GitHub as dvkndn/typed-tailwind.thien.do, and was created by Thien Do (dvkndn). The project is now archived, with the author recommending stitchesjs/stitches for those looking for a maintained alternative.

Key Features

• Type-safe utility classes — Each utility from your Tailwind config becomes a method, so invalid class names are compile-time errors rather than silent runtime misses.
• Chainable API — Methods can be chained like Tw().textBlue().fontBold().$() to combine multiple utilities; the $() method returns the final className string.
• Config-driven generation — The generated file is built entirely from your own Tailwind config, meaning custom colors, fonts, and breakpoints become available as methods automatically.
• Editor integration — Because the generated file is plain TypeScript, editors provide full auto-completion, hover documentation, and inline error highlighting for styling code.
• Webpack loader — A companion typed-tailwind-loader resolves all Tw()...$() calls at compile time, eliminating runtime overhead and producing static class strings that work with PurgeCSS.
• Works with popular frameworks — Examples are provided for Create React App, Next.js, and any Webpack-based build; runtime usage requires no build configuration at all.
• Customizable output — The generated source file is meant to be checked into version control, so developers can add custom methods, reformat it, or modify it directly.
• PurgeCSS compatible — With the webpack loader, class names are extracted statically, so PurgeCSS can remove unused utilities.

Who is it for?

Typed Tailwind targets TypeScript developers who use Tailwind CSS and want to extend their type safety from logic into styling. It is particularly useful for:

• React and Next.js developers — who want compile-time validation of Tailwind class names in JSX and reduce runtime errors in large component libraries.
• Design-system maintainers — who can use the generated class to define constrained, typed styling APIs for shared UI components.
• Teams using strict TypeScript — who can enforce that only defined theme values are used, preventing drift between the config and components.
• Developers optimizing bundle size — who can adopt the Webpack loader to statically extract class names and keep the runtime bundle small.

How does Typed Tailwind work?

The workflow is a four-step process. First, go to typed-tailwind.thien.do (or typed-tailwind.com if .tw is inaccessible) and paste your Tailwind configuration into the first panel. Second, save the TypeScript file shown in the second panel into your codebase. Third, import the Tw function from that file. Finally, chain utility methods and end with $() to produce the className string, e.g. Tw().textBlue().fontBold().$(). For compile-time transformation, install the webpack loader and configure it in your build.

What can you do with Typed Tailwind?

• Catch invalid class names at compile time — Instead of discovering a missing text-blud class at runtime, TypeScript reports the error during development.
• Enable safe automated refactoring — Since utility names are typed, IDE rename and find-references tools work across your styling code.
• Build a reusable style API — Combine the generated class with a custom wrapper to expose only approved design tokens to your team.
• Minify Tailwind output safely — With the webpack loader, you get static class strings that PurgeCSS can analyze, reducing the final CSS bundle.

FAQ

Where should I put the generated file?

Place it somewhere you can import it with absolute paths, e.g. src/tw/index.ts in a CRA project with baseUrl set to src. Then import the Tw function as import { Tw } from "tw".

Does Typed Tailwind work without TypeScript?

Yes. You can compile the generated file to JavaScript with tsc --declaration style.ts. You still get code completion via the declaration file, but you lose compile-time type checking of utility names.

Does it work with PurgeCSS?

Yes, if you use the webpack loader. The loader resolves Tw()...$() calls during the build, producing plain class strings that PurgeCSS can scan. Without the loader, runtime generation prevents PurgeCSS from seeing the class names.

Does it work with custom Tailwind plugins?

It's not officially supported, but plugins defined as inline anonymous functions may work. You can always extend the generated class manually with custom methods.

Is there any performance issue?

At runtime, styling is applied by looking up and concatenating class names on every render, which adds overhead. Using the webpack loader moves this work to compile time and eliminates that issue. If you can't modify the build config, hoist the Tw() call outside the component so it runs once at startup.

Alternatives

• re-tailwind — Tailwind CSS bindings for ReasonML, a different language and ecosystem.
• stitchesjs/stitches — the archived project's README points to this as the recommended modern alternative for typed styling.