JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q38903F
  • License ISC

A utility library for generating class names with variants and responsive styles for Tailwind CSS.

Package Exports

  • class-flex
  • class-flex/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (class-flex) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

class-flex

A utility library for generating class names with variants and responsive styles for Tailwind CSS.

Installation

Install the package using npm:

npm install class-flex

Install the package using yarn:

yarn add class-flex

Usage

Here's a basic example of how to use class-flex:

import React from 'react';
import clf from 'class-flex';

const button = clf("", variants: {
        mode: {
            contained: "bg-primary text-white",
            outlined: "bg-transparent border border-primary text-					primary",
        text: "text-primary",
        },
        intent: {
            primary: "bg-primary",
            secondary: "bg-secondary",
            tertiary: "bg-tertiary", }, },
        defaultVariants: {
            mode: "contained",
            intent: "primary",
        })

const App = () => {
    const classes = button({mode: "contained", intent: "primary"})
  return (
   <button className={classes}>
   Click Me
   </button>
  );
};

export default App;

API

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.