twg

A utility function for grouping Tailwind CSS variants.

A more elegant way of writing Tailwind classes. Never need to repeating the same variants over and over again.

---

📍 Entry point	📦 Bundle	📦 Gzip
twg	732 B	413 B
twg/transform	3676 B	1497 B

---

Features

• Support for normal strings.
• Support for multiple objects parsing.
• Support for nesting multiple objects, arrays, and itself functions.
• Support for (multiple) conditional classes, objects, and arrays.
• Customizable callee name and separator.
• Compatible with wrappers like twMerge.
• "Base" support for Tailwind CSS IntelliSense (IDEs extension), as well as Hover Preview.
• Tree-shaking friendly.

---

Support

Framework	Version
tailwindcss	3.x

Note

Tailwind CSS v4 is not supported. Because they removed content.transform API. Currently, there is no way to intervene before Tailwind scans the classes.

---

Table of contents

• Quick intro
• Getting started
• More on docs
• Changelog
• Contributing
• Credits

---

Quick intro

Example:

<div
  className={twg("size-92 relative grid place-items-center", {
    before: "absolute inset-0 bg-red-500",
    "aria-expanded": "bg-red-500 text-yellow-500"
  })}
>
  Hello, World!
</div>

Output (html):

<div class="size-92 relative grid place-items-center before:absolute before:inset-0 before:bg-red-500 aria-expanded:bg-red-500 aria-expanded:text-yellow-500">
  Hello, World!
</div>

Tip

Simply open an Object, put the variant as key, and classes you want to map to that variant as each value. See usage / use cases for more details.

---

Getting started

1. Install the package

pnpm add twg

or

npm install twg

2. Setup

// tailwind.config.ts

import { type Config } from "tailwindcss"
import { transformer } from "twg/transform"

export default {
  content: {
    files: [
      "./src/app/**/*.{ts,tsx}",
      "./src/components/**/*.{ts,tsx}",
      "./src/content/**/*.mdx"
    ], // Move your old `content` to `content.files` like this
    transform: {
      DEFAULT: transformer() // Put `transformer()` here
    }
  },
  // ...
} satisfies Config

• If you need to override default transformer() options:

  transform: {
    DEFAULT: transformer({
      // Define options here, eg.:
      callee: "cn"
    })
  }

  See all options and how to custom options.

3. Usage

import { twg } from "twg"

• If you need to override default twg() options, you need to use createTwg() function:

  import { createTwg } from "twg"
  
  createTwg({ separator: "_" })(...inputs)
  //...

  See custom separator.

For more information, consider reading custom options ↗️ and best practice ↗️.

See how to use in docs.

---

Docs

• Usage / Use cases
  • Usage
    • Basic usage
    • Complex as ☠️ usage
  • Use cases
    • Conditionals
    • Nesting callee functions
  • Combination
• Options
  • transformer() options
  • createTwg() options
  • Custom options
    • Custom callee
    • Custom separator
    • Turn on debug
• API
• Deeper explanation
  • What is twg?
  • Explanation
  • Trade-offs

Changelog

For full & latest update changelog, please refer to CHANGELOG.md.

Contributing

Bugs

twg now work for me but maybe not for you in some edges. Consider opening an issue if you have any problem with it that I can fix it ASAP. Or a pull request is welcome too.

Features

If you have any ideas, feel free to open a feature request template or make a pull request to share your ideas.

For Development and more information on contributing please read CONTRIBUTING.md.

Credits

References

• easy-tailwind
• clsx
• tailwind-merge
• content.transform API

Project starts on

• August 15, 2024

Work with me

https://www.linkedin.com/in/hoangnhan2ka3/

Funding

---

Getting started	MIT © Nguyễn Hoàng Nhân	Scroll to top