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

1. Install the package via your favourite package manager:

   npm i @joebell/cx

2. 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);

3. 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