tailwind-type-generator

tailwind-type-generator

Simply exports type declaration file of Tailwind CSS classnames.

---

This library just exports tailwind.d.ts from tailwind.config.js .

It has TailwindClassNames type that lists Tailwind CSS class names.

Install

npm install --save-dev tailwind-type-generator

# peerDependencies
npm install --save tailwindcss

Usage

Example project is ./example.

Fist, export tailwind.d.ts .

npx tailwind-type-generator

Then create utility function and call from components.

lib/tailwind.ts

// lib/tailwind.ts
type TailwindReturnType = "__TAILWIND";
type TailwindParamType = TailwindClassNames | TailwindReturnType;

export const tailwind = (...classNames: TailwindParamType[]) => {
  return classNames.join(" ") as TailwindReturnType;
};
export const tw = tailwind;

// component.tsx
import { tailwind, tw } from "./lib/tailwind";

const textStyle = tailwind("text-white", "text-xl");

export default function () {
  <div classNames={tw("bg-black", "w-full", "h-full", textStyle)} />;
}