0.17.0 • Published 1 year ago

@tailwindcssinjs/class-composer v0.17.0

Weekly downloads
1,334
License
MIT
Repository
-
Last release
1 year ago

@tailwindcssinjs/class-composer

NPM version License

Simple utilities to compose tailwindcss classes.

Install

# with npm
npm install @tailwindcssinjs/class-composer

# with Yarn
yarn add @tailwindcssinjs/class-composer

API

composer function parameters

tw(string | string[] | string[][], ...)

Valid composer function parameters are:

  • Classes string
  • Array of classes strings
  • Nested Arrays containing class strings (nesting has no depth limit)

Note: It will return the composed classes in the same order as the input parameters, from left to right.

Variant array syntax

"variant[class1 class2]" => "variant:class1 variant:class2"
Support for custom variant array syntax. The variant in front of the angle brackets gets applied to the classes inside.

Note: Nesting of variant arrays is not allowed.

Example

import { twClassesSerializer } from "@tailwindcssinjs/class-composer";

const tw = twClassesSerializer(":");

tw("text-red-100 hover:bg-red-200 hover:m-4 sm:hover:bg-red-300");

tw("text-red-100", "hover:bg-red-200 hover:m-4", "sm:hover:bg-red-300");

tw("text-red-100", ["hover:bg-red-200", "hover:m-4", ["sm:hover:bg-red-300"]]);

tw("text-red-100 hover[bg-red-200 m-4] sm[hover:bg-red-300]");

//Same Result: "text-red-100 hover:bg-red-200 hover:m-4 sm:hover:bg-red-300"

1. twClassesComposer

twClassesComposer(string): function

Takes a separator string (e.g. ":") as parameter and returns a composer function. The composer function will return a Array of tailwind classes.

Example

import { twClassesComposer } from "@tailwindcssinjs/class-composer";

const tw = twClassesComposer(":");

tw("text-red-100 hover:bg-red-200 sm:active:bg-red-300");

//Result: [ "text-red-100", "hover:bg-red-200", "sm:active:bg-red-300" ]

2. twClassesParser

twClassesComposer(string): function

Takes a separator string (e.g. ":") as parameter and returns a composer function. The composer function will return an array of class and variants tuples.

Example

import { twClassesParser } from "@tailwindcssinjs/class-composer";

const tw = twClassesParser(":");

tw("text-red-100 hover:bg-red-200 sm:active:bg-red-300");

//Result: [
//   ["text-red-100", []],
//   ["bg-red-200", ["hover"]],
//   ["bg-red-300", ["active", "sm"]]
// ]

3. twClassesSerializer

twClassesSerializer(string): function

Takes a separator string (e.g. ":") as parameter and returns a composer function. The composer function will return a tailwind classes string.

Example

import { twClassesSerializer } from "@tailwindcssinjs/class-composer";

const tw = twClassesSerializer(":");

tw("text-red-100 hover:bg-red-200 sm:active:bg-red-300");

//Result: "text-red-100 hover:bg-red-200 sm:active:bg-red-300"

License

MIT. Copyright (c) 2020 Arthur Petrie.

0.17.0

1 year ago

0.12.0

1 year ago

0.9.0

1 year ago

0.8.0

1 year ago

0.5.2

2 years ago

0.5.1

2 years ago

0.5.0

2 years ago

0.3.1

2 years ago

0.3.0

2 years ago

0.2.2

2 years ago

0.2.0

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.1

2 years ago