lowcss
Version:
A low-level functional CSS toolkit
1,510 lines (1,509 loc) • 174 kB
JSON
{
"version": "0.34.1",
"breakpoints": {
"sm": "640px",
"md": "768px",
"lg": "1024px",
"xl": "1280px"
},
"theme": {
"colors": {
"gray-50": "hsl(0, 0%, 98%)",
"gray-100": "hsl(0, 0%, 96%)",
"gray-200": "hsl(0, 0%, 90%)",
"gray-300": "hsl(0, 0%, 79%)",
"gray-400": "hsl(0, 0%, 67%)",
"gray-500": "hsl(0, 0%, 56%)",
"gray-600": "hsl(0, 0%, 45%)",
"gray-700": "hsl(0, 0%, 33%)",
"gray-800": "hsl(0, 0%, 22%)",
"gray-900": "hsl(0, 0%, 10%)",
"gray-950": "hsl(0, 0%, 5%)",
"red-50": "hsl(355, 90%, 96%)",
"red-100": "hsl(355, 80%, 91%)",
"red-200": "hsl(355, 70%, 80%)",
"red-300": "hsl(355, 65%, 70%)",
"red-400": "hsl(355, 60%, 60%)",
"red-500": "hsl(355, 55%, 50%)",
"red-600": "hsl(355, 55%, 40%)",
"red-700": "hsl(355, 55%, 30%)",
"red-800": "hsl(355, 55%, 20%)",
"red-900": "hsl(355, 55%, 10%)",
"red-950": "hsl(355, 55%, 5%)",
"orange-50": "hsl(30, 95%, 96%)",
"orange-100": "hsl(30, 90%, 91%)",
"orange-200": "hsl(30, 85%, 80%)",
"orange-300": "hsl(30, 80%, 70%)",
"orange-400": "hsl(30, 75%, 60%)",
"orange-500": "hsl(30, 70%, 50%)",
"orange-600": "hsl(30, 70%, 40%)",
"orange-700": "hsl(30, 70%, 30%)",
"orange-800": "hsl(30, 70%, 20%)",
"orange-900": "hsl(30, 70%, 10%)",
"orange-950": "hsl(30, 70%, 5%)",
"yellow-50": "hsl(50, 95%, 96%)",
"yellow-100": "hsl(50, 90%, 91%)",
"yellow-200": "hsl(50, 85%, 80%)",
"yellow-300": "hsl(50, 80%, 70%)",
"yellow-400": "hsl(50, 75%, 60%)",
"yellow-500": "hsl(50, 70%, 50%)",
"yellow-600": "hsl(50, 70%, 40%)",
"yellow-700": "hsl(50, 70%, 30%)",
"yellow-800": "hsl(50, 70%, 20%)",
"yellow-900": "hsl(50, 70%, 10%)",
"yellow-950": "hsl(50, 70%, 5%)",
"green-50": "hsl(140, 80%, 96%)",
"green-100": "hsl(140, 75%, 91%)",
"green-200": "hsl(140, 70%, 80%)",
"green-300": "hsl(140, 65%, 70%)",
"green-400": "hsl(140, 60%, 60%)",
"green-500": "hsl(140, 55%, 50%)",
"green-600": "hsl(140, 55%, 40%)",
"green-700": "hsl(140, 55%, 30%)",
"green-800": "hsl(140, 55%, 20%)",
"green-900": "hsl(140, 55%, 10%)",
"green-950": "hsl(140, 55%, 5%)",
"blue-50": "hsl(210, 90%, 96%)",
"blue-100": "hsl(210, 85%, 91%)",
"blue-200": "hsl(210, 80%, 80%)",
"blue-300": "hsl(210, 75%, 70%)",
"blue-400": "hsl(210, 70%, 60%)",
"blue-500": "hsl(210, 65%, 50%)",
"blue-600": "hsl(210, 65%, 40%)",
"blue-700": "hsl(210, 65%, 30%)",
"blue-800": "hsl(210, 65%, 20%)",
"blue-900": "hsl(210, 65%, 10%)",
"blue-950": "hsl(210, 65%, 5%)",
"violet-50": "hsl(270, 80%, 96%)",
"violet-100": "hsl(270, 75%, 91%)",
"violet-200": "hsl(270, 70%, 80%)",
"violet-300": "hsl(270, 65%, 70%)",
"violet-400": "hsl(270, 60%, 60%)",
"violet-500": "hsl(270, 55%, 50%)",
"violet-600": "hsl(270, 55%, 40%)",
"violet-700": "hsl(270, 55%, 30%)",
"violet-800": "hsl(270, 55%, 20%)",
"violet-900": "hsl(270, 55%, 10%)",
"violet-950": "hsl(270, 55%, 5%)",
"pink-50": "hsl(330, 90%, 96%)",
"pink-100": "hsl(330, 85%, 91%)",
"pink-200": "hsl(330, 80%, 80%)",
"pink-300": "hsl(330, 75%, 70%)",
"pink-400": "hsl(330, 70%, 60%)",
"pink-500": "hsl(330, 65%, 50%)",
"pink-600": "hsl(330, 65%, 40%)",
"pink-700": "hsl(330, 65%, 30%)",
"pink-800": "hsl(330, 65%, 20%)",
"pink-900": "hsl(330, 65%, 10%)",
"pink-950": "hsl(330, 65%, 5%)",
"white": "hsl(0, 0%, 100%)",
"black": "hsl(0, 0%, 0%)"
},
"fonts": {
"sans": "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
"serif": "\"Merriweather\", Georgia, Cambria, \"Times New Roman\", Times, serif",
"mono": "\"SFMono-Regular\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace"
},
"fontSizes": {
"3xs": "0.5rem",
"2xs": "0.625rem",
"xs": "0.75rem",
"sm": "0.875rem",
"base": "1rem",
"lg": "1.125rem",
"xl": "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3rem",
"6xl": "3.75rem",
"7xl": "4.5rem",
"8xl": "6rem",
"9xl": "8rem"
},
"fontWeights": {
"thin": "100",
"extralight": "200",
"light": "300",
"normal": "400",
"medium": "500",
"semibold": "600",
"bold": "700",
"extrabold": "800",
"black": "900"
},
"lineHeights": {
"none": "1",
"tight": "1.25",
"snug": "1.375",
"normal": "1.5",
"relaxed": "1.625",
"loose": "2"
},
"letterSpacing": {
"tighter": "-0.05em",
"tight": "-0.025em",
"normal": "0",
"wide": "0.025em",
"wider": "0.05em",
"widest": "0.1em"
},
"radius": {
"xs": "0.125rem",
"sm": "0.25rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"2xl": "1rem",
"3xl": "1.5rem",
"4xl": "2rem",
"full": "9999px",
"none": "0"
},
"borders": {
"0": "0",
"1": "1px",
"2": "2px",
"4": "4px",
"6": "6px",
"8": "8px"
},
"shadows": {
"sm": "0 0.25rem 1rem -0.125rem rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.02)",
"md": "0 0.5rem 1rem -0.25rem rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.02)",
"lg": "0rem 1rem 1rem -0.5rem rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.02)",
"none": "none"
},
"spacing": {
"0": "0",
"1": "0.25rem",
"2": "0.5rem",
"3": "0.75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"7": "1.75rem",
"8": "2rem",
"9": "2.25rem",
"10": "2.5rem",
"11": "2.75rem",
"12": "3rem",
"14": "3.5rem",
"16": "4rem",
"20": "5rem",
"24": "6rem",
"28": "7rem",
"32": "8rem",
"36": "9rem",
"40": "10rem",
"44": "11rem",
"48": "12rem",
"52": "13rem",
"56": "14rem",
"60": "15rem",
"64": "16rem",
"72": "18rem",
"80": "20rem",
"88": "22rem",
"96": "24rem",
"px": "1px",
"half": "50%",
"full": "100%",
"auto": "auto"
},
"gap": {
"0": "0",
"1": "0.25rem",
"2": "0.5rem",
"3": "0.75rem",
"4": "1rem",
"6": "1.5rem",
"8": "2rem",
"12": "3rem",
"16": "4rem",
"24": "6rem",
"32": "8rem",
"px": "1px"
},
"container": {
"xs": "20rem",
"sm": "24rem",
"md": "28rem",
"lg": "32rem",
"xl": "36rem",
"2xl": "42rem",
"3xl": "48rem",
"4xl": "56rem",
"5xl": "64rem",
"6xl": "72rem",
"7xl": "80rem",
"8xl": "88rem",
"9xl": "96rem"
},
"opacities": {
"0": "0",
"10": "0.1",
"20": "0.2",
"30": "0.3",
"40": "0.4",
"50": "0.5",
"60": "0.6",
"70": "0.7",
"80": "0.8",
"90": "0.9",
"100": "100"
},
"animations": {
"bounce": "bounce 1s infinite",
"fadein": "fadein ease 1s",
"fadeout": "fadeout ease 1s",
"ping": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
"pulse": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
"spin": "spin 1s linear infinite"
},
"zIndex": {
"0": "0",
"10": "10",
"20": "20",
"30": "30",
"40": "40",
"50": "50"
}
},
"utilities": [
{
"description": "Utilities to animate your elements using predefined CSS animations.",
"category": "animation",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/animation",
"name": "animation",
"variants": [
"default"
],
"rules": [
{
"selector": "animate-*",
"variants": [
"default"
],
"properties": [
{
"prop": "animation",
"value": "value(--animate-*)"
}
]
}
]
},
{
"description": "Utilities to set the background-clip property of the element. It defines the area within which the background is painted.",
"category": "background",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip",
"name": "background-clip",
"variants": [
"default"
],
"rules": [
{
"selector": "bg-border",
"variants": [
"default"
],
"properties": [
{
"prop": "background-clip",
"value": "border-box"
}
]
},
{
"selector": "bg-padding",
"variants": [
"default"
],
"properties": [
{
"prop": "background-clip",
"value": "padding-box"
}
]
},
{
"selector": "bg-content",
"variants": [
"default"
],
"properties": [
{
"prop": "background-clip",
"value": "content-box"
}
]
},
{
"selector": "bg-text",
"variants": [
"default"
],
"properties": [
{
"prop": "background-clip",
"value": "text"
}
]
}
]
},
{
"description": "Utilities to set the background-color property of the element, which defines the background color of an element.",
"category": "background",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/background-color",
"name": "background-color",
"variants": [
"default",
"hover",
"focus",
"focus-within",
"odd",
"even",
"group-hover"
],
"rules": [
{
"selector": "bg-transparent",
"variants": [
"default",
"hover",
"focus",
"focus-within",
"odd",
"even",
"group-hover"
],
"properties": [
{
"prop": "background-color",
"value": "transparent"
}
]
},
{
"selector": "bg-current",
"variants": [
"default",
"hover",
"focus",
"focus-within",
"odd",
"even",
"group-hover"
],
"properties": [
{
"prop": "background-color",
"value": "currentColor"
}
]
},
{
"selector": "bg-*",
"variants": [
"default",
"hover",
"focus",
"focus-within",
"odd",
"even",
"group-hover"
],
"properties": [
{
"prop": "background-color",
"value": "value(--color-*)"
}
]
}
]
},
{
"description": "Utilities to set the background-repeat property of the element, which defines how background images are repeated.",
"category": "background",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat",
"name": "background-repeat",
"variants": [
"default"
],
"rules": [
{
"selector": "bg-repeat",
"variants": [
"default"
],
"properties": [
{
"prop": "background-repeat",
"value": "repeat"
}
]
},
{
"selector": "bg-no-repeat",
"variants": [
"default"
],
"properties": [
{
"prop": "background-repeat",
"value": "no-repeat"
}
]
}
]
},
{
"description": "Utilities to set the background-size property of the element.",
"category": "background",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/background-size",
"name": "background-size",
"variants": [
"default"
],
"rules": [
{
"selector": "bg-auto",
"variants": [
"default"
],
"properties": [
{
"prop": "background-size",
"value": "auto"
}
]
},
{
"selector": "bg-cover",
"variants": [
"default"
],
"properties": [
{
"prop": "background-size",
"value": "cover"
}
]
},
{
"selector": "bg-contain",
"variants": [
"default"
],
"properties": [
{
"prop": "background-size",
"value": "contain"
}
]
}
]
},
{
"description": "Utilities to set the border-radius property of the element.",
"category": "border",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius",
"name": "border-radius",
"variants": [
"default"
],
"rules": [
{
"selector": "rounded-*",
"variants": [
"default"
],
"properties": [
{
"prop": "border-radius",
"value": "value(--radius-*)"
}
]
},
{
"selector": "rounded-tl-*",
"variants": [
"default"
],
"properties": [
{
"prop": "border-top-left-radius",
"value": "value(--radius-*)"
}
]
},
{
"selector": "rounded-tr-*",
"variants": [
"default"
],
"properties": [
{
"prop": "border-top-right-radius",
"value": "value(--radius-*)"
}
]
},
{
"selector": "rounded-bl-*",
"variants": [
"default"
],
"properties": [
{
"prop": "border-bottom-left-radius",
"value": "value(--radius-*)"
}
]
},
{
"selector": "rounded-br-*",
"variants": [
"default"
],
"properties": [
{
"prop": "border-bottom-right-radius",
"value": "value(--radius-*)"
}
]
}
]
},
{
"description": "Utilities to set the border-color property of the element.",
"category": "border",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-color",
"name": "border-color",
"variants": [
"default",
"hover",
"focus",
"focus-within"
],
"rules": [
{
"selector": "border-transparent",
"variants": [
"default",
"hover",
"focus",
"focus-within"
],
"properties": [
{
"prop": "border-color",
"value": "transparent"
}
]
},
{
"selector": "border-current",
"variants": [
"default",
"hover",
"focus",
"focus-within"
],
"properties": [
{
"prop": "border-color",
"value": "currentColor"
}
]
},
{
"selector": "border-*",
"variants": [
"default",
"hover",
"focus",
"focus-within"
],
"properties": [
{
"prop": "border-color",
"value": "value(--color-*)"
}
]
}
]
},
{
"category": "border",
"description": "Utilities to set the border-width property of the element.",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-width",
"name": "border-width",
"variants": [
"default"
],
"rules": [
{
"selector": "border-*",
"variants": [
"default"
],
"properties": [
{
"prop": "border-width",
"value": "value(--border-width-*)"
}
]
},
{
"selector": "border-t-*",
"variants": [
"default"
],
"properties": [
{
"prop": "border-top-width",
"value": "value(--border-width-*)"
}
]
},
{
"selector": "border-r-*",
"variants": [
"default"
],
"properties": [
{
"prop": "border-right-width",
"value": "value(--border-width-*)"
}
]
},
{
"selector": "border-b-*",
"variants": [
"default"
],
"properties": [
{
"prop": "border-bottom-width",
"value": "value(--border-width-*)"
}
]
},
{
"selector": "border-l-*",
"variants": [
"default"
],
"properties": [
{
"prop": "border-left-width",
"value": "value(--border-width-*)"
}
]
}
]
},
{
"category": "border",
"description": "Utilities to set the border-style property of the element.",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-style",
"name": "border-style",
"variants": [
"default"
],
"rules": [
{
"selector": "border-solid",
"variants": [
"default"
],
"properties": [
{
"prop": "border-style",
"value": "solid"
}
]
},
{
"selector": "border-dashed",
"variants": [
"default"
],
"properties": [
{
"prop": "border-style",
"value": "dashed"
}
]
},
{
"selector": "border-dotted",
"variants": [
"default"
],
"properties": [
{
"prop": "border-style",
"value": "dotted"
}
]
},
{
"selector": "border-none",
"variants": [
"default"
],
"properties": [
{
"prop": "border-style",
"value": "none"
}
]
}
]
},
{
"category": "border",
"description": "Utilities to set the outline-color property of the element.",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color",
"name": "outline-color",
"variants": [
"default",
"hover",
"focus",
"focus-within"
],
"rules": [
{
"selector": "outline-transparent",
"variants": [
"default",
"hover",
"focus",
"focus-within"
],
"properties": [
{
"prop": "outline-color",
"value": "transparent"
}
]
},
{
"selector": "outline-current",
"variants": [
"default",
"hover",
"focus",
"focus-within"
],
"properties": [
{
"prop": "outline-color",
"value": "currentColor"
}
]
},
{
"selector": "outline-*",
"variants": [
"default",
"hover",
"focus",
"focus-within"
],
"properties": [
{
"prop": "outline-color",
"value": "value(--color-*)"
}
]
}
]
},
{
"category": "border",
"description": "Utilities to set the outline-width property of the element.",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width",
"name": "outline-width",
"variants": [
"default"
],
"rules": [
{
"selector": "outline-*",
"variants": [
"default"
],
"properties": [
{
"prop": "outline-width",
"value": "value(--border-width-*)"
}
]
}
]
},
{
"category": "border",
"description": "Utilities to set the outline-offset property of the element.",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset",
"name": "outline-offset",
"variants": [
"default"
],
"rules": [
{
"selector": "outline-offset-*",
"variants": [
"default"
],
"properties": [
{
"prop": "outline-offset",
"value": "value(--border-width-*)"
}
]
}
]
},
{
"category": "border",
"description": "Utilities to set the outline-style property of the element.",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style",
"name": "outline-style",
"variants": [
"default"
],
"rules": [
{
"selector": "outline-solid",
"variants": [
"default"
],
"properties": [
{
"prop": "outline-style",
"value": "solid"
}
]
},
{
"selector": "outline-dashed",
"variants": [
"default"
],
"properties": [
{
"prop": "outline-style",
"value": "dashed"
}
]
},
{
"selector": "outline-dotted",
"variants": [
"default"
],
"properties": [
{
"prop": "outline-style",
"value": "dotted"
}
]
},
{
"selector": "outline-none",
"variants": [
"default"
],
"properties": [
{
"prop": "outline-style",
"value": "none"
}
]
}
]
},
{
"category": "effects",
"description": "Utilities to set the box-shadow property of the element.",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow",
"name": "shadow",
"variants": [
"default",
"hover",
"focus"
],
"rules": [
{
"selector": "shadow-*",
"variants": [
"default",
"hover",
"focus"
],
"properties": [
{
"prop": "box-shadow",
"value": "value(--shadow-*)"
}
]
}
]
},
{
"category": "effects",
"description": "Utilities to set the opacity property of the element.",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/opacity",
"name": "opacity",
"variants": [
"default",
"responsive",
"group-hover",
"group-focus",
"hover",
"focus",
"focus-within"
],
"rules": [
{
"selector": "opacity-*",
"variants": [
"default",
"responsive",
"group-hover",
"group-focus",
"hover",
"focus",
"focus-within"
],
"properties": [
{
"prop": "opacity",
"value": "value(--opacity-*)"
}
]
}
]
},
{
"category": "flexbox",
"description": "Utilities to set the align-content property of the element.",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/align-content",
"name": "align-content",
"variants": [
"default",
"responsive"
],
"rules": [
{
"selector": "content-start",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "align-content",
"value": "start"
}
]
},
{
"selector": "content-center",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "align-content",
"value": "center"
}
]
},
{
"selector": "content-end",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "align-content",
"value": "end"
}
]
},
{
"selector": "content-stretch",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "align-content",
"value": "stretch"
}
]
},
{
"selector": "content-between",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "align-content",
"value": "space-between"
}
]
},
{
"selector": "content-around",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "align-content",
"value": "space-around"
}
]
},
{
"selector": "content-evenly",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "align-content",
"value": "space-evenly"
}
]
}
]
},
{
"category": "flexbox",
"description": "Utilities to set the align-items property of the element.",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/align-items",
"name": "align-items",
"variants": [
"default",
"responsive"
],
"rules": [
{
"selector": "items-start",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "align-items",
"value": "flex-start"
}
]
},
{
"selector": "items-center",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "align-items",
"value": "center"
}
]
},
{
"selector": "items-end",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "align-items",
"value": "flex-end"
}
]
},
{
"selector": "items-stretch",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "align-items",
"value": "stretch"
}
]
},
{
"selector": "items-baseline",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "align-items",
"value": "baseline"
}
]
}
]
},
{
"category": "flexbox",
"description": "Utilities to set the align-self property of the element.",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/align-self",
"name": "align-self",
"variants": [
"default",
"responsive"
],
"rules": [
{
"selector": "self-auto",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "align-self",
"value": "auto"
}
]
},
{
"selector": "self-start",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "align-self",
"value": "flex-start"
}
]
},
{
"selector": "self-end",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "align-self",
"value": "flex-end"
}
]
},
{
"selector": "self-center",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "align-self",
"value": "center"
}
]
},
{
"selector": "self-stretch",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "align-self",
"value": "stretch"
}
]
},
{
"selector": "self-baseline",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "align-self",
"value": "baseline"
}
]
}
]
},
{
"description": "Utilities to set the flex-direction property of the element.",
"category": "flexbox",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction",
"name": "flex-direction",
"variants": [
"default",
"responsive"
],
"rules": [
{
"selector": "flex-row",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "flex-direction",
"value": "row"
}
]
},
{
"selector": "flex-col",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "flex-direction",
"value": "column"
}
]
},
{
"selector": "flex-row-reverse",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "flex-direction",
"value": "row-reverse"
}
]
},
{
"selector": "flex-col-reverse",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "flex-direction",
"value": "column-reverse"
}
]
}
]
},
{
"description": "Utilities to set the flex-grow property of the element.",
"category": "flexbox",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow",
"name": "flex-grow",
"variants": [
"default",
"responsive"
],
"rules": [
{
"selector": "grow-0",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "flex-grow",
"value": "0"
}
]
},
{
"selector": "grow-1",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "flex-grow",
"value": "1"
}
]
}
]
},
{
"category": "flexbox",
"description": "Utilities to set the flex-shrink property of the element.",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink",
"name": "flex-shrink",
"variants": [
"default",
"responsive"
],
"rules": [
{
"selector": "shrink-0",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "flex-shrink",
"value": "0"
}
]
},
{
"selector": "shrink-1",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "flex-shrink",
"value": "1"
}
]
}
]
},
{
"category": "flexbox",
"description": "Utilities to set the flex-wrap property of the element.",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap",
"name": "flex-wrap",
"variants": [
"default",
"responsive"
],
"rules": [
{
"selector": "flex-wrap",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "flex-wrap",
"value": "wrap"
}
]
},
{
"selector": "flex-wrap-reverse",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "flex-wrap",
"value": "wrap-reverse"
}
]
},
{
"selector": "flex-nowrap",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "flex-wrap",
"value": "nowrap"
}
]
}
]
},
{
"category": "flexbox",
"description": "Utilities to set the gap property of the element.",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/gap",
"name": "gap",
"variants": [
"default",
"responsive"
],
"rules": [
{
"selector": "gap-*",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "gap",
"value": "value(--gap-*)"
}
]
}
]
},
{
"category": "flexbox",
"description": "Utilities to set the grid-template-columns property of the element.",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns",
"name": "grid-template-columns",
"variants": [
"default",
"responsive"
],
"rules": [
{
"selector": "grid-cols-1",
"variants": [
"default",
"responsive"
],
"properties": [
{
"prop": "grid-template-columns",
"value": "repeat(1, minmax(0, 1fr))"
}
]
},
{
"selector": "grid-cols-2",
"variants": [
"default",
"responsive"
],