Using `clx`

🚧 Still Under construction 🚧

VSCode Setup

By adding this script to your settings.json in the workspace or globally, you can set the regex for the clx method to match the class names and provide intellisense.

  "tailwindCSS.experimental.classRegex": [
    ["clx(?:\\.\\w*)?\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]

Benefits over cn() + cva()

cn and cva (Class Variant Authority) are excellent, but features like automatic typescript intellisense, composability, and ref forwarding are not supported. With clx, you get all these features and more!

Composability

forwardRef handled for you

Variants

1. Multiple variants

2. Default variants

3. Boolean variants

4. Coumpound variants

5. Extracting variants

Typescript (advanced)

1. VariantsProps

2. DerivedComponentType

3. StrictComponentType

4. Satisfies and shared variants (TS 4.9)