class-flex

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.