Status: This library is only a few days/weeks old. While it works, it's considered to be in Beta.

React Native Restyled

A Utility-first Styling Library for [React Native][rn].

Features

• ⚡ Zero-overhead: Styles get injected via the [StyleSheet][stylesheet] API during compilation.
• 🍂 Minimal footprint: Styles that are never used won't make it to the final App bundle.
• 🎲 Variants support: Conditionally style based on Platform, Layout or Screen size ... etc.
• 💅 Style props: Supports common style-related Component props e.g. numberOfLines, and selectable.
• 🔌 Customizable (Coming soon): Optionally override the default theme by adding styled.config.js file

Table of Contents

• Getting started
• Utilities
  • Display
  • Flex
  • Flex Direction
  • Flex Grow
  • Flex Shrink
  • Flex Wrap
  • Align Self
  • Align Items
  • Align Content
  • Justify Content
  • Font Size
  • Font Style
  • Font Variant
  • Font Weight
  • Height
  • Width
  • Max-Height
  • Max-Width
  • Min-Height
  • Min-Width
  • Border Color
  • Border Radius
  • Border Style
  • Border Width
  • Background Color
  • Letter Spacing
  • Text Align
  • Text Align (Vertical)
  • Text Color
  • Text Decoration
  • Text Transform
  • Margin
  • Padding
  • Overflow
  • Opacity
  • Rotate
  • Scale
  • Skew
  • Translate
  • Position
  • Resize Mode
  • Top / Right / Bottom / Left
  • Z-Index
  • Number of lines ( prop )
  • Selectable ( prop )
• Variants
  • Platform (Built-in)
  • Layout (Built-in)
  • Responsive
  • Dark mode
• Best Practices
  • Group variant styles together
• Prior Art
• License

Getting started

Compatible with React Native v0.62.0 or later

yarn add react-native-restyled babel-plugin-macros

Add babel-plugin-macros to your Babel config (if you haven't already)

// babel.config.js
module.exports = function (api) {
	return {
		plugins: ['macros'],
		// ... other stuff
	};
};

To use the library simply import the macro as follows:

import styled from 'react-native-restyled/macro';

const Heading = ({ text }) => (
	<Text
		{...styled([
			'my-4',
			'text-2xl',
			'text-gray-900',
			'font-semibold',
			'letter-wide',
		])}
	>
		{text}
	</Text>
);

The compiled output for the above code will look something like the following:

import { Text } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { rem } from 'react-native-restyled/path/not/relevant';
-import styled from 'react-native-restyled/macro';

const Heading = ({ text }) => (
	<Text
-		{...styled([
-			'my-4',
-			'text-2xl',
-			'text-gray-900',
-			'font-semibold',
-			'letter-wide',
-		])}
+		{...{
+			style: styles._default,
+   		// other props e.g. numberOfLines in case of 'lines-*'
+		}}
	>
		{text}
	</Text>
);

+const styles = StyleSheet.create({
+	_default: {
+		marginVertical: rem(1),
+		fontSize: rem(1.5),
+		color: '#1a202c',
+		fontWeight: '600',
+		letterSpacing: rem(0.025),
+	},
+});

How does it work?

• styled (you can name it anything) is a [Babel Macro][macro] which means it will be executed during compilation.
• It will map the given styles and resolve the necessary style attributes/props.
• It will try to merge styles of the same variant if possible so we don't end up creating an object for every style e.g. text-2xl.
• For the best performance, it will then use the good/old StyleSheet.create to create the styles as you should normally do by yourself in a React Native app.

The output for any code you write will look more or less the same as above. The only exception is a style with multiple variants because we need to add logic to switch styles at runtime (same as you would do e.g. using Platform.select())

Utilities

Display

| Name | Style(s) | | ------ | --------------------- | | flex | { display: "flex" } | | hidden | { display: "none" } |

Flex

Tip: The following styles are generated based on theme.flex values.

| Name | Style(s) | | ------------ | --------------------------------------------------- | | flex-1 | { flexGrow: 1, flexShrink: 1, flexBasis: "0%" } | | flex-auto | { flexGrow: 1, flexShrink: 1, flexBasis: "auto" } | | flex-initial | { flexGrow: 0, flexShrink: 1, flexBasis: "auto" } | | flex-none | { flexGrow: 0, flexShrink: 0, flexBasis: "auto" } |

Flex Direction

| Name | Style(s) | | ---------------- | ------------------------------------- | | flex-col | { flexDirection: "column" } | | flex-col-reverse | { flexDirection: "column-reverse" } | | flex-row | { flexDirection: "row" } | | flex-row-reverse | { flexDirection: "row-reverse" } |

Flex Grow

Tip: The following styles are generated based on theme.flexGrow values.

| Name | Style(s) | | ----------- | ----------------- | | flex-grow | { flexGrow: 1 } | | flex-grow-0 | { flexGrow: 0 } |

Flex Shrink

Tip: The following styles are generated based on theme.flexShrink values.

| Name | Style(s) | | ------------- | ------------------- | | flex-shrink | { flexShrink: 1 } | | flex-shrink-0 | { flexShrink: 0 } |

Flex Wrap

| Name | Style(s) | | ----------------- | ------------------------------ | | flex-no-wrap | { flexWrap: "nowrap" } | | flex-wrap | { flexWrap: "wrap" } | | flex-wrap-reverse | { flexWrap: "wrap-reverse" } |

Align Self

| Name | Style(s) | | ------------ | ----------------------------- | | self-auto | { alignSelf: "auto" } | | self-center | { alignSelf: "center" } | | self-end | { alignSelf: "flex-end" } | | self-start | { alignSelf: "flex-start" } | | self-stretch | { alignSelf: "stretch" } |

Align Items

| Name | Style(s) | | -------------- | ------------------------------ | | items-baseline | { alignItems: "baseline" } | | items-center | { alignItems: "center" } | | items-end | { alignItems: "flex-end" } | | items-start | { alignItems: "flex-start" } | | items-stretch | { alignItems: "stretch" } |

Align Content

| Name | Style(s) | | --------------- | ----------------------------------- | | content-around | { alignContent: "space-around" } | | content-between | { alignContent: "space-between" } | | content-center | { alignContent: "center" } | | content-end | { alignContent: "flex-end" } | | content-start | { alignContent: "flex-start" } | | content-stretch | { alignContent: "stretch" } |

Justify Content

| Name | Style(s) | | --------------- | ------------------------------------- | | justify-around | { justifyContent: "space-around" } | | justify-between | { justifyContent: "space-between" } | | justify-center | { justifyContent: "center" } | | justify-end | { justifyContent: "flex-end" } | | justify-evenly | { justifyContent: "space-evenly" } | | justify-start | { justifyContent: "flex-start" } |

Font Size

Tip: The following styles are generated based on theme.fontSize values.

| Name | Style(s) | | --------- | -------------------------- | | text-2xl | { fontSize: rem(1.5) } | | text-3xl | { fontSize: rem(1.875) } | | text-4xl | { fontSize: rem(2.25) } | | text-5xl | { fontSize: rem(3) } | | text-6xl | { fontSize: rem(4) } | | text-base | { fontSize: rem(1) } | | text-lg | { fontSize: rem(1.125) } | | text-sm | { fontSize: rem(0.875) } | | text-xl | { fontSize: rem(1.25) } | | text-xs | { fontSize: rem(0.75) } |

Font Style

| Name | Style(s) | | ---------- | ------------------------- | | italic | { fontStyle: "italic" } | | not-italic | { fontStyle: "normal" } |

Font Variant

| Name | Style(s) | | ----------------- | ---------------------------------------- | | lining-nums | { fontVariant: ["lining-nums"] } | | oldstyle-nums | { fontVariant: ["oldstyle-nums"] } | | proportional-nums | { fontVariant: ["proportional-nums"] } | | small-caps | { fontVariant: ["small-caps"] } | | tabular-nums | { fontVariant: ["tabular-nums"] } |

Font Weight

Tip: The following styles are generated based on theme.fontWeight values.

| Name | Style(s) | | -------------- | ----------------------- | | font-black | { fontWeight: "900" } | | font-bold | { fontWeight: "700" } | | font-extrabold | { fontWeight: "800" } | | font-hairline | { fontWeight: "100" } | | font-light | { fontWeight: "300" } | | font-medium | { fontWeight: "500" } | | font-normal | { fontWeight: "400" } | | font-semibold | { fontWeight: "600" } | | font-thin | { fontWeight: "200" } |

Height

Tip: The following styles are generated based on theme.height values.

| Name | Style(s) | | ---- | ----------------------- | | h-0 | { height: 0 } | | h-1 | { height: rem(0.25) } | | h-10 | { height: rem(2.5) } | | h-12 | { height: rem(3) } | | h-16 | { height: rem(4) } | | h-2 | { height: rem(0.5) } | | h-20 | { height: rem(5) } | | h-24 | { height: rem(6) } | | h-3 | { height: rem(0.75) } | | h-32 | { height: rem(8) } | | h-4 | { height: rem(1) } | | h-40 | { height: rem(10) } | | h-48 | { height: rem(12) } | | h-5 | { height: rem(1.25) } | | h-56 | { height: rem(14) } | | h-6 | { height: rem(1.5) } | | h-64 | { height: rem(16) } | | h-8 | { height: rem(2) } | | h-px | { height: 1 } |

Width

Tip: The following styles are generated based on theme.width values.

| Name | Style(s) | | ------- | ------------------------- | | w-0 | { width: 0 } | | w-1 | { width: rem(0.25) } | | w-1/12 | { width: "8.333333%" } | | w-1/2 | { width: "50%" } | | w-1/3 | { width: "33.333333%" } | | w-1/4 | { width: "25%" } | | w-1/5 | { width: "20%" } | | w-1/6 | { width: "16.666667%" } | | w-10 | { width: rem(2.5) } | | w-10/12 | { width: "83.333333%" } | | w-11/12 | { width: "91.666667%" } | | w-12 | { width: rem(3) } | | w-16 | { width: rem(4) } | | w-2 | { width: rem(0.5) } | | w-2/12 | { width: "16.666667%" } | | w-2/3 | { width: "66.666667%" } | | w-2/4 | { width: "50%" } | | w-2/5 | { width: "40%" } | | w-2/6 | { width: "33.333333%" } | | w-20 | { width: rem(5) } | | w-24 | { width: rem(6) } | | w-3 | { width: rem(0.75) } | | w-3/12 | { width: "25%" } | | w-3/4 | { width: "75%" } | | w-3/5 | { width: "60%" } | | w-3/6 | { width: "50%" } | | w-32 | { width: rem(8) } | | w-4 | { width: rem(1) } | | w-4/12 | { width: "33.333333%" } | | w-4/5 | { width: "80%" } | | w-4/6 | { width: "66.666667%" } | | w-40 | { width: rem(10) } | | w-48 | { width: rem(12) } | | w-5 | { width: rem(1.25) } | | w-5/12 | { width: "41.666667%" } | | w-5/6 | { width: "83.333333%" } | | w-56 | { width: rem(14) } | | w-6 | { width: rem(1.5) } | | w-6/12 | { width: "50%" } | | w-64 | { width: rem(16) } | | w-7/12 | { width: "58.333333%" } | | w-8 | { width: rem(2) } | | w-8/12 | { width: "66.666667%" } | | w-9/12 | { width: "75%" } | | w-full | { width: "100%" } | | w-px | { width: 1 } |

Max-Height

Tip: The following styles are generated based on theme.maxHeight values.

| Name | Style(s) | | ---------- | ----------------------- | | max-h-full | { maxHeight: "100%" } |

Max-Width

Tip: The following styles are generated based on theme.maxWidth values.

| Name | Style(s) | | ---------- | ----------------------- | | max-w-2xl | { maxWidth: rem(42) } | | max-w-3xl | { maxWidth: rem(48) } | | max-w-4xl | { maxWidth: rem(56) } | | max-w-5xl | { maxWidth: rem(64) } | | max-w-6xl | { maxWidth: rem(72) } | | max-w-full | { maxWidth: "100%" } | | max-w-lg | { maxWidth: rem(32) } | | max-w-md | { maxWidth: rem(28) } | | max-w-none | { maxWidth: "none" } | | max-w-sm | { maxWidth: rem(24) } | | max-w-xl | { maxWidth: rem(36) } | | max-w-xs | { maxWidth: rem(20) } |

Min-Height

Tip: The following styles are generated based on theme.minHeight values.

| Name | Style(s) | | ---------- | ----------------------- | | min-h-0 | { minHeight: 0 } | | min-h-full | { minHeight: "100%" } |

Min-Width

Tip: The following styles are generated based on theme.minWidth values.

| Name | Style(s) | | ---------- | ---------------------- | | min-w-0 | { minWidth: 0 } | | min-w-full | { minWidth: "100%" } |

Border Color

Tip: The following styles are generated based on theme.borderColor values.

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

Border Radius

Tip: The following styles are generated based on theme.borderRadius values.

| Name | Style(s) | | --------------- | ----------------------------------------------------------------------------- | | rounded | { borderRadius: rem(0.25) } | | rounded-2xl | { borderRadius: rem(1) } | | rounded-3xl | { borderRadius: rem(1.5) } | | rounded-b | { borderBottomRightRadius: rem(0.25), borderBottomLeftRadius: rem(0.25) } | | rounded-b-2xl | { borderBottomRightRadius: rem(1), borderBottomLeftRadius: rem(1) } | | rounded-b-3xl | { borderBottomRightRadius: rem(1.5), borderBottomLeftRadius: rem(1.5) } | | rounded-b-full | { borderBottomRightRadius: 9999, borderBottomLeftRadius: 9999 } | | rounded-b-lg | { borderBottomRightRadius: rem(0.5), borderBottomLeftRadius: rem(0.5) } | | rounded-b-md | { borderBottomRightRadius: rem(0.375), borderBottomLeftRadius: rem(0.375) } | | rounded-b-none | { borderBottomRightRadius: 0, borderBottomLeftRadius: 0 } | | rounded-b-sm | { borderBottomRightRadius: rem(0.125), borderBottomLeftRadius: rem(0.125) } | | rounded-b-xl | { borderBottomRightRadius: rem(0.75), borderBottomLeftRadius: rem(0.75) } | | rounded-bl | { borderBottomLeftRadius: rem(0.25) } | | rounded-bl-2xl | { borderBottomLeftRadius: rem(1) } | | rounded-bl-3xl | { borderBottomLeftRadius: rem(1.5) } | | rounded-bl-full | { borderBottomLeftRadius: 9999 } | | rounded-bl-lg | { borderBottomLeftRadius: rem(0.5) } | | rounded-bl-md | { borderBottomLeftRadius: rem(0.375) } | | rounded-bl-none | { borderBottomLeftRadius: 0 } | | rounded-bl-sm | { borderBottomLeftRadius: rem(0.125) } | | rounded-bl-xl | { borderBottomLeftRadius: rem(0.75) } | | rounded-br | { borderBottomRightRadius: rem(0.25) } | | rounded-br-2xl | { borderBottomRightRadius: rem(1) } | | rounded-br-3xl | { borderBottomRightRadius: rem(1.5) } | | rounded-br-full | { borderBottomRightRadius: 9999 } | | rounded-br-lg | { borderBottomRightRadius: rem(0.5) } | | rounded-br-md | { borderBottomRightRadius: rem(0.375) } | | rounded-br-none | { borderBottomRightRadius: 0 } | | rounded-br-sm | { borderBottomRightRadius: rem(0.125) } | | rounded-br-xl | { borderBottomRightRadius: rem(0.75) } | | rounded-full | { borderRadius: 9999 } | | rounded-l | { borderTopLeftRadius: rem(0.25), borderBottomLeftRadius: rem(0.25) } | | rounded-l-2xl | { borderTopLeftRadius: rem(1), borderBottomLeftRadius: rem(1) } | | rounded-l-3xl | { borderTopLeftRadius: rem(1.5), borderBottomLeftRadius: rem(1.5) } | | rounded-l-full | { borderTopLeftRadius: 9999, borderBottomLeftRadius: 9999 } | | rounded-l-lg | { borderTopLeftRadius: rem(0.5), borderBottomLeftRadius: rem(0.5) } | | rounded-l-md | { borderTopLeftRadius: rem(0.375), borderBottomLeftRadius: rem(0.375) } | | rounded-l-none | { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } | | rounded-l-sm | { borderTopLeftRadius: rem(0.125), borderBottomLeftRadius: rem(0.125) } | | rounded-l-xl | { borderTopLeftRadius: rem(0.75), borderBottomLeftRadius: rem(0.75) } | | rounded-lg | { borderRadius: rem(0.5) } | | rounded-md | { borderRadius: rem(0.375) } | | rounded-none | { borderRadius: 0 } | | rounded-r | { borderTopRightRadius: rem(0.25), borderBottomRightRadius: rem(0.25) } | | rounded-r-2xl | { borderTopRightRadius: rem(1), borderBottomRightRadius: rem(1) } | | rounded-r-3xl | { borderTopRightRadius: rem(1.5), borderBottomRightRadius: rem(1.5) } | | rounded-r-full | { borderTopRightRadius: 9999, borderBottomRightRadius: 9999 } | | rounded-r-lg | { borderTopRightRadius: rem(0.5), borderBottomRightRadius: rem(0.5) } | | rounded-r-md | { borderTopRightRadius: rem(0.375), borderBottomRightRadius: rem(0.375) } | | rounded-r-none | { borderTopRightRadius: 0, borderBottomRightRadius: 0 } | | rounded-r-sm | { borderTopRightRadius: rem(0.125), borderBottomRightRadius: rem(0.125) } | | rounded-r-xl | { borderTopRightRadius: rem(0.75), borderBottomRightRadius: rem(0.75) } | | rounded-sm | { borderRadius: rem(0.125) } | | rounded-t | { borderTopLeftRadius: rem(0.25), borderTopRightRadius: rem(0.25) } | | rounded-t-2xl | { borderTopLeftRadius: rem(1), borderTopRightRadius: rem(1) } | | rounded-t-3xl | { borderTopLeftRadius: rem(1.5), borderTopRightRadius: rem(1.5) } | | rounded-t-full | { borderTopLeftRadius: 9999, borderTopRightRadius: 9999 } | | rounded-t-lg | { borderTopLeftRadius: rem(0.5), borderTopRightRadius: rem(0.5) } | | rounded-t-md | { borderTopLeftRadius: rem(0.375), borderTopRightRadius: rem(0.375) } | | rounded-t-none | { borderTopLeftRadius: 0, borderTopRightRadius: 0 } | | rounded-t-sm | { borderTopLeftRadius: rem(0.125), borderTopRightRadius: rem(0.125) } | | rounded-t-xl | { borderTopLeftRadius: rem(0.75), borderTopRightRadius: rem(0.75) } | | rounded-te | { borderTopEndRadius: rem(0.25) } | | rounded-te-2xl | { borderTopEndRadius: rem(1) } | | rounded-te-3xl | { borderTopEndRadius: rem(1.5) } | | rounded-te-full | { borderTopEndRadius: 9999 } | | rounded-te-lg | { borderTopEndRadius: rem(0.5) } | | rounded-te-md | { borderTopEndRadius: rem(0.375) } | | rounded-te-none | { borderTopEndRadius: 0 } | | rounded-te-sm | { borderTopEndRadius: rem(0.125) } | | rounded-te-xl | { borderTopEndRadius: rem(0.75) } | | rounded-tl | { borderTopLeftRadius: rem(0.25) } | | rounded-tl-2xl | { borderTopLeftRadius: rem(1) } | | rounded-tl-3xl | { borderTopLeftRadius: rem(1.5) } | | rounded-tl-full | { borderTopLeftRadius: 9999 } | | rounded-tl-lg | { borderTopLeftRadius: rem(0.5) } | | rounded-tl-md | { borderTopLeftRadius: rem(0.375) } | | rounded-tl-none | { borderTopLeftRadius: 0 } | | rounded-tl-sm | { borderTopLeftRadius: rem(0.125) } | | rounded-tl-xl | { borderTopLeftRadius: rem(0.75) } | | rounded-tr | { borderTopRightRadius: rem(0.25) } | | rounded-tr-2xl | { borderTopRightRadius: rem(1) } | | rounded-tr-3xl | { borderTopRightRadius: rem(1.5) } | | rounded-tr-full | { borderTopRightRadius: 9999 } | | rounded-tr-lg | { borderTopRightRadius: rem(0.5) } | | rounded-tr-md | { borderTopRightRadius: rem(0.375) } | | rounded-tr-none | { borderTopRightRadius: 0 } | | rounded-tr-sm | { borderTopRightRadius: rem(0.125) } | | rounded-tr-xl | { borderTopRightRadius: rem(0.75) } | | rounded-ts | { borderTopStartRadius: rem(0.25) } | | rounded-ts-2xl | { borderTopStartRadius: rem(1) } | | rounded-ts-3xl | { borderTopStartRadius: rem(1.5) } | | rounded-ts-full | { borderTopStartRadius: 9999 } | | rounded-ts-lg | { borderTopStartRadius: rem(0.5) } | | rounded-ts-md | { borderTopStartRadius: rem(0.375) } | | rounded-ts-none | { borderTopStartRadius: 0 } | | rounded-ts-sm | { borderTopStartRadius: rem(0.125) } | | rounded-ts-xl | { borderTopStartRadius: rem(0.75) } | | rounded-xl | { borderRadius: rem(0.75) } |

Border Style

| Name | Style(s) | | ------------- | --------------------------- | | border-dashed | { borderStyle: "dashed" } | | border-dotted | { borderStyle: "dotted" } | | border-solid | { borderStyle: "solid" } |

Border Width

Tip: The following styles are generated based on theme.borderWidth values.

| Name | Style(s) | | ---------- | -------------------------- | | border | { borderWidth: 1 } | | border-0 | { borderWidth: 0 } | | border-2 | { borderWidth: 2 } | | border-4 | { borderWidth: 4 } | | border-8 | { borderWidth: 8 } | | border-b | { borderBottomWidth: 1 } | | border-b-0 | { borderBottomWidth: 0 } | | border-b-2 | { borderBottomWidth: 2 } | | border-b-4 | { borderBottomWidth: 4 } | | border-b-8 | { borderBottomWidth: 8 } | | border-e | { borderEndWidth: 1 } | | border-e-0 | { borderEndWidth: 0 } | | border-e-2 | { borderEndWidth: 2 } | | border-e-4 | { borderEndWidth: 4 } | | border-e-8 | { borderEndWidth: 8 } | | border-l | { borderLeftWidth: 1 } | | border-l-0 | { borderLeftWidth: 0 } | | border-l-2 | { borderLeftWidth: 2 } | | border-l-4 | { borderLeftWidth: 4 } | | border-l-8 | { borderLeftWidth: 8 } | | border-r | { borderRightWidth: 1 } | | border-r-0 | { borderRightWidth: 0 } | | border-r-2 | { borderRightWidth: 2 } | | border-r-4 | { borderRightWidth: 4 } | | border-r-8 | { borderRightWidth: 8 } | | border-s | { borderStartWidth: 1 } | | border-s-0 | { borderStartWidth: 0 } | | border-s-2 | { borderStartWidth: 2 } | | border-s-4 | { borderStartWidth: 4 } | | border-s-8 | { borderStartWidth: 8 } | | border-t | { borderTopWidth: 1 } | | border-t-0 | { borderTopWidth: 0 } | | border-t-2 | { borderTopWidth: 2 } | | border-t-4 | { borderTopWidth: 4 } | | border-t-8 | { borderTopWidth: 8 } |

Background Color

Tip: The following styles are generated based on theme.backgroundColor values.

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

Letter Spacing

Tip: The following styles are generated based on theme.letterSpacing values.

| Name | Style(s) | | -------------- | -------------------------------- | | letter-normal | { letterSpacing: 0 } | | letter-tight | { letterSpacing: rem(-0.025) } | | letter-tighter | { letterSpacing: rem(-0.05) } | | letter-wide | { letterSpacing: rem(0.025) } | | letter-wider | { letterSpacing: rem(0.05) } | | letter-widest | { letterSpacing: rem(0.1) } |

Text Align

| Name | Style(s) | | ------------ | -------------------------- | | text-auto | { textAlign: "auto" } | | text-center | { textAlign: "center" } | | text-justify | { textAlign: "justify" } | | text-left | { textAlign: "left" } | | text-right | { textAlign: "right" } |

Text Align (Vertical)

| Name | Style(s) | | ------------- | --------------------------------- | | text-v-auto | { textAlignVertical: "auto" } | | text-v-bottom | { textAlignVertical: "bottom" } | | text-v-center | { textAlignVertical: "center" } | | text-v-top | { textAlignVertical: "top" } |

Text Color

Tip: The following styles are generated based on theme.textColor values.

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

Text Decoration

| Name | Style(s) | | ------------ | ---------------------------------------- | | line-through | { textDecorationLine: "line-through" } | | no-underline | { textDecorationLine: "none" } | | underline | { textDecorationLine: "underline" } |

Text Transform

| Name | Style(s) | | ----------- | --------------------------------- | | capitalize | { textTransform: "capitalize" } | | lowercase | { textTransform: "lowercase" } | | normal-case | { textTransform: "none" } | | uppercase | { textTransform: "uppercase" } |

Margin

Tip: The following styles are generated based on theme.margin values.

| Name | Style(s) | | ------ | ------------------------------------ | | -m-0 | { margin: 0 } | | -m-1 | { margin: "-rem(0.25)" } | | -m-10 | { margin: "-rem(2.5)" } | | -m-12 | { margin: "-rem(3)" } | | -m-16 | { margin: "-rem(4)" } | | -m-2 | { margin: "-rem(0.5)" } | | -m-20 | { margin: "-rem(5)" } | | -m-24 | { margin: "-rem(6)" } | | -m-3 | { margin: "-rem(0.75)" } | | -m-32 | { margin: "-rem(8)" } | | -m-4 | { margin: "-rem(1)" } | | -m-40 | { margin: "-rem(10)" } | | -m-48 | { margin: "-rem(12)" } | | -m-5 | { margin: "-rem(1.25)" } | | -m-56 | { margin: "-rem(14)" } | | -m-6 | { margin: "-rem(1.5)" } | | -m-64 | { margin: "-rem(16)" } | | -m-8 | { margin: "-rem(2)" } | | -m-px | { margin: -1 } | | -mb-0 | { marginBottom: 0 } | | -mb-1 | { marginBottom: "-rem(0.25)" } | | -mb-10 | { marginBottom: "-rem(2.5)" } | | -mb-12 | { marginBottom: "-rem(3)" } | | -mb-16 | { marginBottom: "-rem(4)" } | | -mb-2 | { marginBottom: "-rem(0.5)" } | | -mb-20 | { marginBottom: "-rem(5)" } | | -mb-24 | { marginBottom: "-rem(6)" } | | -mb-3 | { marginBottom: "-rem(0.75)" } | | -mb-32 | { marginBottom: "-rem(8)" } | | -mb-4 | { marginBottom: "-rem(1)" } | | -mb-40 | { marginBottom: "-rem(10)" } | | -mb-48 | { marginBottom: "-rem(12)" } | | -mb-5 | { marginBottom: "-rem(1.25)" } | | -mb-56 | { marginBottom: "-rem(14)" } | | -mb-6 | { marginBottom: "-rem(1.5)" } | | -mb-64 | { marginBottom: "-rem(16)" } | | -mb-8 | { marginBottom: "-rem(2)" } | | -mb-px | { marginBottom: -1 } | | -me-0 | { marginEnd: 0 } | | -me-1 | { marginEnd: "-rem(0.25)" } | | -me-10 | { marginEnd: "-rem(2.5)" } | | -me-12 | { marginEnd: "-rem(3)" } | | -me-16 | { marginEnd: "-rem(4)" } | | -me-2 | { marginEnd: "-rem(0.5)" } | | -me-20 | { marginEnd: "-rem(5)" } | | -me-24 | { marginEnd: "-rem(6)" } | | -me-3 | { marginEnd: "-rem(0.75)" } | | -me-32 | { marginEnd: "-rem(8)" } | | -me-4 | { marginEnd: "-rem(1)" } | | -me-40 | { marginEnd: "-rem(10)" } | | -me-48 | { marginEnd: "-rem(12)" } | | -me-5 | { marginEnd: "-rem(1.25)" } | | -me-56 | { marginEnd: "-rem(14)" } | | -me-6 | { marginEnd: "-rem(1.5)" } | | -me-64 | { marginEnd: "-rem(16)" } | | -me-8 | { marginEnd: "-rem(2)" } | | -me-px | { marginEnd: -1 } | | -ml-0 | { marginLeft: 0 } | | -ml-1 | { marginLeft: "-rem(0.25)" } | | -ml-10 | { marginLeft: "-rem(2.5)" } | | -ml-12 | { marginLeft: "-rem(3)" } | | -ml-16 | { marginLeft: "-rem(4)" } | | -ml-2 | { marginLeft: "-rem(0.5)" } | | -ml-20 | { marginLeft: "-rem(5)" } | | -ml-24 | { marginLeft: "-rem(6)" } | | -ml-3 | { marginLeft: "-rem(0.75)" } | | -ml-32 | { marginLeft: "-rem(8)" } | | -ml-4 | { marginLeft: "-rem(1)" } | | -ml-40 | { marginLeft: "-rem(10)" } | | -ml-48 | { marginLeft: "-rem(12)" } | | -ml-5 | { marginLeft: "-rem(1.25)" } | | -ml-56 | { marginLeft: "-rem(14)" } | | -ml-6 | { marginLeft: "-rem(1.5)" } | | -ml-64 | { marginLeft: "-rem(16)" } | | -ml-8 | { marginLeft: "-rem(2)" } | | -ml-px | { marginLeft: -1 } | | -mr-0 | { marginRight: 0 } | | -mr-1 | { marginRight: "-rem(0.25)" } | | -mr-10 | { marginRight: "-rem(2.5)" } | | -mr-12 | { marginRight: "-rem(3)" } | | -mr-16 | { marginRight: "-rem(4)" } | | -mr-2 | { marginRight: "-rem(0.5)" } | | -mr-20 | { marginRight: "-rem(5)" } | | -mr-24 | { marginRight: "-rem(6)" } | | -mr-3 | { marginRight: "-rem(0.75)" } | | -mr-32 | { marginRight: "-rem(8)" } | | -mr-4 | { marginRight: "-rem(1)" } | | -mr-40 | { marginRight: "-rem(10)" } | | -mr-48 | { marginRight: "-rem(12)" } | | -mr-5 | { marginRight: "-rem(1.25)" } | | -mr-56 | { marginRight: "-rem(14)" } | | -mr-6 | { marginRight: "-rem(1.5)" } | | -mr-64 | { marginRight: "-rem(16)" } | | -mr-8 | { marginRight: "-rem(2)" } | | -mr-px | { marginRight: -1 } | | -ms-0 | { marginStart: 0 } | | -ms-1 | { marginStart: "-rem(0.25)" } | | -ms-10 | { marginStart: "-rem(2.5)" } | | -ms-12 | { marginStart: "-rem(3)" } | | -ms-16 | { marginStart: "-rem(4)" } | | -ms-2 | { marginStart: "-rem(0.5)" } | | -ms-20 | { marginStart: "-rem(5)" } | | -ms-24 | { marginStart: "-rem(6)" } | | -ms-3 | { marginStart: "-rem(0.75)" } | | -ms-32 | { marginStart: "-rem(8)" } | | -ms-4 | { marginStart: "-rem(1)" } | | -ms-40 | { marginStart: "-rem(10)" } | | -ms-48 | { marginStart: "-rem(12)" } | | -ms-5 | { marginStart: "-rem(1.25)" } | | -ms-56 | { marginStart: "-rem(14)" } | | -ms-6 | { marginStart: "-rem(1.5)" } | | -ms-64 | { marginStart: "-rem(16)" } | | -ms-8 | { marginStart: "-rem(2)" } | | -ms-px | { marginStart: -1 } | | -mt-0 | { marginTop: 0 } | | -mt-1 | { marginTop: "-rem(0.25)" } | | -mt-10 | { marginTop: "-rem(2.5)" } | | -mt-12 | { marginTop: "-rem(3)" } | | -mt-16 | { marginTop: "-rem(4)" } | | -mt-2 | { marginTop: "-rem(0.5)" } | | -mt-20 | { marginTop: "-rem(5)" } | | -mt-24 | { marginTop: "-rem(6)" } | | -mt-3 | { marginTop: "-rem(0.75)" } | | -mt-32 | { marginTop: "-rem(8)" } | | -mt-4 | { marginTop: "-rem(1)" } | | -mt-40 | { marginTop: "-rem(10)" } | | -mt-48 | { marginTop: "-rem(12)" } | | -mt-5 | { marginTop: "-rem(1.25)" } | | -mt-56 | { marginTop: "-rem(14)" } | | -mt-6 | { marginTop: "-rem(1.5)" } | | -mt-64 | { marginTop: "-rem(16)" } | | -mt-8 | { marginTop: "-rem(2)" } | | -mt-px | { marginTop: -1 } | | -mx-0 | { marginHorizontal: 0 } | | -mx-1 | { marginHorizontal: "-rem(0.25)" } | | -mx-10 | { marginHorizontal: "-rem(2.5)" } | | -mx-12 | { marginHorizontal: "-rem(3)" } | | -mx-16 | { marginHorizontal: "-rem(4)" } | | -mx-2 | { marginHorizontal: "-rem(0.5)" } | | -mx-20 | { marginHorizontal: "-rem(5)" } | | -mx-24 | { marginHorizontal: "-rem(6)" } | | -mx-3 | { marginHorizontal: "-rem(0.75)" } | | -mx-32 | { marginHorizontal: "-rem(8)" } | | -mx-4 | { marginHorizontal: "-rem(1)" } | | -mx-40 | { marginHorizontal: "-rem(10)" } | | -mx-48 | { marginHorizontal: "-rem(12)" } | | -mx-5 | { marginHorizontal: "-rem(1.25)" } | | -mx-56 | { marginHorizontal: "-rem(14)" } | | -mx-6 | { marginHorizontal: "-rem(1.5)" } | | -mx-64 | { marginHorizontal: "-rem(16)" } | | -mx-8 | { marginHorizontal: "-rem(2)" } | | -mx-px | { marginHorizontal: -1 } | | -my-0 | { marginVertical: 0 } | | -my-1 | { marginVertical: "-rem(0.25)" } | | -my-10 | { marginVertical: "-rem(2.5)" } | | -my-12 | { marginVertical: "-rem(3)" } | | -my-16 | { marginVertical: "-rem(4)" } | | -my-2 | { marginVertical: "-rem(0.5)" } | | -my-20 | { marginVertical: "-rem(5)" } | | -my-24 | { marginVertical: "-rem(6)" } | | -my-3 | { marginVertical: "-rem(0.75)" } | | -my-32 | { marginVertical: "-rem(8)" } | | -my-4 | { marginVertical: "-rem(1)" } | | -my-40 | { marginVertical: "-rem(10)" } | | -my-48 | { marginVertical: "-rem(12)" } | | -my-5 | { marginVertical: "-rem(1.25)" } | | -my-56 | { marginVertical: "-rem(14)" } | | -my-6 | { marginVertical: "-rem(1.5)" } | | -my-64 | { marginVertical: "-rem(16)" } | | -my-8 | { marginVertical: "-rem(2)" } | | -my-px | { marginVertical: -1 } | | m-0 | { margin: 0 } | | m-1 | { margin: rem(0.25) } | | m-10 | { margin: rem(2.5) } | | m-12 | { margin: rem(3) } | | m-16 | { margin: rem(4) } | | m-2 | { margin: rem(0.5) } | | m-20 | { margin: rem(5) } | | m-24 | { margin: rem(6) } | | m-3 | { margin: rem(0.75) } | | m-32 | { margin: rem(8) } | | m-4 | { margin: rem(1) } | | m-40 | { margin: rem(10) } | | m-48 | { margin: rem(12) } | | m-5 | { margin: rem(1.25) } | | m-56 | { margin: rem(14) } | | m-6 | { margin: rem(1.5) } | | m-64 | { margin: rem(16) } | | m-8 | { margin: rem(2) } | | m-px | { margin: 1 } | | mb-0 | { marginBottom: 0 } | | mb-1 | { marginBottom: rem(0.25) } | | mb-10 | { marginBottom: rem(2.5) } | | mb-12 | { marginBottom: rem(3) } | | mb-16 | { marginBottom: rem(4) } | | mb-2 | { marginBottom: rem(0.5) } | | mb-20 | { marginBottom: rem(5) } | | mb-24 | { marginBottom: rem(6) } | | mb-3 | { marginBottom: rem(0.75) } | | mb-32 | { marginBottom: rem(8) } | | mb-4 | { marginBottom: rem(1) } | | mb-40 | { marginBottom: rem(10) } | | mb-48 | { marginBottom: rem(12) } | | mb-5 | { marginBottom: rem(1.25) } | | mb-56 | { marginBottom: rem(14) } | | mb-6 | { marginBottom: rem(1.5) } | | mb-64 | { marginBottom: rem(16) } | | mb-8 | { marginBottom: rem(2) } | | mb-px | { marginBottom: 1 } | | me-0 | { marginEnd: 0 } | | me-1 | { marginEnd: rem(0.25) } | | me-10 | { marginEnd: rem(2.5) } | | me-12 | { marginEnd: rem(3) } | | me-16 | { marginEnd: rem(4) } | | me-2 | { marginEnd: rem(0.5) } | | me-20 | { marginEnd: rem(5) } | | me-24 | { marginEnd: rem(6) } | | me-3 | { marginEnd: rem(0.75) } | | me-32 | { marginEnd: rem(8) } | | me-4 | { marginEnd: rem(1) } | | me-40 | { marginEnd: rem(10) } | | me-48 | { marginEnd: rem(12) } | | me-5 | { marginEnd: rem(1.25) } | | me-56 | { marginEnd: rem(14) } | | me-6 | { marginEnd: rem(1.5) } | | me-64 | { marginEnd: rem(16) } | | me-8 | { marginEnd: rem(2) } | | me-px | { marginEnd: 1 } | | ml-0 | { marginLeft: 0 } | | ml-1 | { marginLeft: rem(0.25) } | | ml-10 | { marginLeft: rem(2.5) } | | ml-12 | { marginLeft: rem(3) } | | ml-16 | { marginLeft: rem(4) } | | ml-2 | { marginLeft: rem(0.5) } | | ml-20 | { marginLeft: rem(5) } | | ml-24 | { marginLeft: rem(6) } | | ml-3 | { marginLeft: rem(0.75) } | | ml-32 | { marginLeft: rem(8) } | | ml-4 | { marginLeft: rem(1) } | | ml-40 | { marginLeft: rem(10) } | | ml-48 | { marginLeft: rem(12) } | | ml-5 | { marginLeft: rem(1.25) } | | ml-56 | { marginLeft: rem(14) } | | ml-6 | { marginLeft: rem(1.5) } | | ml-64 | { marginLeft: rem(16) } | | ml-8 | { marginLeft: rem(2) } | | ml-px | { marginLeft: 1 } | | mr-0 | { marginRight: 0 } | | mr-1 | { marginRight: rem(0.25) } | | mr-10 | { marginRight: rem(2.5) } | | mr-12 | { marginRight: rem(3) } | | mr-16 | { marginRight: rem(4) } | | mr-2 | { marginRight: rem(0.5) } | | mr-20 | { marginRight: rem(5) } | | mr-24 | { marginRight: rem(6) } | | mr-3 | { marginRight: rem(0.75) } | | mr-32 | { marginRight: rem(8) } | | mr-4 | { marginRight: rem(1) } | | mr-40 | { marginRight: rem(10) } | | mr-48 | { marginRight: rem(12) } | | mr-5 | { marginRight: rem(1.25) } | | mr-56 | { marginRight: rem(14) } | | mr-6 | { marginRight: rem(1.5) } | | mr-64 | { marginRight: rem(16) } | | mr-8 | { marginRight: rem(2) } | | mr-px | { marginRight: 1 } | | ms-0 | { marginStart: 0 } | | ms-1 | { marginStart: rem(0.25) } | | ms-10 | { marginStart: rem(2.5) } | | ms-12 | { marginStart: rem(3) } | | ms-16 | { marginStart: rem(4) } | | ms-2 | { marginStart: rem(0.5) } | | ms-20 | { marginStart: rem(5) } | | ms-24 | { marginStart: rem(6) } | | ms-3 | { marginStart: rem(0.75) } | | ms-32 | { marginStart: rem(8) } | | ms-4 | { marginStart: rem(1) } | | ms-40 | { marginStart: rem(10) } | | ms-48 | { marginStart: rem(12) } | | ms-5 | { marginStart: rem(1.25) } | | ms-56 | { marginStart: rem(14) } | | ms-6 | { marginStart: rem(1.5) } | | ms-64 | { marginStart: rem(16) } | | ms-8 | { marginStart: rem(2) } | | ms-px | { marginStart: 1 } | | mt-0 | { marginTop: 0 } | | mt-1 | { marginTop: rem(0.25) } | | mt-10 | { marginTop: rem(2.5) } | | mt-12 | { marginTop: rem(3) } | | mt-16 | { marginTop: rem(4) } | | mt-2 | { marginTop: rem(0.5) } | | mt-20 | { marginTop: rem(5) } | | mt-24 | { marginTop: rem(6) } | | mt-3 | { marginTop: rem(0.75) } | | mt-32 | { marginTop: rem(8) } | | mt-4 | { marginTop: rem(1) } | | mt-40 | { marginTop: rem(10) } | | mt-48 | { marginTop: rem(12) } | | mt-5 | { marginTop: rem(1.25) } | | mt-56 | { marginTop: rem(14) } | | mt-6 | { marginTop: rem(1.5) } | | mt-64 | { marginTop: rem(16) } | | mt-8 | { marginTop: rem(2) } | | mt-px | { marginTop: 1 } | | mx-0 | { marginHorizontal: 0 } | | mx-1 | { marginHorizontal: rem(0.25) } | | mx-10 | { marginHorizontal: rem(2.5) } | | mx-12 | { marginHorizontal: rem(3) } | | mx-16 | { marginHorizontal: rem(4) } | | mx-2 | { marginHorizontal: rem(0.5) } | | mx-20 | { marginHorizontal: rem(5) } | | mx-24 | { marginHorizontal: rem(6) } | | mx-3 | { marginHorizontal: rem(0.75) } | | mx-32 | { marginHorizontal: rem(8) } | | mx-4 | { marginHorizontal: rem(1) } | | mx-40 | { marginHorizontal: rem(10) } | | mx-48 | { marginHorizontal: rem(12) } | | mx-5 | { marginHorizontal: rem(1.25) } | | mx-56 | { marginHorizontal: rem(14) } | | mx-6 | { marginHorizontal: rem(1.5) } | | mx-64 | { marginHorizontal: rem(16) } | | mx-8 | { marginHorizontal: rem(2) } | | mx-px | { marginHorizontal: 1 } | | my-0 | { marginVertical: 0 } | | my-1 | { marginVertical: rem(0.25) } | | my-10 | { marginVertical: rem(2.5) } | | my-12 | { marginVertical: rem(3) } | | my-16 | { marginVertical: rem(4) } | | my-2 | { marginVertical: rem(0.5) } | | my-20 | { marginVertical: rem(5) } | | my-24 | { marginVertical: rem(6) } | | my-3 | { marginVertical: rem(0.75) } | | my-32 | { marginVertical: rem(8) } | | my-4 | { marginVertical: rem(1) } | | my-40 | { marginVertical: rem(10) } | | my-48 | { marginVertical: rem(12) } | | my-5 | { marginVertical: rem(1.25) } | | my-56 | { marginVertical: rem(14) } | | my-6 | { marginVertical: rem(1.5) } | | my-64 | { marginVertical: rem(16) } | | my-8 | { marginVertical: rem(2) } | | my-px | { marginVertical: 1 } |

Padding

Tip: The following styles are generated based on theme.padding values.

| Name | Style(s) | | ----- | ---------------------------------- | | p-0 | { padding: 0 } | | p-1 | { padding: rem(0.25) } | | p-10 | { padding: rem(2.5) } | | p-12 | { padding: rem(3) } | | p-16 | { padding: rem(4) } | | p-2 | { padding: rem(0.5) } | | p-20 | { padding: rem(5) } | | p-24 | { padding: rem(6) } | | p-3 | { padding: rem(0.75) } | | p-32 | { padding: rem(8) } | | p-4 | { padding: rem(1) } | | p-40 | { padding: rem(10) } | | p-48 | { padding: rem(12) } | | p-5 | { padding: rem(1.25) } | | p-56 | { padding: rem(14) } | | p-6 | { padding: rem(1.5) } | | p-64 | { padding: rem(16) } | | p-8 | { padding: rem(2) } | | p-px | { padding: 1 } | | pb-0 | { paddingBottom: 0 } | | pb-1 | { paddingBottom: rem(0.25) } | | pb-10 | { paddingBottom: rem(2.5) } | | pb-12 | { paddingBottom: rem(3) } | | pb-16 | { paddingBottom: rem(4) } | | pb-2 | { paddingBottom: rem(0.5) } | | pb-20 | { paddingBottom: rem(5) } | | pb-24 | { paddingBottom: rem(6) } | | pb-3 | { paddingBottom: rem(0.75) } | | pb-32 | { paddingBottom: rem(8) } | | pb-4 | { paddingBottom: rem(1) } | | pb-40 | { paddingBottom: rem(10) } | | pb-48 | { paddingBottom: rem(12) } | | pb-5 | { paddingBottom: rem(1.25) } | | pb-56 | { paddingBottom: rem(14) } | | pb-6 | { paddingBottom: rem(1.5) } | | pb-64 | { paddingBottom: rem(16) } | | pb-8 | { paddingBottom: rem(2) } | | pb-px | { paddingBottom: 1 } | | pe-0 | { paddingEnd: 0 } | | pe-1 | { paddingEnd: rem(0.25) } | | pe-10 | { paddingEnd: rem(2.5) } | | pe-12 | { paddingEnd: rem(3) } | | pe-16 | { paddingEnd: rem(4) } | | pe-2 | { paddingEnd: rem(0.5) } | | pe-20 | { paddingEnd: rem(5) } | | pe-24 | { paddingEnd: rem(6) } | | pe-3 | { paddingEnd: rem(0.75) } | | pe-32 | { paddingEnd: rem(8) } | | pe-4 | { paddingEnd: rem(1) } | | pe-40 | { paddingEnd: rem(10) } | | pe-48 | { paddingEnd: rem(12) } | | pe-5 | { paddingEnd: rem(1.25) } | | pe-56 | { paddingEnd: rem(14) } | | pe-6 | { paddingEnd: rem(1.5) } | | pe-64 | { paddingEnd: rem(16) } | | pe-8 | { paddingEnd: rem(2) } | | pe-px | { paddingEnd: 1 } | | pl-0 | { paddingLeft: 0 } | | pl-1 | { paddingLeft: rem(0.25) } | | pl-10 | { paddingLeft: rem(2.5) } | | pl-12 | { paddingLeft: rem(3) } | | pl-16 | { paddingLeft: rem(4) } | | pl-2 | `{ padd