@stitches/tailwind
v9.0.0-alpha.8
Published
The atom CSS-IN-JS library
Downloads
68
Readme
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; |