Nonstick Pancake Maker

    @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;

    Install

    npm i @stitches/tailwind

    DownloadsWeekly Downloads

    154

    Version

    9.0.0-alpha.8

    License

    MIT

    Unpacked Size

    491 kB

    Total Files

    23

    Last publish

    Collaborators

    • stephenhaney
    • hadihallak
    • colmtuite