https://github.com/joe-bell/cx

Concatenate your classes (with shortcuts) 🔗
https://github.com/joe-bell/cx

classnames css cx react typescript

Last synced: about 2 months ago
JSON representation

Concatenate your classes (with shortcuts) 🔗

• Host: GitHub
• URL: https://github.com/joe-bell/cx
• Owner: joe-bell
• License: mit
• Archived: true
• Created: 2020-10-20T10:18:48.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2022-09-17T05:09:48.000Z (over 2 years ago)
• Last Synced: 2024-09-20T08:15:43.691Z (3 months ago)
• Topics: classnames, css, cx, react, typescript
• Language: TypeScript
• Homepage:
• Size: 286 KB
• Stars: 24
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
> ⚠️ **This project has been deprecated in favour of [`cva`](https://github.com/joe-bell/cva)**



  cx 🔗





  

    Concatenate your classes (with shortcuts)

  





  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  






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

> 💡 Works especially nicely with [Tailwind IntelliSense][tw]

## Setup

1. Install the package via your favourite package manager:

   ```sh

   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.

   ```ts

   // 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:**

   ```tsx

   // pages/index.tsx

   import { cx } from "../styles";

   const Page: React.FC = ({ children }) => (

     {children}

   );

   ```

   _returns…_

   ```html

   …

   ```

   > 💡 **Tip**: If you're having issues with [Tailwind IntelliSense][tw] in VSCode, try reloading the window

## Acknowledgements

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

- [**classnames** - Jed Watson][classnames]

[classnames]: https://github.com/JedWatson/classnames

[tw]: https://github.com/tailwindlabs/tailwindcss-intellisense