https://github.com/idimetrix/tailwind-variation
Tailwind's utility meets a top-tier variant API for maximum flexibility and customization.
https://github.com/idimetrix/tailwind-variation
classnames tailwind tailwind-merge tailwindcss tailwindui
Last synced: about 1 month ago
JSON representation
Tailwind's utility meets a top-tier variant API for maximum flexibility and customization.
- Host: GitHub
- URL: https://github.com/idimetrix/tailwind-variation
- Owner: idimetrix
- License: other
- Created: 2024-09-23T06:03:48.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-09-23T06:32:27.000Z (8 months ago)
- Last Synced: 2025-04-06T11:03:30.798Z (about 2 months ago)
- Topics: classnames, tailwind, tailwind-merge, tailwindcss, tailwindui
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/tailwind-variation
- Size: 61.5 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tailwind-variation
Tailwind's utility meets a top-tier variant API for maximum flexibility and customization.
### Features
## Installation
You can install the package using **npm**, **yarn**, or **pnpm**.
```bash
pnpm add tailwind-variation
yarn install tailwind-variation
npm install tailwind-variation
```
## Usage
```typescript
import { createVariation } from "tailwind-variation";
// Example usage of the createVariants function
const buttonVariants = createVariation({
base: "px-4 py-2 font-bold transition-all", // Base styles
variants: {
color: {
primary: "bg-blue-500 text-white",
secondary: "bg-gray-500 text-black",
},
size: {
sm: "text-sm",
lg: "text-lg",
},
fullWidth: {
true: "w-full",
},
},
defaultVariants: {
color: "primary", // Default to primary color
size: "sm", // Default to small size
},
});
// Example usage
const buttonClass = buttonVariants({
color: "secondary",
size: "lg",
fullWidth: true,
});
console.log(buttonClass); // Outputs: 'px-4 py-2 font-bold transition-all bg-gray-500 text-black text-lg w-full'
```
## tsup
Bundle your TypeScript library with no config, powered by esbuild.
https://tsup.egoist.dev/
## How to use this
1. install dependencies
```
# pnpm
$ pnpm install
# yarn
$ yarn install
# npm
$ npm install
```
2. Add your code to `src`
3. Add export statement to `src/index.ts`
4. Test build command to build `src`.
Once the command works properly, you will see `dist` folder.
```zsh
# pnpm
$ pnpm run build
# yarn
$ yarn run build
# npm
$ npm run build
```
5. Publish your package
```zsh
$ npm publish
```
## test package
https://www.npmjs.com/package/tailwind-variation