@stitches/tailwind
TypeScript icon, indicating that this package has built-in type declarations

9.0.0-alpha.8 • Public • Published

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;

Package Sidebar

Install

npm i @stitches/tailwind

Weekly Downloads

3

Version

9.0.0-alpha.8

License

MIT

Unpacked Size

491 kB

Total Files

23

Last publish

Collaborators

  • stephenhaney
  • hadihallak
  • colmtuite