{ "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" ], "properties": [ { "prop": "grid-template-columns", "value": "repeat(2, minmax(0, 1fr))" } ] }, { "selector": "grid-cols-3", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-template-columns", "value": "repeat(3, minmax(0, 1fr))" } ] }, { "selector": "grid-cols-4", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-template-columns", "value": "repeat(4, minmax(0, 1fr))" } ] }, { "selector": "grid-cols-5", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-template-columns", "value": "repeat(5, minmax(0, 1fr))" } ] }, { "selector": "grid-cols-6", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-template-columns", "value": "repeat(6, minmax(0, 1fr))" } ] }, { "selector": "grid-cols-7", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-template-columns", "value": "repeat(7, minmax(0, 1fr))" } ] }, { "selector": "grid-cols-8", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-template-columns", "value": "repeat(8, minmax(0, 1fr))" } ] }, { "selector": "grid-cols-9", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-template-columns", "value": "repeat(9, minmax(0, 1fr))" } ] }, { "selector": "grid-cols-10", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-template-columns", "value": "repeat(10, minmax(0, 1fr))" } ] }, { "selector": "grid-cols-11", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-template-columns", "value": "repeat(11, minmax(0, 1fr))" } ] }, { "selector": "grid-cols-12", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-template-columns", "value": "repeat(12, minmax(0, 1fr))" } ] }, { "selector": "grid-cols-none", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-template-columns", "value": "none" } ] } ] }, { "category": "flexbox", "description": "Utilities to set the grid-template-rows property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows", "name": "grid-template-rows", "variants": [ "default", "responsive" ], "rules": [ { "selector": "grid-rows-1", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-template-rows", "value": "repeat(1, minmax(0, 1fr))" } ] }, { "selector": "grid-rows-2", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-template-rows", "value": "repeat(2, minmax(0, 1fr))" } ] }, { "selector": "grid-rows-3", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-template-rows", "value": "repeat(3, minmax(0, 1fr))" } ] }, { "selector": "grid-rows-4", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-template-rows", "value": "repeat(4, minmax(0, 1fr))" } ] }, { "selector": "grid-rows-5", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-template-rows", "value": "repeat(5, minmax(0, 1fr))" } ] }, { "selector": "grid-rows-6", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-template-rows", "value": "repeat(6, minmax(0, 1fr))" } ] }, { "selector": "grid-rows-none", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-template-rows", "value": "none" } ] } ] }, { "category": "flexbox", "description": "Utilities to set the size and the position of elements in grid columns.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column", "name": "grid-column", "variants": [ "default", "responsive" ], "rules": [ { "selector": "col-span-1", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-column", "value": "span 1 / span 1" } ] }, { "selector": "col-span-2", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-column", "value": "span 2 / span 2" } ] }, { "selector": "col-span-3", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-column", "value": "span 3 / span 3" } ] }, { "selector": "col-span-4", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-column", "value": "span 4 / span 4" } ] }, { "selector": "col-span-5", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-column", "value": "span 5 / span 5" } ] }, { "selector": "col-span-6", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-column", "value": "span 6 / span 6" } ] }, { "selector": "col-span-7", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-column", "value": "span 7 / span 7" } ] }, { "selector": "col-span-8", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-column", "value": "span 8 / span 8" } ] }, { "selector": "col-span-9", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-column", "value": "span 9 / span 9" } ] }, { "selector": "col-span-10", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-column", "value": "span 10 / span 10" } ] }, { "selector": "col-span-11", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-column", "value": "span 11 / span 11" } ] }, { "selector": "col-span-12", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-column", "value": "span 12 / span 12" } ] } ] }, { "category": "flexbox", "description": "Utilities to set the size and the position of elements in grid rows.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row", "name": "grid-row", "variants": [ "default", "responsive" ], "rules": [ { "selector": "row-span-1", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-row", "value": "span 1 / span 1" } ] }, { "selector": "row-span-2", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-row", "value": "span 2 / span 2" } ] }, { "selector": "row-span-3", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-row", "value": "span 3 / span 3" } ] }, { "selector": "row-span-4", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-row", "value": "span 4 / span 4" } ] }, { "selector": "row-span-5", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-row", "value": "span 5 / span 5" } ] }, { "selector": "row-span-6", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-row", "value": "span 6 / span 6" } ] }, { "selector": "row-span-7", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-row", "value": "span 7 / span 7" } ] }, { "selector": "row-span-8", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-row", "value": "span 8 / span 8" } ] }, { "selector": "row-span-9", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-row", "value": "span 9 / span 9" } ] }, { "selector": "row-span-10", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-row", "value": "span 10 / span 10" } ] }, { "selector": "row-span-11", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-row", "value": "span 11 / span 11" } ] }, { "selector": "row-span-12", "variants": [ "default", "responsive" ], "properties": [ { "prop": "grid-row", "value": "span 12 / span 12" } ] } ] }, { "category": "flexbox", "description": "Utilities to set the justify-content property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content", "name": "justify-content", "variants": [ "default", "responsive" ], "rules": [ { "selector": "justify-start", "variants": [ "default", "responsive" ], "properties": [ { "prop": "justify-content", "value": "flex-start" } ] }, { "selector": "justify-end", "variants": [ "default", "responsive" ], "properties": [ { "prop": "justify-content", "value": "flex-end" } ] }, { "selector": "justify-center", "variants": [ "default", "responsive" ], "properties": [ { "prop": "justify-content", "value": "center" } ] }, { "selector": "justify-between", "variants": [ "default", "responsive" ], "properties": [ { "prop": "justify-content", "value": "space-between" } ] }, { "selector": "justify-around", "variants": [ "default", "responsive" ], "properties": [ { "prop": "justify-content", "value": "space-around" } ] } ] }, { "category": "flexbox", "description": "Utilities to set the order property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/order", "name": "order", "variants": [ "default", "responsive" ], "rules": [ { "selector": "order-none", "variants": [ "default", "responsive" ], "properties": [ { "prop": "order", "value": "0" } ] }, { "selector": "order-first", "variants": [ "default", "responsive" ], "properties": [ { "prop": "order", "value": "-999" } ] }, { "selector": "order-last", "variants": [ "default", "responsive" ], "properties": [ { "prop": "order", "value": "999" } ] }, { "selector": "order-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "order", "value": "value(--order-*)" } ] } ] }, { "category": "interactivity", "description": "Utilities to set the cursor property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/cursor", "name": "cursor", "variants": [ "default" ], "rules": [ { "selector": "cursor-auto", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "auto" } ] }, { "selector": "cursor-default", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "default" } ] }, { "selector": "cursor-hand", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "pointer" } ] }, { "selector": "cursor-pointer", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "pointer" } ] }, { "selector": "cursor-move", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "move" } ] }, { "selector": "cursor-none", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "none" } ] }, { "selector": "cursor-zoom-in", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "zoom-in" } ] }, { "selector": "cursor-zoom-out", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "zoom-out" } ] }, { "selector": "cursor-not-allowed", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "not-allowed" } ] }, { "selector": "cursor-wait", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "wait" } ] }, { "selector": "cursor-text", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "text" } ] }, { "selector": "cursor-help", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "help" } ] }, { "selector": "cursor-context-menu", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "context-menu" } ] }, { "selector": "cursor-progress", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "progress" } ] }, { "selector": "cursor-cell", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "cell" } ] }, { "selector": "cursor-crosshair", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "crosshair" } ] }, { "selector": "cursor-vertical-text", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "vertical-text" } ] }, { "selector": "cursor-alias", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "alias" } ] }, { "selector": "cursor-copy", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "copy" } ] }, { "selector": "cursor-no-drop", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "no-drop" } ] }, { "selector": "cursor-grab", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "grab" } ] }, { "selector": "cursor-grabbing", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "grabbing" } ] }, { "selector": "cursor-all-scroll", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "all-scroll" } ] }, { "selector": "cursor-col-resize", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "col-resize" } ] }, { "selector": "cursor-row-resize", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "row-resize" } ] }, { "selector": "cursor-n-resize", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "n-resize" } ] }, { "selector": "cursor-e-resize", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "e-resize" } ] }, { "selector": "cursor-s-resize", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "s-resize" } ] }, { "selector": "cursor-w-resize", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "w-resize" } ] }, { "selector": "cursor-ne-resize", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "ne-resize" } ] }, { "selector": "cursor-nw-resize", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "nw-resize" } ] }, { "selector": "cursor-se-resize", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "se-resize" } ] }, { "selector": "cursor-sw-resize", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "sw-resize" } ] }, { "selector": "cursor-ew-resize", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "ew-resize" } ] }, { "selector": "cursor-ns-resize", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "ns-resize" } ] }, { "selector": "cursor-nesw-resize", "variants": [ "default" ], "properties": [ { "prop": "cursor", "value": "nesw-resize" } ] } ] }, { "category": "interactivity", "description": "Utilities to set the user-select property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/user-select", "name": "user-select", "variants": [ "default" ], "rules": [ { "selector": "select-none", "variants": [ "default" ], "properties": [ { "prop": "user-select", "value": "none" } ] }, { "selector": "select-none", "variants": [ "default" ], "properties": [ { "prop": "user-select", "value": "none" } ] }, { "selector": "select-text", "variants": [ "default" ], "properties": [ { "prop": "user-select", "value": "text" } ] }, { "selector": "select-all", "variants": [ "default" ], "properties": [ { "prop": "user-select", "value": "all" } ] }, { "selector": "select-auto", "variants": [ "default" ], "properties": [ { "prop": "user-select", "value": "auto" } ] } ] }, { "category": "interactivity", "description": "Utilities to set the pointer-events property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events", "name": "pointer-events", "variants": [ "default" ], "rules": [ { "selector": "pointer-events-auto", "variants": [ "default" ], "properties": [ { "prop": "pointer-events", "value": "auto" } ] }, { "selector": "pointer-events-none", "variants": [ "default" ], "properties": [ { "prop": "pointer-events", "value": "none" } ] } ] }, { "category": "interactivity", "description": "Utilities to set the touch-action property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action", "name": "touch-action", "variants": [ "default" ], "rules": [ { "selector": "touch-auto", "variants": [ "default" ], "properties": [ { "prop": "touch-action", "value": "auto" } ] }, { "selector": "touch-none", "variants": [ "default" ], "properties": [ { "prop": "touch-action", "value": "none" } ] }, { "selector": "touch-pan-x", "variants": [ "default" ], "properties": [ { "prop": "touch-action", "value": "pan-x" } ] }, { "selector": "touch-pan-y", "variants": [ "default" ], "properties": [ { "prop": "touch-action", "value": "pan-y" } ] }, { "selector": "touch-pan-left", "variants": [ "default" ], "properties": [ { "prop": "touch-action", "value": "pan-left" } ] }, { "selector": "touch-pan-right", "variants": [ "default" ], "properties": [ { "prop": "touch-action", "value": "pan-right" } ] }, { "selector": "touch-pan-up", "variants": [ "default" ], "properties": [ { "prop": "touch-action", "value": "pan-up" } ] }, { "selector": "touch-pan-down", "variants": [ "default" ], "properties": [ { "prop": "touch-action", "value": "pan-down" } ] }, { "selector": "touch-pinch-zoom", "variants": [ "default" ], "properties": [ { "prop": "touch-action", "value": "pinch-zoom" } ] }, { "selector": "touch-manipulation", "variants": [ "default" ], "properties": [ { "prop": "touch-action", "value": "manipulation" } ] } ] }, { "description": "Utilities to set the bottom property of the element.", "category": "layout", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/bottom", "name": "bottom", "variants": [ "default" ], "rules": [ { "selector": "bottom-0", "variants": [ "default" ], "properties": [ { "prop": "bottom", "value": "0px" } ] }, { "selector": "bottom-half", "variants": [ "default" ], "properties": [ { "prop": "bottom", "value": "50%" } ] }, { "selector": "bottom-full", "variants": [ "default" ], "properties": [ { "prop": "bottom", "value": "100%" } ] } ] }, { "description": "Utilities to set the left property of the element.", "category": "layout", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/left", "name": "left", "variants": [ "default" ], "rules": [ { "selector": "left-0", "variants": [ "default" ], "properties": [ { "prop": "left", "value": "0px" } ] }, { "selector": "left-half", "variants": [ "default" ], "properties": [ { "prop": "left", "value": "50%" } ] }, { "selector": "left-full", "variants": [ "default" ], "properties": [ { "prop": "left", "value": "100%" } ] } ] }, { "category": "layout", "description": "Utilities to set the right property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/right", "name": "right", "variants": [ "default" ], "rules": [ { "selector": "right-0", "variants": [ "default" ], "properties": [ { "prop": "right", "value": "0px" } ] }, { "selector": "right-half", "variants": [ "default" ], "properties": [ { "prop": "right", "value": "50%" } ] }, { "selector": "right-full", "variants": [ "default" ], "properties": [ { "prop": "right", "value": "100%" } ] } ] }, { "category": "layout", "description": "Utilities to set the top property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/top", "name": "top", "variants": [ "default" ], "rules": [ { "selector": "top-0", "variants": [ "default" ], "properties": [ { "prop": "top", "value": "0px" } ] }, { "selector": "top-half", "variants": [ "default" ], "properties": [ { "prop": "top", "value": "50%" } ] }, { "selector": "top-full", "variants": [ "default" ], "properties": [ { "prop": "top", "value": "100%" } ] } ] }, { "category": "layout", "description": "Utilities to set the position property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/position", "name": "position", "variants": [ "default", "responsive" ], "rules": [ { "selector": "relative", "variants": [ "default", "responsive" ], "properties": [ { "prop": "position", "value": "relative" } ] }, { "selector": "absolute", "variants": [ "default", "responsive" ], "properties": [ { "prop": "position", "value": "absolute" } ] }, { "selector": "sticky", "variants": [ "default", "responsive" ], "properties": [ { "prop": "position", "value": "sticky" } ] }, { "selector": "fixed", "variants": [ "default", "responsive" ], "properties": [ { "prop": "position", "value": "fixed" } ] }, { "selector": "initial", "variants": [ "default", "responsive" ], "properties": [ { "prop": "position", "value": "initial" } ] } ] }, { "category": "layout", "description": "Utilities to set the overflow property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow", "name": "overflow", "variants": [ "default" ], "rules": [ { "selector": "overflow-auto", "variants": [ "default" ], "properties": [ { "prop": "overflow", "value": "auto" } ] }, { "selector": "overflow-scroll", "variants": [ "default" ], "properties": [ { "prop": "overflow", "value": "scroll" } ] }, { "selector": "overflow-hidden", "variants": [ "default" ], "properties": [ { "prop": "overflow", "value": "hidden" } ] }, { "selector": "overflow-visible", "variants": [ "default" ], "properties": [ { "prop": "overflow", "value": "visible" } ] }, { "selector": "overflow-x-auto", "variants": [ "default" ], "properties": [ { "prop": "overflow-x", "value": "auto" } ] }, { "selector": "overflow-x-scroll", "variants": [ "default" ], "properties": [ { "prop": "overflow-x", "value": "scroll" } ] }, { "selector": "overflow-x-hidden", "variants": [ "default" ], "properties": [ { "prop": "overflow-x", "value": "hidden" } ] }, { "selector": "overflow-x-visible", "variants": [ "default" ], "properties": [ { "prop": "overflow-x", "value": "visible" } ] }, { "selector": "overflow-y-auto", "variants": [ "default" ], "properties": [ { "prop": "overflow-y", "value": "auto" } ] }, { "selector": "overflow-y-scroll", "variants": [ "default" ], "properties": [ { "prop": "overflow-y", "value": "scroll" } ] }, { "selector": "overflow-y-hidden", "variants": [ "default" ], "properties": [ { "prop": "overflow-y", "value": "hidden" } ] }, { "selector": "overflow-y-visible", "variants": [ "default" ], "properties": [ { "prop": "overflow-y", "value": "visible" } ] } ] }, { "category": "layout", "description": "Utilities to set the z-index property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/z-index", "name": "z-index", "variants": [ "default" ], "rules": [ { "selector": "z-auto", "variants": [ "default" ], "properties": [ { "prop": "z-index", "value": "auto" } ] }, { "selector": "z-*", "variants": [ "default" ], "properties": [ { "prop": "z-index", "value": "value(--z-index-*)" } ] } ] }, { "category": "layout", "description": "Utilities to set the display property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/display", "name": "display", "variants": [ "default", "responsive", "print", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within" ], "rules": [ { "selector": "hidden", "variants": [ "default", "responsive", "print", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within" ], "properties": [ { "prop": "display", "value": "none" } ] }, { "selector": "block", "variants": [ "default", "responsive", "print", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within" ], "properties": [ { "prop": "display", "value": "block" } ] }, { "selector": "inline-block", "variants": [ "default", "responsive", "print", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within" ], "properties": [ { "prop": "display", "value": "inline-block" } ] }, { "selector": "flex", "variants": [ "default", "responsive", "print", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within" ], "properties": [ { "prop": "display", "value": "flex" } ] }, { "selector": "inline-flex", "variants": [ "default", "responsive", "print", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within" ], "properties": [ { "prop": "display", "value": "inline-flex" } ] }, { "selector": "grid", "variants": [ "default", "responsive", "print", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within" ], "properties": [ { "prop": "display", "value": "grid" } ] }, { "selector": "inline-grid", "variants": [ "default", "responsive", "print", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within" ], "properties": [ { "prop": "display", "value": "inline-grid" } ] }, { "selector": "table", "variants": [ "default", "responsive", "print", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within" ], "properties": [ { "prop": "display", "value": "table" } ] }, { "selector": "inline-table", "variants": [ "default", "responsive", "print", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within" ], "properties": [ { "prop": "display", "value": "inline-table" } ] }, { "selector": "table-row", "variants": [ "default", "responsive", "print", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within" ], "properties": [ { "prop": "display", "value": "table-row" } ] }, { "selector": "table-cell", "variants": [ "default", "responsive", "print", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within" ], "properties": [ { "prop": "display", "value": "table-cell" } ] }, { "selector": "table-column", "variants": [ "default", "responsive", "print", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within" ], "properties": [ { "prop": "display", "value": "table-column" } ] }, { "selector": "table-group", "variants": [ "default", "responsive", "print", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within" ], "properties": [ { "prop": "display", "value": "table-group" } ] }, { "selector": "table-header-group", "variants": [ "default", "responsive", "print", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within" ], "properties": [ { "prop": "display", "value": "table-header-group" } ] }, { "selector": "table-footer-group", "variants": [ "default", "responsive", "print", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within" ], "properties": [ { "prop": "display", "value": "table-footer-group" } ] }, { "selector": "table-column-group", "variants": [ "default", "responsive", "print", "hover", "focus", "focus-within", "group-hover", "group-focus", "group-focus-within" ], "properties": [ { "prop": "display", "value": "table-column-group" } ] } ] }, { "category": "layout", "description": "Utilities to set the float property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/float", "name": "float", "variants": [ "default" ], "rules": [ { "selector": "float-left", "variants": [ "default" ], "properties": [ { "prop": "float", "value": "left" } ] }, { "selector": "float-right", "variants": [ "default" ], "properties": [ { "prop": "float", "value": "right" } ] }, { "selector": "float-start", "variants": [ "default" ], "properties": [ { "prop": "float", "value": "inline-start" } ] }, { "selector": "float-end", "variants": [ "default" ], "properties": [ { "prop": "float", "value": "inline-end" } ] }, { "selector": "float-none", "variants": [ "default" ], "properties": [ { "prop": "float", "value": "none" } ] } ] }, { "category": "sizing", "description": "Utilities to set the height property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/height", "name": "height", "variants": [ "default", "responsive" ], "rules": [ { "selector": "h-screen", "variants": [ "default", "responsive" ], "properties": [ { "prop": "height", "value": "100vh" } ] }, { "selector": "h-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "height", "value": "value(--spacing-*)" } ] } ] }, { "category": "sizing", "description": "Utilities to set the max-height property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/max-height", "name": "max-height", "variants": [ "default", "responsive" ], "rules": [ { "selector": "max-h-screen", "variants": [ "default", "responsive" ], "properties": [ { "prop": "max-height", "value": "100vh" } ] }, { "selector": "max-h-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "max-height", "value": "value(--spacing-*)" } ] } ] }, { "category": "sizing", "description": "Utilities to set the min-height property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/min-height", "name": "min-height", "variants": [ "default", "responsive" ], "rules": [ { "selector": "min-h-screen", "variants": [ "default", "responsive" ], "properties": [ { "prop": "min-height", "value": "100vh" } ] }, { "selector": "min-h-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "min-height", "value": "value(--spacing-*)" } ] } ] }, { "category": "sizing", "description": "Utilities to set the width property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/width", "name": "width", "variants": [ "default", "responsive" ], "rules": [ { "selector": "w-auto", "variants": [ "default", "responsive" ], "properties": [ { "prop": "width", "value": "auto" } ] }, { "selector": "w-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "width", "value": "value(--spacing-*)" } ] } ] }, { "category": "sizing", "description": "Utilities to set the max-width property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/max-width", "name": "max-width", "variants": [ "default", "responsive" ], "rules": [ { "selector": "max-w-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "max-width", "value": "value(--spacing-*)" } ] }, { "selector": "max-w-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "max-width", "value": "value(--container-*)" } ] } ] }, { "category": "sizing", "description": "Utilities to set the min-width property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/min-width", "name": "min-width", "variants": [ "default", "responsive" ], "rules": [ { "selector": "min-w-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "min-width", "value": "value(--spacing-*)" } ] } ] }, { "category": "spacing", "description": "Utilities to set the margin property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/margin", "name": "margin", "variants": [ "default", "responsive", "first", "last" ], "rules": [ { "selector": "m-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "margin", "value": "value(--spacing-*)" } ] }, { "selector": "mx-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "margin-left", "value": "value(--spacing-*)" }, { "prop": "margin-right", "value": "value(--spacing-*)" } ] }, { "selector": "mx-auto", "variants": [ "default", "responsive" ], "properties": [ { "prop": "margin-left", "value": "auto" }, { "prop": "margin-right", "value": "auto" } ] }, { "selector": "my-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "margin-top", "value": "value(--spacing-*)" }, { "prop": "margin-bottom", "value": "value(--spacing-*)" } ] }, { "selector": "ml-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "margin-left", "value": "value(--spacing-*)" } ] }, { "selector": "ml-auto", "variants": [ "default", "responsive" ], "properties": [ { "prop": "margin-left", "value": "auto" } ] }, { "selector": "mr-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "margin-right", "value": "value(--spacing-*)" } ] }, { "selector": "mr-auto", "variants": [ "default", "responsive" ], "properties": [ { "prop": "margin-right", "value": "auto" } ] }, { "selector": "mt-*", "variants": [ "default", "responsive", "first", "last" ], "properties": [ { "prop": "margin-top", "value": "value(--spacing-*)" } ] }, { "selector": "mb-*", "variants": [ "default", "responsive", "first", "last" ], "properties": [ { "prop": "margin-bottom", "value": "value(--spacing-*)" } ] } ] }, { "category": "spacing", "description": "Utilities to set the padding property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/padding", "name": "padding", "variants": [ "default", "responsive", "first", "last" ], "rules": [ { "selector": "p-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "padding", "value": "value(--spacing-*)" } ] }, { "selector": "px-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "padding-left", "value": "value(--spacing-*)" }, { "prop": "padding-right", "value": "value(--spacing-*)" } ] }, { "selector": "py-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "padding-top", "value": "value(--spacing-*)" }, { "prop": "padding-bottom", "value": "value(--spacing-*)" } ] }, { "selector": "pl-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "padding-left", "value": "value(--spacing-*)" } ] }, { "selector": "pr-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "padding-right", "value": "value(--spacing-*)" } ] }, { "selector": "pt-*", "variants": [ "default", "responsive", "first", "last" ], "properties": [ { "prop": "padding-top", "value": "value(--spacing-*)" } ] }, { "selector": "pb-*", "variants": [ "default", "responsive", "first", "last" ], "properties": [ { "prop": "padding-bottom", "value": "value(--spacing-*)" } ] } ] }, { "category": "typography", "description": "Utilities to set the font-family property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-family", "name": "font-family", "variants": [ "default" ], "rules": [ { "selector": "font-*", "variants": [ "default" ], "properties": [ { "prop": "font-family", "value": "value(--font-family-*)" } ] } ] }, { "category": "typography", "description": "Utilities to set the font-size property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-size", "name": "font-size", "variants": [ "default", "responsive" ], "rules": [ { "selector": "text-*", "variants": [ "default", "responsive" ], "properties": [ { "prop": "font-size", "value": "value(--font-size-*)" } ] } ] }, { "category": "typography", "description": "Utilities to set the font-style property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-style", "name": "font-style", "variants": [ "default" ], "rules": [ { "selector": "italic", "variants": [ "default" ], "properties": [ { "prop": "font-style", "value": "italic" } ] }, { "selector": "not-italic", "variants": [ "default" ], "properties": [ { "prop": "font-style", "value": "normal" } ] } ] }, { "category": "typography", "description": "Utilities to set the font-weight property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight", "name": "font-weight", "variants": [ "default", "hover", "group-hover" ], "rules": [ { "selector": "font-*", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "font-weight", "value": "value(--font-weight-*)" } ] } ] }, { "category": "typography", "description": "Utilities to set the letter-spacing property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing", "name": "letter-spacing", "variants": [ "default" ], "rules": [ { "selector": "tracking-*", "variants": [ "default" ], "properties": [ { "prop": "letter-spacing", "value": "value(--tracking-*)" } ] } ] }, { "category": "typography", "description": "Utilities to set the line-height property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/line-height", "name": "line-height", "variants": [ "default" ], "rules": [ { "selector": "leading-*", "variants": [ "default" ], "properties": [ { "prop": "line-height", "value": "value(--leading-*)" } ] } ] }, { "category": "typography", "description": "Utilities to set the list-style-position property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position", "name": "list-style-position", "variants": [ "default" ], "rules": [ { "selector": "list-inside", "variants": [ "default" ], "properties": [ { "prop": "list-style-position", "value": "inside" } ] }, { "selector": "list-outside", "variants": [ "default" ], "properties": [ { "prop": "list-style-position", "value": "outside" } ] } ] }, { "category": "typography", "description": "Utilities to set the list-style-type property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type", "name": "list-style-type", "variants": [ "default" ], "rules": [ { "selector": "list-none", "variants": [ "default" ], "properties": [ { "prop": "list-style-type", "value": "none" } ] }, { "selector": "list-disc", "variants": [ "default" ], "properties": [ { "prop": "list-style-type", "value": "disc" } ] }, { "selector": "list-decimal", "variants": [ "default" ], "properties": [ { "prop": "list-style-type", "value": "decimal" } ] } ] }, { "category": "typography", "description": "Utilities to set the text-align property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-align", "name": "text-align", "variants": [ "default" ], "rules": [ { "selector": "text-justify", "variants": [ "default" ], "properties": [ { "prop": "text-align", "value": "justify" } ] }, { "selector": "text-left", "variants": [ "default" ], "properties": [ { "prop": "text-align", "value": "left" } ] }, { "selector": "text-center", "variants": [ "default" ], "properties": [ { "prop": "text-align", "value": "center" } ] }, { "selector": "text-right", "variants": [ "default" ], "properties": [ { "prop": "text-align", "value": "right" } ] } ] }, { "category": "typography", "description": "Utilities to set the text color of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/color", "name": "text-color", "variants": [ "default", "hover", "focus", "focus-within", "group-hover" ], "rules": [ { "selector": "text-transparent", "variants": [ "default", "hover", "focus", "focus-within", "group-hover" ], "properties": [ { "prop": "color", "value": "transparent" } ] }, { "selector": "text-current", "variants": [ "default", "hover", "focus", "focus-within", "group-hover" ], "properties": [ { "prop": "color", "value": "currentColor" } ] }, { "selector": "text-*", "variants": [ "default", "hover", "focus", "focus-within", "group-hover" ], "properties": [ { "prop": "color", "value": "value(--color-*)" } ] } ] }, { "category": "typography", "description": "Utilities to set the text-decoration-line property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line", "name": "text-decoration-line", "variants": [ "default", "hover", "group-hover" ], "rules": [ { "selector": "strike", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-decoration-line", "value": "line-through" } ] }, { "selector": "underline", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-decoration-line", "value": "underline" } ] }, { "selector": "no-underline", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-decoration-line", "value": "none" } ] } ] }, { "category": "typography", "description": "Utilities to set the text-decoration-color property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color", "name": "text-decoration-color", "variants": [ "default", "hover", "group-hover" ], "rules": [ { "selector": "decoration-transparent", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-decoration-color", "value": "transparent" } ] }, { "selector": "decoration-current", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-decoration-color", "value": "currentColor" } ] }, { "selector": "decoration-*", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-decoration-color", "value": "value(--color-*)" } ] } ] }, { "category": "typography", "description": "Utilities to set the text-decoration-style property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style", "name": "text-decoration-style", "variants": [ "default", "hover", "group-hover" ], "rules": [ { "selector": "decoration-solid", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-decoration-style", "value": "solid" } ] }, { "selector": "decoration-double", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-decoration-style", "value": "double" } ] }, { "selector": "decoration-dotted", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-decoration-style", "value": "dotted" } ] }, { "selector": "decoration-dashed", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-decoration-style", "value": "dashed" } ] }, { "selector": "decoration-wavy", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-decoration-style", "value": "wavy" } ] } ] }, { "category": "typography", "description": "Utilities to set the text-decoration-thickness property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness", "name": "text-decoration-thickness", "variants": [ "default", "hover", "group-hover" ], "rules": [ { "selector": "decoration-auto", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-decoration-thickness", "value": "auto" } ] }, { "selector": "decoration-0", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-decoration-thickness", "value": "0" } ] }, { "selector": "decoration-1", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-decoration-thickness", "value": "1px" } ] }, { "selector": "decoration-2", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-decoration-thickness", "value": "2px" } ] }, { "selector": "decoration-4", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-decoration-thickness", "value": "4px" } ] }, { "selector": "decoration-8", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-decoration-thickness", "value": "8px" } ] } ] }, { "category": "typography", "description": "Utilities to set the text-underline-offset property of the element.", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset", "name": "text-underline-offset", "variants": [ "default", "hover", "group-hover" ], "rules": [ { "selector": "underline-offset-auto", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-underline-offset", "value": "auto" } ] }, { "selector": "underline-offset-0", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-underline-offset", "value": "0" } ] }, { "selector": "underline-offset-1", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-underline-offset", "value": "1px" } ] }, { "selector": "underline-offset-2", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-underline-offset", "value": "2px" } ] }, { "selector": "underline-offset-4", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-underline-offset", "value": "4px" } ] }, { "selector": "underline-offset-8", "variants": [ "default", "hover", "group-hover" ], "properties": [ { "prop": "text-underline-offset", "value": "8px" } ] } ] }, { "description": "Utilities to set the text-overflow property of the element.", "category": "typography", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow", "name": "text-overflow", "variants": [ "default" ], "rules": [ { "selector": "text-ellipsis", "variants": [ "default" ], "properties": [ { "prop": "text-overflow", "value": "ellipsis" } ] }, { "selector": "text-clip", "variants": [ "default" ], "properties": [ { "prop": "text-overflow", "value": "clip" } ] } ] }, { "description": "Utilities to set the text-transform property of the element.", "category": "typography", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform", "name": "text-transform", "variants": [ "default" ], "rules": [ { "selector": "capitalize", "variants": [ "default" ], "properties": [ { "prop": "text-transform", "value": "capitalize" } ] }, { "selector": "uppercase", "variants": [ "default" ], "properties": [ { "prop": "text-transform", "value": "uppercase" } ] }, { "selector": "lowercase", "variants": [ "default" ], "properties": [ { "prop": "text-transform", "value": "lowercase" } ] } ] }, { "description": "Utilities to set the vertical-align property of the element.", "category": "typography", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align", "name": "vertical-align", "variants": [ "default" ], "rules": [ { "selector": "align-baseline", "variants": [ "default" ], "properties": [ { "prop": "vertical-align", "value": "baseline" } ] }, { "selector": "align-top", "variants": [ "default" ], "properties": [ { "prop": "vertical-align", "value": "top" } ] }, { "selector": "align-middle", "variants": [ "default" ], "properties": [ { "prop": "vertical-align", "value": "middle" } ] }, { "selector": "align-bottom", "variants": [ "default" ], "properties": [ { "prop": "vertical-align", "value": "bottom" } ] }, { "selector": "align-text-top", "variants": [ "default" ], "properties": [ { "prop": "vertical-align", "value": "text-top" } ] }, { "selector": "align-text-bottom", "variants": [ "default" ], "properties": [ { "prop": "vertical-align", "value": "text-bottom" } ] } ] }, { "description": "utilities to set the filter (blur) property of the element.", "category": "filters", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/filter", "name": "blur", "variants": [ "default" ], "rules": [ { "selector": "blur-*", "variants": [ "default" ], "properties": [ { "prop": "filter", "value": "blur(value(--blur-*))" } ] } ] }, { "description": "utilities to set the filter (brightness) property of the element.", "category": "filters", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/filter", "name": "brightness", "variants": [ "default" ], "rules": [ { "selector": "brightness-*", "variants": [ "default" ], "properties": [ { "prop": "filter", "value": "brightness(value(--brightness-*))" } ] } ] }, { "description": "utilities to set the filter (contrast) property of the element.", "category": "filters", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/filter", "name": "contrast", "variants": [ "default" ], "rules": [ { "selector": "contrast-*", "variants": [ "default" ], "properties": [ { "prop": "filter", "value": "contrast(value(--contrast-*))" } ] } ] }, { "description": "utilities to set the filter (saturation) property of the element.", "category": "filters", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/filter", "name": "saturate", "variants": [ "default" ], "rules": [ { "selector": "saturate-*", "variants": [ "default" ], "properties": [ { "prop": "filter", "value": "saturate(value(--saturate-*))" } ] } ] } ] }