Tailwind Components (twc)
This package takes props from a component and a variants object to compile Tailwind classes in a structured way.
install
pnpm i @gateway-web/twcexample
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import { twc, Variants } from "@gateway-web/twc";
const variants: Variants = {
base: { // base class names
root: "flex flex-col w-full gap-4 border p-8 rounded",
title: "text-xl font-bold",
button: "p-2 rounded",
},
variants: [
{
props: {
color: "amber", // string matching
},
classNames: {
root: "border-amber-400",
title: "text-amber-400",
button: "bg-amber-600 text-white",
},
},
{
props: {
color: ["primary", "blue"], // array matching
},
classNames: {
root: "border-blue-400",
title: "text-blue-400",
button: "bg-blue-600 text-white",
},
},
{
props: {
color: /violet|purple/gi, // regex matching
},
classNames: {
root: "border-violet-500",
title: "text-violet-400",
button: "bg-violet-600 text-white",
},
},
{
props: {
color: "purple", // last one will always override
},
classNames: {
button: "bg-purple-600",
},
}
],
};
const Component = (props) => {
const classes = twc(variants, props);
return (
<div className={classes.root}>
<h3 className={classes.title}>title</h3>
<button className={classes.button}>button</button>
</div>
)
}
example output
<Component color="amber" />
title
classes = {
"root": "flex flex-col w-full gap-4 border p-8 rounded border-amber-400",
"title": "text-xl font-bold text-amber-400",
"button": "p-2 rounded bg-amber-600 text-white"
}<Component color="primary" />
title
classes = {
"root": "flex flex-col w-full gap-4 border p-8 rounded border-blue-400",
"title": "text-xl font-bold text-blue-400",
"button": "p-2 rounded bg-blue-600 text-white"
}<Component color="violet" />
title
classes = {
"root": "flex flex-col w-full gap-4 border p-8 rounded border-violet-500",
"title": "text-xl font-bold text-violet-400",
"button": "p-2 rounded bg-violet-600 text-white"
}<Component color="purple" />
title
classes = {
"root": "flex flex-col w-full gap-4 border p-8 rounded border-violet-500",
"title": "text-xl font-bold text-violet-400",
"button": "p-2 rounded text-white bg-purple-600"
}