
Product
Socket Now Protects the Chrome Extension Ecosystem
Socket is launching experimental protection for Chrome extensions, scanning for malware and risky permissions to prevent silent supply chain attacks.
@tailwindcssinjs/class-composer
Advanced tools
Simple utility functions for joining tailwindcss classNames together.
Simple utilities to compose tailwindcss classes.
# with npm
npm install @tailwindcssinjs/class-composer
# with Yarn
yarn add @tailwindcssinjs/class-composer
tw(string | string[] | string[][], ...)
Valid composer function parameters are:
Note:
It will return the composed classes in the same order as the input parameters, from left to right.
"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.
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"
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.
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" ]
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.
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"]]
// ]
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.
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"
MIT. Copyright (c) 2020 Arthur Petrie.
FAQs
Simple utility functions for joining tailwindcss classNames together.
The npm package @tailwindcssinjs/class-composer receives a total of 33 weekly downloads. As such, @tailwindcssinjs/class-composer popularity was classified as not popular.
We found that @tailwindcssinjs/class-composer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Product
Socket is launching experimental protection for Chrome extensions, scanning for malware and risky permissions to prevent silent supply chain attacks.
Product
Add secure dependency scanning to Claude Desktop with Socket MCP, a one-click extension that keeps your coding conversations safe from malicious packages.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.