Repository files navigation

⚠️This project has been deprecated in favour ofcva

Concatenate your classes (with shortcuts)

cx is atiny function that mimics and extends the popularclassnames utility with"shortcuts" to re-use common classes (with TypeScript autocompletion)

💡 Works especially nicely withTailwind IntelliSense

1. Install the package via your favourite package manager:

   npm i @joebell/cx

2. Create a customcx function for later use.

   Common styles can be defined in theshortcuts 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.tsimport{createCx}from"@joebell/cx";constshortcuts={// Components"c-container":["block","max-w-5xl","mx-auto","px-4"],// Utilities"u-border":["border-dashed","border-black"],};exportconstcx=createCx(shortcuts);

3. Importcx into your component or layout.

   For example, in React.js:

   // pages/index.tsximport{cx}from"../styles";constPage:React.FC=({ children})=>(<mainclassName={cx("c-container","mt-4")}>{children}</main>);

   returns…

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

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

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

• classnames - Jed Watson