⚠️ This project has been deprecated in favour of cva

cx 🔗

Concatenate your classes (with shortcuts)

cx is a tiny function that mimics and extends the popular classnames utility with "shortcuts" to re-use common classes (with TypeScript autocompletion)

💡 Works especially nicely with Tailwind IntelliSense

Setup

Install the package via your favourite package manager:
```
npm i @joebell/cx
```

Create a custom cx function for later use.

Common styles can be defined in the shortcuts and accessed by it's "key" for re-use later.

⚠️ FYI: At this point in time, your shortcuts must be a flat object with no nested keys.

// styles/index.ts
import { createCx } from "@joebell/cx";

const shortcuts = {
  // Components
  "c-container": ["block", "max-w-5xl", "mx-auto", "px-4"],
  // Utilities
  "u-border": ["border-dashed", "border-black"],
};

export const cx = createCx(shortcuts);

Import cx into your component or layout.

For example, in React.js:

// pages/index.tsx
import { cx } from "../styles";

const Page: React.FC = ({ children }) => (
  <main className={cx("c-container", "mt-4")}>{children}</main>
);

returns…

<main class="block max-w-5xl mx-auto px-4 mt-4">…</main>

💡 Tip: If you're having issues with Tailwind IntelliSense in VSCode, try reloading the window

Acknowledgements

Without these projects/people, this project wouldn't exist…

classnames - Jed Watson

joe-bell/cx

cx 🔗

Setup

Acknowledgements