Concatenate your classes (with shortcuts) 🔗
⚠️ This project has been deprecated in favour of
cva
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
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
Without these projects/people, this project wouldn't exist…