tx

Simple and useful utility for Tailwind CSS.

Installation

npm

Rollup

npm i -D @mkx419/tx @mkx419/rollup-plugin-tx

Vite

npm i -D @mkx419/tx @mkx419/vite-plugin-tx

pnpm

Rollup

pnpm add -D @mkx419/tx @mkx419/rollup-plugin-tx

Vite

pnpm add -D @mkx419/tx @mkx419/vite-plugin-tx

Setup

Rollup

// rollup.config.js
import { txPlugin } from "@mkx419/rollup-plugin-tx";

export default {
  plugins: [txPlugin()],
};

Vite

// vite.config.ts
import { txPlugin } from "@mkx419/vite-plugin-tx";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [txPlugin()],
});

VSCode

{
  "tailwindCSS.experimental.classRegex": [["t[xmv]\\(([^)]*)\\)", "[\"'`]([^\"'`]*)[\"'`]"]]
}

Usage

tx

import { tx } from "@mkx419/tx";

tx("bg-black", "text-white", true && "font-bold");

to

`bg-black text-white${true ? ` ${"font-bold"}` : ""}`;

tm

import { tx } from "@mkx419/tx";

tm("hover:", tx("bg-black", "text-white"));

to

"hover:bg-black hover:text-white";

tv

import { tv } from "@mkx419/tx";

const size = tv({
  sm: "h-4",
  md: "h-6",
  lg: "h-8",
});

size("sm");

to

import { tv } from "@mkx419/tx";

const size = tv({
  sm: "h-4",
  md: "h-6",
  lg: "h-8",
});

size("sm");