Socket
Socket
Sign inDemoInstall

@tailwindcssinjs/class-composer

Package Overview
Dependencies
0
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tailwindcssinjs/class-composer

Simple utility functions for joining tailwindcss classNames together.


Version published
Weekly downloads
61
increased by27.08%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

@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.

FAQs

Last updated on 23 Oct 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc