@stitches/tailwind v9.0.0-alpha.8

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.

align

The element vertical alignment.

antialiased

The element renders test with antialiasing.

appearance

The element appearance.

bg

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

block

The element takes up as much space as possible.

border

The element border width and color.

borderB

The element bottom border width.

borderL

The element left border width.

borderR

The element right border width.

borderT

The element top border width.

bottom

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

box

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

breakText

The element word break behaviour.

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

capitalize

The element text is capitalized.

clear

The element will be positioned below any preceeding floating elements.

clearfix

The elements floating in this element will not overflow.

col

The element column span in a grid container.

colEnd

The element column start index in a grid container.

colGap

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

colStart

The element column start index in a grid container.

container

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

content

The element lines positioned when flex.

cursor

The element cursor.

delay

The element transition delay.

divideBottom

The element children bottom border divide.

Default selector: > * + *

divideLeft

The element children left border divide.

Default selector: > * + *

divideRight

The element children right border divide.

Default selector: > * + *

divideTop

The element children top border divide.

Default selector: > * + *

duration

The element transition duration.

ease

The element transition timing function.

fill

The element fill.

fixed

The element is positioned relative to the browser window.

flex

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

float

The element is floated in its container.

flowRoot

The element has its own block formatting context

font

The element font family and weight.

gap

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

grid

The element is a grid.

gridCols

The element grid column size.

gridFlow

The element children are auto placed.

gridRows

The element grid row size.

grow

The element flex growth.

h (value, selector?)

The element height.

hidden

The element is hidden.

inline

The element is displayed as inline.

inlineBlock

The element is displayed as inline block.

inlineFlex

The element is displayed as inline flex.

inlineGrid

The element is displayed as an inline grid.

inset

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

insetX

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

Uses theme.inset

insetY

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

Uses theme.inset

invisible

The element is invisible.

italic

The element renders text in italic.

items

The element children cross axis behaviour.

justify

The element children main axis behaviour.

leading

The element line height.

left

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

lineThrough

The element text decoration as line-through.

list

The element list type.

lowercase

The element text is lower cased.

m

The element margin.

maxH

The element maximum height.

maxW

The element maximum width.

mb

The element bottom margin.

minH

The element minimum height.

minW

The element minimum width.

ml

The element left margin.

mr

The element right margin.

mt

The element top margin.

mx

The element left and right margin.

my

The element top and bottom margin.

normalCase

The element has no text transform.

notItalic

The element renders text in normal style.

notSrOnly

The element is not only visible on screenreaders.

noUnderline

The element text decoration as none.

table

The element is displayed as a table element.

object

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

opacity

The element box shadow.

order

The element order in a flex container.

origin

The element origin transform.

outline

The element outline.

oveflow

The element behaviour of overflowing content in both directions.

oveflowX

The element behaviour of overflowing content in horizontal direction.

oveflowY

The element behaviour of overflowing content vertical direction.

p

The element padding.

pb

The element bottom padding.

pl

The element left padding.

placeholder

The element placeholder color.

Default selector: ::placeholder

pointerEvents

The element pointer events.

pr

The element right padding.

pt

The element top padding.

px

The element left and right padding.

py

The element top and bottom padding.

resize

The element resize behaviour.

relative

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

right

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

rotate

The element rotate transform.

rounded

The element border radius.

roundedB

The element bottom border radius.

roundedBL

The element bottom left border radius.

roundedBR

The element bottom right border radius.

roundedL

The element left border radius.

roundedR

The element right border radius.

roundedT

The element top border radius.

roundedTL

The element top left border radius.

roundedTR

The element top right border radius.

row

The element row span in a grid container.

rowEnd

The element row end index in a grid container.

rowGap

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

rowStart

The element row start index in a grid container.

scale

The element scale transform.

scaleX

The element scale transform on the X axis.

scaleY

The element scale transform on the Y axis.

scrolling

The element scroll behaviour.

select

The element user selection behaviour.

self

The element lines positioned when flex.

shadow

The element box shadow.

shrink

The element flex shrink.

skewX

The element skew transform on the X axis.

skewY

The element skew transform on the Y axis.

spaceBottom

The element children spacing.

Default selector: > * + *

spaceLeft

The element children spacing.

Default selector: > * + *

spaceRight

The element children spacing.

Default selector: > * + *

spaceTop

The element children spacing.

Default selector: > * + *

srOnly

The element is only visible on screenreaders.

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.

sticky

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

stroke

The element stroke.

subpixelAntialiased

The element renders text with subpixel antialiasing.

text

The element text styling.

top

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

tracking

The element letter spacing.

transform

The element will transform.

transition

The element transition property.

translateX

The element translate transform on the X axis.

translateY

The element translate transform on the Y axis.

truncate

The element text is truncated.

underline

The element text decoration as underline.

uppercase

The element text is upper cased.

visible

The element is visible.

w

The element width.

whitespace

The element white space behaviour.

wrap

The element flex wrapping behaviour.

z

The element stack order.