@stitches/tailwind

Use stitches to build Tailwind apps

Read more about stitches at @stitches/css.

Why

Tailwinds atomic mindset moved to a CSS-IN-JS library:

• No build step, just start using it
• No specificity issues
• No purge issues
• Small payload, about 10kb
• Use any pseudo selectors with any utility
• Automatically creates the critical CSS when used with SSR
• Can reduce payload even more with treeshaking utils and theme values
• Typed API, also when creating custom themes

Get started

Load your page with the normalized CSS of Tailwind: https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/base.css.

npm install @stitches/css @stitches/tailwind

Configure

You can configure the Tailwind instance to have a custom theme, utils and even add new utils:

// css.ts
import { createCss } from "@stitches/css";
import { createTailwindConfig } from "@stitches/tailwind";
// Treeshake by including only specific utils
// import { text, flex } from "@stitches/tailwind/utils"
import * as utils from "@stitches/tailwind/utils";
// Treeshake by including only specific theme
// import { colors, spacing } from "@stitches/tailwind/theme"
import * as theme from "@stitches/tailwind/theme";

const config = createTailwindConfig({
  screens: {
    tablet: (cssRule) => `@media (min-width: 768px) { ${cssRule} }`,
    laptop: (cssRule) => `@media (min-width: 1024px) { ${cssRule} }`,
  },
  theme: {
    ...theme,
    container: {
      center: false,
    },
  },
  utils: utils,
});

export const css = createCss(config);

Usage

Since many Tailwind classes does not conform directly to an object style syntax, Stitches Tailwind evaluates like:

css({
  // Where there are no alternative values
  absolute: true,
  // Where there are opposite classnames, you can use true and false
  italic: false,
  // Where there are multiple values you can use a single value or an array of values
  text: ["xl", "green-500"],
  flex: [true, "row"],
});

Note!. Actually all utils allows for the array syntax.

Theme

Note! Stitches Tailwind has its own theming concept that conforms to how Tailwind does theming.

To create your own theme copy the default theme and make your changes.

Any key defined as default will allow you to call its consuming utility without a value, resulting in the default value.

screens

export const screens = {
  sm: "640px",
  md: "768px",
  lg: "1024px",
  xl: "1280px",
};

container

export const container = {
  center: false,
  padding: {
    default: "0",
    sm: "0",
    md: "0",
    lg: "0",
    xl: "0",
  },
};

colors

export const colors = {
  transparent: "transparent",
  current: "currentColor",
  black: "#000",
  white: "#fff",
  "gray-100": "#f7fafc",
  "gray-200": "#edf2f7",
  "gray-300": "#e2e8f0",
  "gray-400": "#cbd5e0",
  "gray-500": "#a0aec0",
  "gray-600": "#718096",
  "gray-700": "#4a5568",
  "gray-800": "#2d3748",
  "gray-900": "#1a202c",
  "red-100": "#fff5f5",
  "red-200": "#fed7d7",
  "red-300": "#feb2b2",
  "red-400": "#fc8181",
  "red-500": "#f56565",
  "red-600": "#e53e3e",
  "red-700": "#c53030",
  "red-800": "#9b2c2c",
  "red-900": "#742a2a",
  "orange-100": "#fffaf0",
  "orange-200": "#feebc8",
  "orange-300": "#fbd38d",
  "orange-400": "#f6ad55",
  "orange-500": "#ed8936",
  "orange-600": "#dd6b20",
  "orange-700": "#c05621",
  "orange-800": "#9c4221",
  "orange-900": "#7b341e",
  "yellow-100": "#fffff0",
  "yellow-200": "#fefcbf",
  "yellow-300": "#faf089",
  "yellow-400": "#f6e05e",
  "yellow-500": "#ecc94b",
  "yellow-600": "#d69e2e",
  "yellow-700": "#b7791f",
  "yellow-800": "#975a16",
  "yellow-900": "#744210",
  "green-100": "#f0fff4",
  "green-200": "#c6f6d5",
  "green-300": "#9ae6b4",
  "green-400": "#68d391",
  "green-500": "#48bb78",
  "green-600": "#38a169",
  "green-700": "#2f855a",
  "green-800": "#276749",
  "green-900": "#22543d",
  "teal-100": "#e6fffa",
  "teal-200": "#b2f5ea",
  "teal-300": "#81e6d9",
  "teal-400": "#4fd1c5",
  "teal-500": "#38b2ac",
  "teal-600": "#319795",
  "teal-700": "#2c7a7b",
  "teal-800": "#285e61",
  "teal-900": "#234e52",
  "blue-100": "#ebf8ff",
  "blue-200": "#bee3f8",
  "blue-300": "#90cdf4",
  "blue-400": "#63b3ed",
  "blue-500": "#4299e1",
  "blue-600": "#3182ce",
  "blue-700": "#2b6cb0",
  "blue-800": "#2c5282",
  "blue-900": "#2a4365",
  "indigo-100": "#ebf4ff",
  "indigo-200": "#c3dafe",
  "indigo-300": "#a3bffa",
  "indigo-400": "#7f9cf5",
  "indigo-500": "#667eea",
  "indigo-600": "#5a67d8",
  "indigo-700": "#4c51bf",
  "indigo-800": "#434190",
  "indigo-900": "#3c366b",
  "purple-100": "#faf5ff",
  "purple-200": "#e9d8fd",
  "purple-300": "#d6bcfa",
  "purple-400": "#b794f4",
  "purple-500": "#9f7aea",
  "purple-600": "#805ad5",
  "purple-700": "#6b46c1",
  "purple-800": "#553c9a",
  "purple-900": "#44337a",
  "pink-100": "#fff5f7",
  "pink-200": "#fed7e2",
  "pink-300": "#fbb6ce",
  "pink-400": "#f687b3",
  "pink-500": "#ed64a6",
  "pink-600": "#d53f8c",
  "pink-700": "#b83280",
  "pink-800": "#97266d",
  "pink-900": "#702459",
};

spacing

export const spacing = {
  px: "1px",
  0: "0",
  1: "0.25rem",
  2: "0.5rem",
  3: "0.75rem",
  4: "1rem",
  5: "1.25rem",
  6: "1.5rem",
  8: "2rem",
  10: "2.5rem",
  12: "3rem",
  16: "4rem",
  20: "5rem",
  24: "6rem",
  32: "8rem",
  40: "10rem",
  48: "12rem",
  56: "14rem",
  64: "16rem",
};

backgroundColor

export const backgroundColor = colors;

backgroundPosition

export const backgroundPosition = {
  bottom: "bottom",
  center: "center",
  left: "left",
  "left-bottom": "left bottom",
  "left-top": "left top",
  right: "right",
  "right-bottom": "right bottom",
  "right-top": "right top",
  top: "top",
};

backgroundSize

export const backgroundSize = {
  auto: "auto",
  cover: "cover",
  contain: "contain",
};

borderColor

export const borderColor = {
  ...colors,
  "gray-300": "currentColor",
};

borderRadius

export const borderRadius = {
  none: "0",
  sm: "0.125rem",
  default: "0.25rem",
  md: "0.375rem",
  lg: "0.5rem",
  full: "9999px",
};

borderWidth

export const borderWidth = {
  default: "1px",
  0: "0",
  2: "2px",
  4: "4px",
  8: "8px",
};

boxShadow

export const boxShadow = {
  xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
  sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
  default: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
  md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
  lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
  xl:
    "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
  "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
  inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
  outline: "0 0 0 3px rgba(66, 153, 225, 0.5)",
  none: "none",
};

cursor

export const cursor = {
  default: "default",
  auto: "auto",
  pointer: "pointer",
  wait: "wait",
  text: "text",
  move: "move",
  "not-allowed": "not-allowed",
};

divideColor

export const divideColor = borderColor;

divideWidth

export const divideWidth = borderWidth;

fill

export const fill = {
  current: "currentColor",
};

flex

export const flex = {
  initial: [0, 1, "auto"],
  auto: [1, 1, "auto"],
  none: [0, 0, "auto"],
  1: [1, 1, "0%"],
};

flexGrow

export const flexGrow = {
  0: "0",
  default: "1",
};

flexShrink

export const flexShrink = {
  0: "0",
  default: "1",
};

fontFamily

export const fontFamily = {
  sans: [
    "system-ui",
    "-apple-system",
    "BlinkMacSystemFont",
    '"Segoe UI"',
    "Roboto",
    '"Helvetica Neue"',
    "Arial",
    '"Noto Sans"',
    "sans-serif",
    '"Apple Color Emoji"',
    '"Segoe UI Emoji"',
    '"Segoe UI Symbol"',
    '"Noto Color Emoji"',
  ],
  serif: ["Georgia", "Cambria", '"Times New Roman"', "Times", "serif"],
  mono: [
    "Menlo",
    "Monaco",
    "Consolas",
    '"Liberation Mono"',
    '"Courier New"',
    "monospace",
  ],
};

fontSize

export const fontSize = {
  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": "4rem",
};

fontWeight

export const fontWeight = {
  hairline: "100",
  thin: "200",
  light: "300",
  normal: "400",
  medium: "500",
  semibold: "600",
  bold: "700",
  extrabold: "800",
  black: "900",
};

height

export const height = {
  auto: "auto",
  ...spacing,
  full: "100%",
  screen: "100vh",
};

inset

export const inset = {
  0: "0",
  auto: "auto",
};

letterSpacing

export const letterSpacing = {
  tighter: "-0.05em",
  tight: "-0.025em",
  normal: "0",
  wide: "0.025em",
  wider: "0.05em",
  widest: "0.1em",
};

lineHeight

export const lineHeight = {
  none: "1",
  tight: "1.25",
  snug: "1.375",
  normal: "1.5",
  relaxed: "1.625",
  loose: "2",
  3: ".75rem",
  4: "1rem",
  5: "1.25rem",
  6: "1.5rem",
  7: "1.75rem",
  8: "2rem",
  9: "2.25rem",
  10: "2.5rem",
};

listStyleType

export const listStyleType = {
  none: "none",
  disc: "disc",
  decimal: "decimal",
};

margin

export const margin = {
  auto: "auto",
  ...spacing,
  ...negativeSpacing,
};

maxHeight

export const maxHeight = {
  full: "100%",
  screen: "100vh",
};

maxWidth

export const maxWidth = {
  none: "none",
  xs: "20rem",
  sm: "24rem",
  md: "28rem",
  lg: "32rem",
  xl: "36rem",
  "2xl": "42rem",
  "3xl": "48rem",
  "4xl": "56rem",
  "5xl": "64rem",
  "6xl": "72rem",
  full: "100%",
  "screen-sm": screens.sm,
  "screen-md": screens.md,
  "screen-lg": screens.lg,
  "screen-xl": screens.xl,
};

minHeight

export const minHeight = {
  0: "0",
  full: "100%",
  screen: "100vh",
};

minWidth

export const minWidth = {
  0: "0",
  full: "100%",
};

objectPosition

export const objectPosition = {
  bottom: "bottom",
  center: "center",
  left: "left",
  "left-bottom": "left bottom",
  "left-top": "left top",
  right: "right",
  "right-bottom": "right bottom",
  "right-top": "right top",
  top: "top",
};

opacity

export const opacity = {
  0: "0",
  25: "0.25",
  50: "0.5",
  75: "0.75",
  100: "1",
};

order

export const order = {
  first: "-9999",
  last: "9999",
  none: "0",
  1: "1",
  2: "2",
  3: "3",
  4: "4",
  5: "5",
  6: "6",
  7: "7",
  8: "8",
  9: "9",
  10: "10",
  11: "11",
  12: "12",
};

padding

export const padding = spacing;

placeholderColor

export const placeholderColor = colors;

space

export const space = spacing;

stroke

export const stroke = {
  current: "currentColor",
};

strokeWidth

export const strokeWidth = {
  0: "0",
  1: "1",
  2: "2",
};

textColor

export const textColor = colors;

width

export const width = {
  auto: "auto",
  ...spacing,
  "1/2": "50%",
  "1/3": "33.333333%",
  "2/3": "66.666667%",
  "1/4": "25%",
  "2/4": "50%",
  "3/4": "75%",
  "1/5": "20%",
  "2/5": "40%",
  "3/5": "60%",
  "4/5": "80%",
  "1/6": "16.666667%",
  "2/6": "33.333333%",
  "3/6": "50%",
  "4/6": "66.666667%",
  "5/6": "83.333333%",
  "1/12": "8.333333%",
  "2/12": "16.666667%",
  "3/12": "25%",
  "4/12": "33.333333%",
  "5/12": "41.666667%",
  "6/12": "50%",
  "7/12": "58.333333%",
  "8/12": "66.666667%",
  "9/12": "75%",
  "10/12": "83.333333%",
  "11/12": "91.666667%",
  full: "100%",
  screen: "100vw",
};

zIndex

export const zIndex = {
  auto: "auto",
  0: "0",
  10: "10",
  20: "20",
  30: "30",
  40: "40",
  50: "50",
};

gap

export const gap = {
  px: "1px",
  0: "0",
  1: "0.25rem",
  2: "0.5rem",
  3: "0.75rem",
  4: "1rem",
  5: "1.25rem",
  6: "1.5rem",
  8: "2rem",
  10: "2.5rem",
  12: "3rem",
  16: "4rem",
  20: "5rem",
  24: "6rem",
  32: "8rem",
  40: "10rem",
  48: "12rem",
  56: "14rem",
  64: "16rem",
};

gridTemplateColumns

export const gridTemplateColumns = {
  none: "none",
  1: "repeat(1, minmax(0, 1fr))",
  2: "repeat(2, minmax(0, 1fr))",
  3: "repeat(3, minmax(0, 1fr))",
  4: "repeat(4, minmax(0, 1fr))",
  5: "repeat(5, minmax(0, 1fr))",
  6: "repeat(6, minmax(0, 1fr))",
  7: "repeat(7, minmax(0, 1fr))",
  8: "repeat(8, minmax(0, 1fr))",
  9: "repeat(9, minmax(0, 1fr))",
  10: "repeat(10, minmax(0, 1fr))",
  11: "repeat(11, minmax(0, 1fr))",
  12: "repeat(12, minmax(0, 1fr))",
};

gridColumn

export const gridColumn = {
  auto: "auto",
  "span-1": "span 1 / span 1",
  "span-2": "span 2 / span 2",
  "span-3": "span 3 / span 3",
  "span-4": "span 4 / span 4",
  "span-5": "span 5 / span 5",
  "span-6": "span 6 / span 6",
  "span-7": "span 7 / span 7",
  "span-8": "span 8 / span 8",
  "span-9": "span 9 / span 9",
  "span-10": "span 10 / span 10",
  "span-11": "span 11 / span 11",
  "span-12": "span 12 / span 12",
};

gridColumnStart

export const gridColumnStart = {
  auto: "auto",
  1: "1",
  2: "2",
  3: "3",
  4: "4",
  5: "5",
  6: "6",
  7: "7",
  8: "8",
  9: "9",
  10: "10",
  11: "11",
  12: "12",
  13: "13",
};

gridColumnEnd

export const gridColumnEnd = {
  auto: "auto",
  1: "1",
  2: "2",
  3: "3",
  4: "4",
  5: "5",
  6: "6",
  7: "7",
  8: "8",
  9: "9",
  10: "10",
  11: "11",
  12: "12",
  13: "13",
};

gridTemplateRows

export const gridTemplateRows = {
  none: "none",
  1: "repeat(1, minmax(0, 1fr))",
  2: "repeat(2, minmax(0, 1fr))",
  3: "repeat(3, minmax(0, 1fr))",
  4: "repeat(4, minmax(0, 1fr))",
  5: "repeat(5, minmax(0, 1fr))",
  6: "repeat(6, minmax(0, 1fr))",
};

gridRow

export const gridRow = {
  auto: "auto",
  "span-1": "span 1 / span 1",
  "span-2": "span 2 / span 2",
  "span-3": "span 3 / span 3",
  "span-4": "span 4 / span 4",
  "span-5": "span 5 / span 5",
  "span-6": "span 6 / span 6",
};

gridRowStart

export const gridRowStart = {
  auto: "auto",
  1: "1",
  2: "2",
  3: "3",
  4: "4",
  5: "5",
  6: "6",
  7: "7",
};

gridRowEnd

export const gridRowEnd = {
  auto: "auto",
  1: "1",
  2: "2",
  3: "3",
  4: "4",
  5: "5",
  6: "6",
  7: "7",
};

transformOrigin

export const transformOrigin = {
  center: "center",
  top: "top",
  "top-right": "top right",
  right: "right",
  "bottom-right": "bottom right",
  bottom: "bottom",
  "bottom-left": "bottom left",
  left: "left",
  "top-left": "top left",
};

scale

export const scale = {
  0: "0",
  50: ".5",
  75: ".75",
  90: ".9",
  95: ".95",
  100: "1",
  105: "1.05",
  110: "1.1",
  125: "1.25",
  150: "1.5",
};

rotate

export const rotate = {
  [-180]: "-180deg",
  [-90]: "-90deg",
  [-45]: "-45deg",
  0: "0",
  45: "45deg",
  90: "90deg",
  180: "180deg",
};

translate

export const translate = {
  ...spacing,
  ...negativeSpacing,
  "-full": "-100%",
  "-1/2": "-50%",
  "1/2": "50%",
  full: "100%",
};

skew

export const skew = {
  [-12]: "-12deg",
  [-6]: "-6deg",
  [-3]: "-3deg",
  0: "0",
  3: "3deg",
  6: "6deg",
  12: "12deg",
};

transitionProperty

export const transitionProperty = {
  none: "none",
  all: "all",
  default:
    "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
  colors: "background-color, border-color, color, fill, stroke",
  opacity: "opacity",
  shadow: "box-shadow",
  transform: "transform",
};

transitionTimingFunction

export const transitionTimingFunction = {
  linear: "linear",
  in: "cubic-bezier(0.4, 0, 1, 1)",
  out: "cubic-bezier(0, 0, 0.2, 1)",
  "in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
};

transitionDuration

export const transitionDuration = {
  75: "75ms",
  100: "100ms",
  150: "150ms",
  200: "200ms",
  300: "300ms",
  500: "500ms",
  700: "700ms",
  1000: "1000ms",
};

transitionDelay

export const transitionDelay = {
  75: "75ms",
  100: "100ms",
  150: "150ms",
  200: "200ms",
  300: "300ms",
  500: "500ms",
  700: "700ms",
  1000: "1000ms",
};

Utilities

absolute

The element is positioned relative to the nearest non static parent.

Argument	Properties
	position: absolute;

align

The element vertical alignment.

Argument	Properties
baseline	vertical-align: baseline;
top	vertical-align: top;
middle	vertical-align: middle;
bottom	vertical-align: bottom;
text-top	vertical-align: text-top;
text-bottom	vertical-align: text-bottom;

antialiased

The element renders test with antialiasing.

Argument	Properties
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

appearance

The element appearance.

Argument	Properties
none	appearance: none;

bg

The element background attachment, color, repeat, size and position.

Argument	Properties
fixed	background-attachment: fixed;
local	background-attachment: local;
scroll	background-attachment: scroll;
repeat	background-repeat: repeat;
no-repeat	background-repeat: no-repeat;
repeat-x	background-repeat: repeat-x;
repeat-y	background-repeat: repeat-y;
repeat-round	background-repeat: repeat-round;
repeat-space	background-repeat: repeat-space;
backgroundPosition	background-position: value;
backgroundSize	background-size: value;
backgroundColor	background-color: value;

block

The element takes up as much space as possible.

Argument	Properties
	display: block;

border

The element border width and color.

Argument	Properties
collapse	border-collapse: collapse;
separate	border-collapse: separate;
borderWidth	border-top-width: value; border-right-width: value; border-bottom-width: value; border-left-width: value;
borderColor	border-top-color: value; border-right-color: value; border-bottom-color: value; border-left-color: value;

borderB

The element bottom border width.

Argument	Properties
borderWidth	border-bottom-width: value;
borderColor	border-bottom-color: value;

borderL

The element left border width.

Argument	Properties
borderWidth	border-left-width: value;
borderColor	border-left-color: value;

borderR

The element right border width.

Argument	Properties
borderWidth	border-right-width: value;
borderColor	border-right-color: value;

borderT

The element top border width.

Argument	Properties
borderWidth	border-top-width: value;
borderColor	border-top-color: value;

bottom

The element, given it is absolutely positioned, will be anchored to the bottom of its relative parent.

Argument	Properties
inset	bottom: value;

box

The element border and padding inclusion when you give it a height or width.

Argument	Properties
border	box-sizing: border-box;
content	box-sizing: content-box;

breakText

The element word break behaviour.

note! It is named breakText as break is a keyword in JavaScript.

Argument	Properties
normal	word-break: normal; overflow-wrap: normal;
words	overflow-wrap: break-word;
all	word-break: all;

capitalize

The element text is capitalized.

Argument	Properties
	text-transform: capitalize;

clear

The element will be positioned below any preceeding floating elements.

Argument	Properties
right	clear: right;
left	clear: left;
both	clear: both;

clearfix

The elements floating in this element will not overflow.

Argument	Properties
	:after { content: ""; display: table; clear: both; }

col

The element column span in a grid container.

Argument	Properties
gridColumn	grid-column: value;

colEnd

The element column start index in a grid container.

Argument	Properties
gridColumnEnd	grid-column-end: value;

colGap

The element row gap size, given it is in a grid.

Argument	Properties
gap	column-gap: value;

colStart

The element column start index in a grid container.

Argument	Properties
gridColumnStart	grid-column-start: value;

container

A container that sets its max-width based on screens.

Breakpoints	Properties
none	width: 100%;
sm (640px)	max-width: 640px;
md (768px)	max-width: 768px;
lg (1024px)	max-width: 1024px;
xl (1280px)	max-width: 1280px;

content

The element lines positioned when flex.

Argument	Properties
start	align-content: flex-start;
center	align-content: center;
end	align-content: flex-end;
space-between	align-content: space-between;
around	align-content: space-around;

cursor

The element cursor.

Argument	Properties
cursor	cursor: value;

delay

The element transition delay.

Argument	Properties
transitionDelay	transition-delay: value;

divideBottom

The element children bottom border divide.

Default selector: > * + *

Argument	Properties
divideWidth	border-bottom-width: value;
divideColor	border-bottom-color: value;

divideLeft

The element children left border divide.

Default selector: > * + *

Argument	Properties
divideWidth	border-left-width: value;
divideColor	border-left-color: value;

divideRight

The element children right border divide.

Default selector: > * + *

Argument	Properties
divideWidth	border-right-width: value;
divideColor	border-right-color: value;

divideTop

The element children top border divide.

Default selector: > * + *

Argument	Properties
divideWidth	border-top-width: value;
divideColor	border-top-color: value;

duration

The element transition duration.

Argument	Properties
transitionDuration	transition-duration: value;

ease

The element transition timing function.

Argument	Properties
transitionTimingFunction	transition-timing-function: value;

fill

The element fill.

Argument	Properties
fill	fill: value;

fixed

The element is positioned relative to the browser window.

Argument	Properties
	position: fixed;

flex

The element flex behaviour, it being a flex container or a flex child.

Argument	Properties
	display: flex;
row	display: flex; flex-direction: row;
row-reverse	display: flex; flex-direction: row-reverse;
col	display: flex; flex-direction: column;
col-reverse	display: flex; flex-direction: column-reverse;
flex	flex-grow: value[0]; flex-shrink: value[1]; flex-basis: value[2];

float

The element is floated in its container.

Argument	Properties
right	float: right;
left	float: left;
none	float: none;

flowRoot

The element has its own block formatting context

Argument	Properties
	display: flow-root;

font

The element font family and weight.

Argument	Properties
fontFamily	font-family: value;
fontWeight	font-weight: value;

gap

The element gap size, given it is in a grid.

Argument	Properties
gap	gap: value;

grid

The element is a grid.

Argument	Properties
	display: grid;

gridCols

The element grid column size.

Argument	Properties
gridTemplateColumns	grid-template-columns: value;

gridFlow

The element children are auto placed.

Argument	Properties
row	grid-auto-flow: row;
col	grid-auto-flow: column;
row-dense	grid-auto-flow: row dense;
col-dense	grid-auto-flow: column-dense;

gridRows

The element grid row size.

Argument	Properties
gridTemplateRows	grid-template-rows: value;

grow

The element flex growth.

Argument	Properties
flexGrow	flex-grow: value;

h (value, selector?)

The element height.

Argument	Properties
h	height: value;

hidden

The element is hidden.

Argument	Properties
	display: none;

inline

The element is displayed as inline.

Argument	Properties
	display: inline;

inlineBlock

The element is displayed as inline block.

Argument	Properties
	display: inline-block;

inlineFlex

The element is displayed as inline flex.

Argument	Properties
	display: inline-flex;

inlineGrid

The element is displayed as an inline grid.

Argument	Properties
	display: inline-grid;

inset

The element, given it is absolutely positioned, will be anchored to its relative parent.

Argument	Properties
inset	top: value; right: value; bottom: value; left: value;

insetX

The element, given it is absolutely positioned, will be anchored to the left and right of its relative parent.

Uses theme.inset

Argument	Properties
inset	right: value; left: value;

insetY

The element, given it is absolutely positioned, will be anchored to the top and bottom of its relative parent.

Uses theme.inset

Argument	Properties
inset	top: value; bottom: value;

invisible

The element is invisible.

Argument	Properties
	visibility: hidden;

italic

The element renders text in italic.

Argument	Properties
	font-style: italic;

items

The element children cross axis behaviour.

Argument	Properties
stretch	align-items: stretch;
start	align-items: flex-start;
center	align-items: center;
end	align-items: flex-end;
baseline	align-items: baseline;

justify

The element children main axis behaviour.

Argument	Properties
start	justify-content: flex-start;
center	justify-content: center;
end	justify-content: flex-end;
between	justify-content: space-between;
around	justify-content: space-around;

leading

The element line height.

Argument	Properties
lineHeight	line-height: value;

left

The element, given it is absolutely positioned, will be anchored to the left of its relative parent.

Argument	Properties
inset	left: value;

lineThrough

The element text decoration as line-through.

Argument	Properties
	text-decoration: line-through;

list

The element list type.

Argument	Properties
inside	list-style-position: inside;
outside	list-style-position: outside;
listStyleType	line-style-type: value;

lowercase

The element text is lower cased.

Argument	Properties
	text-transform: lowercase;

m

The element margin.

Argument	Properties
margin	margin-top: value; margin-right: value; margin-bottom: value; margin-left: value;

maxH

The element maximum height.

Argument	Properties
maxHeight	max-height: value;

maxW

The element maximum width.

Argument	Properties
maxWidth	max-width: value;

mb

The element bottom margin.

Argument	Properties
margin	margin-bottom: value;

minH

The element minimum height.

Argument	Properties
minHeight	min-height: value;

minW

The element minimum width.

Argument	Properties
minwidth	min-width: value;

ml

The element left margin.

Argument	Properties
margin	margin-left: value;

mr

The element right margin.

Argument	Properties
margin	margin-right: value;

mt

The element top margin.

Argument	Properties
margin	margin-top: value;

mx

The element left and right margin.

Argument	Properties
margin	margin-right: value; margin-left: value;

my

The element top and bottom margin.

Argument	Properties
margin	margin-top: value; margin-bottom: value;

normalCase

The element has no text transform.

Argument	Properties
	text-transform: none;

notItalic

The element renders text in normal style.

Argument	Properties
	font-style: normal;

notSrOnly

The element is not only visible on screenreaders.

Argument	Properties
	position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal;

noUnderline

The element text decoration as none.

Argument	Properties
	text-decoration: none;

table

The element is displayed as a table element.

Argument	Properties
	display: table;
caption	display: table-caption;
cell	display: table-cell;
col	display: table-column;
col-group	display: table-column-group;
footer-group	display: table-footer-group;
header-group	display: table-header-group;
row-group	display: table-row-group;
row	display: table-row;
auto	table-layout: auto;
fixed	table-layout: fixed;

object

The element content resize behaviour and how the content will be positioned.

Argument	Properties
contain	object-fit: contain;
cover	object-fit: cover;
fill	object-fit: fill;
none	object-fit: none;
scale-down	object-fit: scale-down;
objectPosition	object-position: value;

opacity

The element box shadow.

Argument	Properties
opacity	opacity: value;

order

The element order in a flex container.

Argument	Properties
order	order: value;

origin

The element origin transform.

Argument	Properties
transformOrigin	transform-origin: value;

outline

The element outline.

Argument	Properties
none	outline: none;

oveflow

The element behaviour of overflowing content in both directions.

Argument	Properties
auto	overflow-x: auto; overflow-y: auto;
hidden	overflow-x: hidden; overflow-y: hidden;
visible	overflow-x: visible; overflow-y: visible;
scroll	overflow-x: scroll; overflow-y: scroll;

oveflowX

The element behaviour of overflowing content in horizontal direction.

Argument	Properties
auto	overflow-x: auto;
hidden	overflow-x: hidden;
visible	overflow-x: visible;
scroll	overflow-x: scroll;

oveflowY

The element behaviour of overflowing content vertical direction.

Argument	Properties
auto	overflow-y: auto;
hidden	overflow-y: hidden;
visible	overflow-y: visible;
scroll	overflow-y: scroll;

p

The element padding.

Argument	Properties
padding	padding-top: value; padding-right: value; padding-bottom: value; padding-left: value;

pb

The element bottom padding.

Argument	Properties
padding	padding-bottom: value;

pl

The element left padding.

Argument	Properties
padding	padding-left: value;

placeholder

The element placeholder color.

Default selector: ::placeholder

Argument	Properties
placeholderColor	color: value;

pointerEvents

The element pointer events.

Argument	Properties
none	pointer-events: none;
auto	pointer-events: auto;

pr

The element right padding.

Argument	Properties
padding	padding-right: value;

pt

The element top padding.

Argument	Properties
padding	padding-top: value;

px

The element left and right padding.

Argument	Properties
padding	padding-right: value; padding-left: value;

py

The element top and bottom padding.

Argument	Properties
padding	padding-top: value; padding-bottom: value;

resize

The element resize behaviour.

Argument	Properties
	resize: both;
none	resize: none;
y	resize: vertical;
x	resize: horizontal;

relative

The element is positioned normally and children elements can be positioned relative to this element.

Argument	Properties
	position: relative;

right

The element, given it is absolutely positioned, will be anchored to the right of its relative parent.

Argument	Properties
inset	right: value;

rotate

The element rotate transform.

Argument	Properties
rotate	--transform-rotate: value;

rounded

The element border radius.

Argument	Properties
borderRadius	border-top-left-radius: value; border-top-right-radius: value; border-bottom-right-radius: value; border-bottom-left-radius: value;

roundedB

The element bottom border radius.

Argument	Properties
borderRadius	border-bottom-right-radius: value; border-bottom-left-radius: value;

roundedBL

The element bottom left border radius.

Argument	Properties
borderRadius	border-bottom-left-radius: value;

roundedBR

The element bottom right border radius.

Argument	Properties
borderRadius	border-bottom-right-radius: value;

roundedL

The element left border radius.

Argument	Properties
borderRadius	border-top-left-radius: value; border-bottom-left-radius: value;

roundedR

The element right border radius.

Argument	Properties
borderRadius	border-top-right-radius: value; border-bottom-right-radius: value;

roundedT

The element top border radius.

Argument	Properties
borderRadius	border-top-left-radius: value; border-top-right-radius: value;

roundedTL

The element top left border radius.

Argument	Properties
borderRadius	border-top-left-radius: value;

roundedTR

The element top right border radius.

Argument	Properties
borderRadius	border-top-right-radius: value;

row

The element row span in a grid container.

Argument	Properties
gridRow	grid-row: value;

rowEnd

The element row end index in a grid container.

Argument	Properties
gridRowEnd	grid-row-end: value;

rowGap

The element row gap size, given it is in a grid.

Argument	Properties
gap	row-gap: value;

rowStart

The element row start index in a grid container.

Argument	Properties
gridRowStart	grid-row-start: value;

scale

The element scale transform.

Argument	Properties
scale	--transform-scale-x: value; --transform-scale-y: value;

scaleX

The element scale transform on the X axis.

Argument	Properties
scale	--transform-scale-x: value;

scaleY

The element scale transform on the Y axis.

Argument	Properties
scale	--transform-scale-y: value;

scrolling

The element scroll behaviour.

Argument	Properties
touch	-webkit-overflow-scrolling: touch;
auto	-webkit-overflow-scrolling: auto;

select

The element user selection behaviour.

Argument	Properties
none	user-select: none;
text	user-select: text;
all	user-select: all;
auto	user-select: auto;

self

The element lines positioned when flex.

Argument	Properties
auto	align-self: auto;
start	align-self: flex-start;
center	align-self: center;
end	align-self: flex-end;
stretch	align-self: stretch;

shadow

The element box shadow.

Argument	Properties
boxShadow	box-shadow: value;

shrink

The element flex shrink.

Argument	Properties
flexShrink	flex-shrink: value;

skewX

The element skew transform on the X axis.

Argument	Properties
skew	--transform-skew-x: value;

skewY

The element skew transform on the Y axis.

Argument	Properties
skew	--transform-skew-y: value;

spaceBottom

The element children spacing.

Default selector: > * + *

Argument	Properties
margin	margin-bottom: value;

spaceLeft

The element children spacing.

Default selector: > * + *

Argument	Properties
margin	margin-left: value;

spaceRight

The element children spacing.

Default selector: > * + *

Argument	Properties
margin	margin-right: value;

spaceTop

The element children spacing.

Default selector: > * + *

Argument	Properties
margin	margin-top: value;

srOnly

The element is only visible on screenreaders.

Argument	Properties
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;

staticPosition

The element is positioned normally, but children elements can not be positioned relative to this element.

Note! The reason it is not called static is becaues that is a keyword in JavaScript.

Argument	Properties
	position: static;

sticky

The element is relative by default, but acts automatically as fixed when risk of going outside screen, until parent goes completely off screen.

Argument	Properties
	position: sticky;

stroke

The element stroke.

Argument	Properties
stroke	stroke: value;
strokeWidth	stroke-width: value;

subpixelAntialiased

The element renders text with subpixel antialiasing.

Argument	Properties
	-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;

text

The element text styling.

Argument	Properties
left	text-align: left;
center	text-align: center;
right	text-align: right;
justify	text-align: justify;
textColor	color: value;
fontSize	font-size: value;

top

The element, given it is absolutely positioned, will be anchored to the top of its relative parent.

Argument	Properties
inset	top: value;

tracking

The element letter spacing.

Argument	Properties
letterSpacing	letter-spacing: value;

transform

The element will transform.

Argument

Properties

--transform-translate-x: 0; --transform-translate-y: 0; --transform-rotate: 0; --transform-skew-x: 0; --transform-skew-y: 0; --transform-scale-x: 0; --transform-scale-y: 0; transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y))

transition

The element transition property.

Argument	Properties
transitionProperty	transition-property: value;

translateX

The element translate transform on the X axis.

Argument	Properties
translate	--transform-translate-x: value;

translateY

The element translate transform on the Y axis.

Argument	Properties
translate	--transform-translate-y: value;

truncate

The element text is truncated.

Argument	Properties
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

underline

The element text decoration as underline.

Argument	Properties
	text-decoration: underline;

uppercase

The element text is upper cased.

Argument	Properties
	text-transform: uppercase;

visible

The element is visible.

Argument	Properties
	visibility: visible;

w

The element width.

Argument	Properties
width	width: value;

whitespace

The element white space behaviour.

Argument	Properties
normal	white-space: normal;
no-wrap	white-space: nowrap;
pre	white-space: pre;
pre-line	white-space: pre-line;
pre-wrap	white-space: pre-wrap;

wrap

The element flex wrapping behaviour.

Argument	Properties
	flex-wrap: wrap;
none	flex-wrap: nowrap;
reverse	flex-wrap: wrap-reverse;

z

The element stack order.

Argument	Properties
inset	z-index: value;