Skip to content
This repository has been archived by the owner on Sep 17, 2022. It is now read-only.
/ cx Public archive

Concatenate your classes (with shortcuts) 🔗

License

Notifications You must be signed in to change notification settings

joe-bell/cx

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

77 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

⚠️ This project has been deprecated in favour of cva

cx 🔗

Concatenate your classes (with shortcuts)

NPM Version Types Included Minizipped Size MIT License NPM Downloads Follow @joebell_ on Twitter


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…