ta i lw i n d c s s

c h e at s h e e t

by
Sonny Sangha

J o i n Z e r o t o F u l l S t a c k H e r o & L e a r n t o C o d e T o d a y : h t t p s : // w w w . p a p a r e a c t. c o m / c o u r s e
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Me e t S o n n y
A l so k n o wn as PAPA Reac t

“
To truly succeed,
we must get Comfortable with the Uncomfortable “

Sonny Sangha ssssangha

Join Zero to Full Stack Hero to learn more, visit www.papareact.com 2

Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

table of contents

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

Typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

Interactivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

Flexbox & Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

Transitions & Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

3
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Introduction
INTRODUCTION

This Tailwind CSS Cheatsheet is your ultimate guide to mastering Tailwind CSS and harnessing
its power in your personal projects. Whether you’re a beginner starting from scratch or have some
experience with CSS and/or Tailwind CSS, this cheat sheet will provide you with all the essential
knowledge and quick references you need to become proficient in Tailwind CSS.

In this cheatsheet, we’ll cover everything from the basics of Tailwind CSS to the most advanced
techniques for styling your components. You’ll learn how to leverage the power of utility classes
to customize layouts, typography, colours, and more. Whether you’re working on a small personal
project or a large-scale application, Tailwind CSS will empower you to create stunning, responsive
designs efficiently. By the end of this cheat sheet, you’ll have a solid understanding of Tailwind CSS
and be able to use it confidently to build beautiful and responsive user interfaces.

So, if you’re ready to level up your web development skills and unlock the full potential of Tailwind
CSS, dive into this cheatsheet and let’s get started on your journey to becoming a Tailwind CSS
expert. Happy coding!

PS: If you’re interested in taking your skills even further, be sure to visit www.papareact.com to
explore our flagship course: Zero to Full Stack Hero. It covers not only Tailwind CSS but also Next.
js, React and tons of other trending tech. If you want to see me use Tailwind CSS in real-world app
development on a large scale, then be sure to check out my YouTube channel:
http://links.papareact.com/youtube

4
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
Layout
Aspect Ratio
Utilities for controlling the aspect ratio of an element.

aspect-auto aspect-ratio: auto;

aspect-square aspect-ratio: 1 / 1;

aspect-video aspect-ratio: 16 / 9;

Container
Sets the max-width to match the min-width of the current breakpoint..

container none width: 100%

sm (640px) max-width: 640px;

md (768px) max-width: 768px;

lg (1024px) max-width: 1024px;

xl (1280px) max-width: 1280px;

2xl (1536px) max-width: 1536px;

5
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
Columns
Utilities for controlling the number of columns within an element.

columns-1 columns: 1;

columns-2 columns: 2;

columns-3 columns: 3;

columns-4 columns: 4;

columns-5 columns: 5;

columns-6 columns: 6;

columns-7 columns: 7;

columns-8 columns: 8;

columns-9 columns: 9;

columns-10 columns: 10;

columns-11 columns: 11;

columns-12 columns: 12;

columns-auto columns: auto;

columns-3xs columns: 16rem;

columns-2xs columns: 18rem;

columns-xs columns: 20rem;

columns-sm columns: 24rem;

columns-md columns: 28rem;

columns-lg columns: 32rem;

columns-xl columns: 36rem;

columns-2xl columns: 42rem;

6
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
columns-3xl columns: 48rem;

columns-4xl columns: 56rem;

columns-5xl columns: 64rem;

columns-6xl columns: 72rem;

columns-7xl columns: 80rem;

Break After
Utilities for controlling how a column or page should break after an element.

break-after-auto break-after: auto;

break-after-avoid break-after: avoid;

break-after-all break-after: all;

break-after-avoid-page break-after: avoid-page;

break-after-page break-after: page;

break-after-left break-after: left;

break-after-right break-after: right;

break-after-column break-after: column;

7
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
Break Before
Utilities for controlling how a column or page should break before an element.

break-before-auto break-before: auto;

break-before-avoid break-before: avoid;

break-before-all break-before: all;

break-before-avoid-page break-before: avoid-page;

break-before-page break-before: page;

break-before-left break-before: left;

break-before-right break-before: right;

break-before-column break-before: column;

Break Inside
Utilities for controlling how a column or page should break within an element.

break-inside-auto break-inside: auto;

break-inside-avoid break-inside: avoid;

break-inside-avoid-page break-inside: avoid-page;

break-inside-column break-inside: column;

Box Decoration Break

Utilities for controlling how element fragments should be rendered across multiple lines,
columns, or pages.

decoration-slice box-decoration-break: slice;

decoration-clone box-decoration-break: clone;

8
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
Box Sizing
Sets how the total width and height of an element is calculated.

box-border box-sizing: border-box;

box-content box-sizing: content-box;

Display
Sets the display box type of an element.

block display: block;

inline-block display: inline-block;

inline display: inline;

flex display: flex;

inline-flex display: inline-flex;

table display: table;

inline-table display: inline-table;

table-caption display: table-caption;

table-cell display: table-cell;

table-column display: table-column;

table-column-group display: table-column-group;

table-footer-group display: table-footer-group;

table-header-group display: table-header-group;

table-row-group display: table-row-group;

table-row display: table-row;

flow-root display: flow-root

9
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
grid display: grid

inline-grid display: inline-grid

contents display: contents;

list-item display: list-item;

hidden display: none;

Float
Sets an element’s placement to a side of its container and allows content to wrap around
it.

float-right float: right;

float-left float: left;

float-none float: none;

Clear
Sets whether an element is moved below preceding floated elements.

clear-left clear: left;

clear-right clear: right;

clear-both clear: both;

clear-none clear: none;

10
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
Isolation
Sets whether an element is moved below preceding floated elements.

isolate isolation: isolate;

isolate-auto isolation: auto;

Object Fit
Sets how the content of a replaced element (img or video tag) should be resized.

object-contain object-fit: contain;

object-cover object-fit: cover;

object-fill object-fit: fill;

object-none object-fit: none;

object-scale-down object-fit: scale-down;

11
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
Object Position
Sets the alignment of the selected replaced element.

object-bottom object-position: bottom;

object-center object-position: center;

object-left object-position: left;

object-left-bottom object-position: left bottom;

object-left-top object-position: left top;

object-right object-position: right;

object-right-bottom object-position: right bottom;

object-right-top object-position: right top;

object-top object-position: top;

Overflow
Sets how to handle content that’s too big for its container.

overflow-auto overflow: auto;

overflow-x-auto overflow-x: auto;

overflow-y-auto overflow-y: auto;

overflow-hidden overflow: hidden;

overflow-x-hidden overflow-x: hidden;

overflow-y-hidden overflow-y: hidden;

overflow-visible overflow: visible;

overflow-x-visible overflow-x: visible;

overflow-y-visible overflow-y: visible;

12
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
overflow-scroll overflow: scroll;

overflow-x-scroll overflow-x: scroll;

overflow-y-scroll overflow-y: scroll;

scrolling-touch -webkit-overflow-scrolling: touch;

scrolling-auto -webkit-overflow-scrolling: auto;

Overscroll Behavior
Sets of utilities for controlling how the browser behaves when reaching the boundary of a
scrolling area.

overscroll-auto overscroll-behavior: auto;

overscroll-y-auto overscroll-behavior-y: auto;

overscroll-x-auto overscroll-behavior-x: auto;

overscroll-contain overscroll-behavior: contain;

overscroll-y-contain overscroll-behavior-y: contain;

overscroll-x-contain overscroll-behavior-x: contain;

overscroll-none overscroll-behavior: none;

overscroll-y-none overscroll-behavior-y: none;

overscroll-x-none overscroll-behavior-x: none;

13
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
Position
Sets an element’s position.

static position: static;

fixed position: fixed;

absolute position: absolute;

relative position: relative;

sticky position: sticky;

Top / Right / Bottom / Left

Sets the placement of a positioned element.

inset-0 top: 0; right: 0; bottom: 0; left: 0;

-inset-0 top: 0; right: 0; bottom: 0; left: 0;

inset-y-0 top: 0; bottom: 0;

-inset-y-0 top: 0; bottom: 0;

inset-x-0 right: 0; left: 0;

-inset-x-0 right: 0; left: 0;

top-0 top: 0;

right-0 right: 0;

bottom-0 bottom: 0;

left-0 left: 0;

-top-0 top: 0;

-right-0 right: 0;

-bottom-0 bottom: 0;

14
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
-left-0 left: 0;

inset-0.5 top: 0.125rem; right: 0.125rem;

bottom: 0.125rem; left: 0.125rem;

-inset-0.5 top: -0.125rem; right: -0.125rem;

bottom: -0.125rem; left: -0.125rem;

inset-y-0.5 top: 0.125rem; bottom: 0.125rem;

-inset-y-0.5 top: -0.125rem; bottom: -0.125rem;

inset-x-0.5 right: 0.125rem; left: 0.125rem;

-inset-x-0.5 right: -0.125rem; left: -0.125rem;

top-0.5 top: 0.125rem;

right-0.5 right: 0.125rem;

bottom-0.5 bottom: 0.125rem;

left-0.5 left: 0.125rem;

-top-0.5 top: -0.125rem;

-right-0.5 right: -0.125rem;

-bottom-0.5 bottom: -0.125rem;

-left-0.5 left: -0.125rem;

inset-1 top: 0.25rem; right: 0.25rem;

bottom: 0.25rem; left: 0.25rem;

-inset-1 top: -0.25rem; right: -0.25rem;

bottom: -0.25rem; left: -0.25rem;

inset-y-1 top: 0.25rem; bottom: 0.25rem;

-inset-y-1 top: -0.25rem; bottom: -0.25rem;

inset-x-1 right: 0.25rem; left: 0.25rem;

-inset-x-1 right: -0.25rem; left: -0.25rem;

top-1 top: 0.25rem;

15
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
right-1 right: 0.25rem;

bottom-1 bottom: 0.25rem;

left-1 left: 0.25rem;

-top-1 top: -0.25rem;

-right-1 right: -0.25rem;

-bottom-1 bottom: -0.25rem;

-left-1 left: -0.25rem;

inset-1.5 top: 0.375rem; right: 0.375rem;

bottom: 0.375rem; left: 0.375rem;

-inset-1.5 top: -0.375rem; right: -0.375rem;

bottom: -0.375rem; left: -0.375rem;

inset-y-1.5 top: 0.375rem; bottom: 0.375rem;

-inset-y-1.5 top: -0.375rem; bottom: -0.375rem;

inset-x-1.5 right: 0.375rem; left: 0.375rem;

-inset-x-1.5 right: -0.375rem; left: -0.375rem;

top-1.5 top: 0.375rem;

right-1.5 right: 0.375rem;

bottom-1.5 bottom: 0.375rem;

left-1.5 left: 0.375rem;

-top-1.5 top: -0.375rem;

-right-1.5 right: -0.375rem;

-bottom-1.5 bottom: -0.375rem;

-left-1.5 left: -0.375rem;

inset-2 top: 0.5rem; right: 0.5rem;

bottom: 0.5rem; left: 0.5rem;

16
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
-inset-2 top: -0.5rem; right: -0.5rem;
bottom: -0.5rem; left: -0.5rem;

inset-y-2 top: 0.5rem; bottom: 0.5rem;

-inset-y-2 top: -0.5rem; bottom: -0.5rem;

inset-x-2 right: 0.5rem; left: 0.5rem;

-inset-x-2 right: -0.5rem; left: -0.5rem;

top-2 top: 0.5rem;

right-2 right: 0.5rem;

bottom-2 bottom: 0.5rem;

left-2 left: 0.5rem;

-top-2 top: -0.5rem;

-right-2 right: -0.5rem;

-bottom-2 bottom: -0.5rem;

-left-2 left: -0.5rem;

inset-2.5 top: 0.625rem; right: 0.625rem;

bottom: 0.625rem; left: 0.625rem;

-inset-2.5 top: -0.625rem; right: -0.625rem;

bottom: -0.625rem; left: -0.625rem;

inset-y-2.5 top: 0.625rem; bottom: 0.625rem;

-inset-y-2.5 top: -0.625rem; bottom: -0.625rem;

inset-x-2.5 right: 0.625rem; left: 0.625rem;

-inset-x-2.5 right: -0.625rem; left: -0.625rem;

top-2.5 top: 0.625rem;

right-2.5 right: 0.625rem;

bottom-2.5 bottom: 0.625rem;

17
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
left-2.5 left: 0.625rem;

-top-2.5 top: -0.625rem;

-right-2.5 right: -0.625rem;

-bottom-2.5 bottom: -0.625rem;

-left-2.5 left: -0.625rem;

inset-3 top: 0.75rem; right: 0.75rem;

bottom: 0.75rem; left: 0.75rem;

-inset-3 top: -0.75rem; right: -0.75rem;

bottom: -0.75rem; left: -0.75rem;

inset-y-3 top: 0.75rem; bottom: 0.75rem;

-inset-y-3 top: -0.75rem; bottom: -0.75rem;

inset-x-3 right: 0.75rem; left: 0.75rem;

-inset-x-3 right: -0.75rem; left: -0.75rem;

top-3 top: 0.75rem;

right-3 right: 0.75rem;

bottom-3 bottom: 0.75rem;

left-3 left: 0.75rem;

-top-3 top: -0.75rem;

-right-3 right: -0.75rem;

-bottom-3 bottom: -0.75rem;

-left-3 left: -0.75rem;

inset-3.5 top: 0.875rem; right: 0.875rem;

bottom: 0.875rem; left: 0.875rem;

-inset-3.5 top: -0.875rem; right: -0.875rem;

bottom: -0.875rem; left: -0.875rem;

inset-y-3.5 top: 0.875rem; bottom: 0.875rem;

18
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
-inset-y-3.5 top: -0.875rem; bottom: -0.875rem;

inset-x-3.5 right: 0.875rem; left: 0.875rem;

-inset-x-3.5 right: -0.875rem; left: -0.875rem;

top-3.5 top: 0.875rem;

right-3.5 right: 0.875rem;

bottom-3.5 bottom: 0.875rem;

left-3.5 left: 0.875rem;

-top-3.5 top: -0.875rem;

-right-3.5 right: -0.875rem;

-bottom-3.5 bottom: -0.875rem;

-left-3.5 left: -0.875rem;

inset-4 top: 1rem; right: 1rem; bottom: 1rem; left: 1rem;

-inset-4 top: -1rem; right: -1rem; bottom: -1rem; left: -1rem;

inset-y-4 top: 1rem; bottom: 1rem;

-inset-y-4 top: -1rem; bottom: -1rem;

inset-x-4 right: 1rem; left: 1rem;

-inset-x-4 right: -1rem; left: -1rem;

top-4 top: 1rem;

right-4 right: 1rem;

bottom-4 bottom: 1rem;

left-4 left: 1rem;

-top-4 top: -1rem;

-right-4 right: -1rem;

-bottom-4 bottom: -1rem;

19
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
-left-4 left: -1rem;

inset-5 top: 1.25rem; right: 1.25rem;

bottom: 1.25rem; left: 1.25rem;

-inset-5 top: -1.25rem; right: -1.25rem;

bottom: -1.25rem; left: -1.25rem;

inset-y-5 top: 1.25rem; bottom: 1.25rem;

-inset-y-5 top: -1.25rem; bottom: -1.25rem;

inset-x-5 right: 1.25rem; left: 1.25rem;

-inset-x-5 right: -1.25rem; left: -1.25rem;

top-5 top: 1.25rem;

right-5 right: 1.25rem;

bottom-5 bottom: 1.25rem;

left-5 left: 1.25rem;

-top-5 top: -1.25rem;

-right-5 right: -1.25rem;

-bottom-5 bottom: -1.25rem;

-left-5 left: -1.25rem;

inset-6 top: 1.5rem; right: 1.5rem;

bottom: 1.5rem; left: 1.5rem;

-inset-6 top: -1.5rem; right: -1.5rem;

bottom: -1.5rem; left: -1.5rem;

inset-y-6 top: 1.5rem; bottom: 1.5rem;

-inset-y-6 top: -1.5rem; bottom: -1.5rem;

inset-x-6 right: 1.5rem; left: 1.5rem;

-inset-x-6 right: -1.5rem; left: -1.5rem;

top-6 top: 1.5rem;

20
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
right-6 right: 1.5rem;

bottom-6 bottom: 1.5rem;

left-6 left: 1.5rem;

-top-6 top: -1.5rem;

-right-6 right: -1.5rem;

-bottom-6 bottom: -1.5rem;

-left-6 left: -1.5rem;

inset-7 top: 1.75rem; right: 1.75rem;

bottom: 1.75rem; left: 1.75rem;

-inset-7 top: -1.75rem; right: -1.75rem;

bottom: -1.75rem; left: -1.75rem;

inset-y-7 top: 1.75rem; bottom: 1.75rem;

-inset-y-7 top: -1.75rem; bottom: -1.75rem;

inset-x-7 right: 1.75rem; left: 1.75rem;

-inset-x-7 right: -1.75rem; left: -1.75rem;

top-7 top: 1.75rem;

right-7 right: 1.75rem;

bottom-7 bottom: 1.75rem;

left-7 left: 1.75rem;

-top-7 top: -1.75rem;

-right-7 right: -1.75rem;

-bottom-7 bottom: -1.75rem;

-left-7 left: -1.75rem;

inset-8 top: 2rem; right: 2rem; bottom: 2rem; left: 2rem;

-inset-8 top: -2rem; right: -2rem; bottom: -2rem; left: -2rem;

21
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
inset-y-8 top: 2rem; bottom: 2rem;

-inset-y-8 top: -2rem; bottom: -2rem;

inset-x-8 right: 2rem; left: 2rem;

-inset-x-8 right: -2rem; left: -2rem;

top-8 top: 2rem;

right-8 right: 2rem;

bottom-8 bottom: 2rem;

left-8 left: 2rem;

-top-8 top: -2rem;

-right-8 right: -2rem;

-bottom-8 bottom: -2rem;

-left-8 left: -2rem;

inset-9 top: 2.25rem; right: 2.25rem;

bottom: 2.25rem; left: 2.25rem;

-inset-9 top: -2.25rem; right: -2.25rem;

bottom: -2.25rem; left: -2.25rem;

inset-y-9 top: 2.25rem; bottom: 2.25rem;

-inset-y-9 top: -2.25rem; bottom: -2.25rem;

inset-x-9 right: 2.25rem; left: 2.25rem;

-inset-x-9 right: -2.25rem; left: -2.25rem;

top-9 top: 2.25rem;

right-9 right: 2.25rem;

bottom-9 bottom: 2.25rem;

left-9 left: 2.25rem;

22
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
-top-9 top: -2.25rem;

-right-9 right: -2.25rem;

-bottom-9 bottom: -2.25rem;

-left-9 left: -2.25rem;

inset-10 top: 2.5rem; right: 2.5rem;

bottom: 2.5rem; left: 2.5rem;

-inset-10 top: -2.5rem; right: -2.5rem;

bottom: -2.5rem; left: -2.5rem;

inset-y-10 top: 2.5rem; bottom: 2.5rem;

-inset-y-10 top: -2.5rem; bottom: -2.5rem;

inset-x-10 right: 2.5rem; left: 2.5rem;

-inset-x-10 right: -2.5rem; left: -2.5rem;

top-10 top: 2.5rem;

right-10 right: 2.5rem;

bottom-10 bottom: 2.5rem;

left-10 left: 2.5rem;

-top-10 top: -2.5rem;

-right-10 right: -2.5rem;

-bottom-10 bottom: -2.5rem;

-left-10 left: -2.5rem;

inset-11 top: 2.75rem; right: 2.75rem;

bottom: 2.75rem; left: 2.75rem;

-inset-11 top: -2.75rem; right: -2.75rem;

bottom: -2.75rem; left: -2.75rem;

inset-y-11 top: 2.75rem; bottom: 2.75rem;

23
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
-inset-y-11 top: -2.75rem; bottom: -2.75rem;

inset-x-11 right: 2.75rem; left: 2.75rem;

-inset-x-11 right: -2.75rem; left: -2.75rem;

top-11 top: 2.75rem;

right-11 right: 2.75rem;

bottom-11 bottom: 2.75rem;

left-11 left: 2.75rem;

-top-11 top: -2.75rem;

-right-11 right: -2.75rem;

-bottom-11 bottom: -2.75rem;

-left-11 left: -2.75rem;

inset-12 top: 3rem; right: 3rem; bottom: 3rem; left: 3rem;

-inset-12 top: -3rem; right: -3rem; bottom: -3rem; left: -3rem;

inset-y-12 top: 3rem; bottom: 3rem;

-inset-y-12 top: -3rem; bottom: -3rem;

inset-x-12 right: 3rem; left: 3rem;

-inset-x-12 right: -3rem; left: -3rem;

top-12 top: 3rem;

right-12 right: 3rem;

bottom-12 bottom: 3rem;

left-12 left: 3rem;

-top-12 top: -3rem;

-right-12 right: -3rem;

24
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
-bottom-12 bottom: -3rem;

-left-12 left: -3rem;

inset-14 top: 3.5rem; right: 3.5rem;

bottom: 3.5rem; left: 3.5rem;

-inset-14 top: -3.5rem; right: -3.5rem;

bottom: -3.5rem; left: -3.5rem;

inset-y-14 top: 3.5rem; bottom: 3.5rem;

-inset-y-14 top: -3.5rem; bottom: -3.5rem;

inset-x-14 right: 3.5rem; left: 3.5rem;

-inset-x-14 right: -3.5rem; left: -3.5rem;

top-14 top: 3.5rem;

right-14 right: 3.5rem;

bottom-14 bottom: 3.5rem;

left-14 left: 3.5rem;

-top-14 top: -3.5rem;

-right-14 right: -3.5rem;

-bottom-14 bottom: -3.5rem;

-left-14 left: -3.5rem;

inset-16 top: 4rem; right: 4rem; bottom: 4rem; left: 4rem;

-inset-16 top: -4rem; right: -4rem; bottom: -4rem; left: -4rem;

inset-y-16 top: 4rem; bottom: 4rem;

-inset-y-16 top: -4rem; bottom: -4rem;

inset-x-16 right: 4rem; left: 4rem;

-inset-x-16 right: -4rem; left: -4rem;

25
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
top-16 top: 4rem;

right-16 right: 4rem;

bottom-16 bottom: 4rem;

left-16 left: 4rem;

-top-16 top: -4rem;

-right-16 right: -4rem;

-bottom-16 bottom: -4rem;

-left-16 left: -4rem;

inset-20 top: 5rem; right: 5rem; bottom: 5rem; left: 5rem;

-inset-20 top: -5rem; right: -5rem; bottom: -5rem; left: -5rem;

inset-y-20 top: 5rem; bottom: 5rem;

-inset-y-20 top: -5rem; bottom: -5rem;

inset-x-20 right: 5rem; left: 5rem;

-inset-x-20 right: -5rem; left: -5rem;

top-20 top: 5rem;

right-20 right: 5rem;

bottom-20 bottom: 5rem;

left-20 left: 5rem;

-top-20 top: -5rem;

-right-20 right: -5rem;

-bottom-20 bottom: -5rem;

-left-20 left: -5rem;

inset-24 top: 6rem; right: 6rem; bottom: 6rem; left: 6rem;

26
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
-inset-24 top: -6rem; right: -6rem; bottom: -6rem; left: -6rem;

inset-y-24 top: 6rem; bottom: 6rem;

-inset-y-24 top: -6rem; bottom: -6rem;

inset-x-24 right: 6rem; left: 6rem;

-inset-x-24 right: -6rem; left: -6rem;

top-24 top: 6rem;

right-24 right: 6rem;

bottom-24 bottom: 6rem;

left-24 left: 6rem;

-top-24 top: -6rem;

-right-24 right: -6rem;

-bottom-24 bottom: -6rem;

-left-24 left: -6rem;

inset-28 top: 7rem; right: 7rem; bottom: 7rem; left: 7rem;

-inset-28 top: -7rem; right: -7rem; bottom: -7rem; left: -7rem;

inset-y-28 top: 7rem; bottom: 7rem;

-inset-y-28 top: -7rem; bottom: -7rem;

inset-x-28 right: 7rem; left: 7rem;

-inset-x-28 right: -7rem; left: -7rem;

top-28 top: 7rem;

right-28 right: 7rem;

bottom-28 bottom: 7rem;

left-28 left: 7rem;

27
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
-top-28 top: -7rem;

-right-28 right: -7rem;

-bottom-28 bottom: -7rem;

-left-28 left: -7rem;

inset-32 top: 8rem; right: 8rem; bottom: 8rem; left: 8rem;

-inset-32 top: -8rem; right: -8rem; bottom: -8rem; left: -8rem;

inset-y-32 top: 8rem; bottom: 8rem;

-inset-y-32 top: -8rem; bottom: -8rem;

inset-x-32 right: 8rem; left: 8rem;

-inset-x-32 right: -8rem; left: -8rem;

top-32 top: 8rem;

right-32 right: 8rem;

bottom-32 bottom: 8rem;

left-32 left: 8rem;

-top-32 top: -8rem;

-right-32 right: -8rem;

-bottom-32 bottom: -8rem;

-left-32 left: -8rem;

inset-36 top: 9rem; right: 9rem; bottom: 9rem; left: 9rem;

-inset-36 top: -9rem; right: -9rem; bottom: -9rem; left: -9rem;

inset-y-36 top: 9rem; bottom: 9rem;

-inset-y-36 top: -9rem; bottom: -9rem;

inset-x-36 right: 9rem; left: 9rem;

28
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
-inset-x-36 right: -9rem; left: -9rem;

top-36 top: 9rem;

right-36 right: 9rem;

bottom-36 bottom: 9rem;

left-36 left: 9rem;

-top-36 top: -9rem;

-right-36 right: -9rem;

-bottom-36 bottom: -9rem;

-left-36 left: -9rem;

inset-40 top: 10rem; right: 10rem; bottom: 10rem; left: 10rem;

-inset-40 top: -10rem; right: -10rem;

bottom: -10rem; left: -10rem;

inset-y-40 top: 10rem; bottom: 10rem;

-inset-y-40 top: -10rem; bottom: -10rem;

inset-x-40 right: 10rem; left: 10rem;

-inset-x-40 right: -10rem; left: -10rem;

top-40 top: 10rem;

right-40 right: 10rem;

bottom-40 bottom: 10rem;

left-40 left: 10rem;

-top-40 top: -10rem;

-right-40 right: -10rem;

-bottom-40 bottom: -10rem;

-left-40 left: -10rem;

29
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
inset-44 top: 11rem; right: 11rem; bottom: 11rem; left: 11rem;

-inset-44 top: -11rem; right: -11rem;

bottom: -11rem; left: -11rem;

inset-y-44 top: 11rem; bottom: 11rem;

-inset-y-44 top: -11rem; bottom: -11rem;

inset-x-44 right: 11rem; left: 11rem;

-inset-x-44 right: -11rem; left: -11rem;

top-44 top: 11rem;

right-44 right: 11rem;

bottom-44 bottom: 11rem;

left-44 left: 11rem;

-top-44 top: -11rem;

-right-44 right: -11rem;

-bottom-44 bottom: -11rem;

-left-44 left: -11rem;

inset-48 top: 12rem; right: 12rem; bottom: 12rem; left: 12rem;

-inset-48 top: -12rem; right: -12rem;

bottom: -12rem; left: -12rem;

inset-y-48 top: 12rem; bottom: 12rem;

-inset-y-48 top: -12rem; bottom: -12rem;

inset-x-48 right: 12rem; left: 12rem;

-inset-x-48 right: -12rem; left: -12rem;

top-48 top: 12rem;

right-48 right: 12rem;

30
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
bottom-48 bottom: 12rem;

left-48 left: 12rem;

-top-48 top: -12rem;

-right-48 right: -12rem;

-bottom-48 bottom: -12rem;

-left-48 left: -12rem;

inset-52 top: 13rem; right: 13rem; bottom: 13rem; left: 13rem;

-inset-52 top: -13rem; right: -13rem;

bottom: -13rem; left: -13rem;

inset-y-52 top: 13rem; bottom: 13rem;

-inset-y-52 top: -13rem; bottom: -13rem;

inset-x-52 right: 13rem; left: 13rem;

-inset-x-52 right: -13rem; left: -13rem;

top-52 top: 13rem;

right-52 right: 13rem;

bottom-52 bottom: 13rem;

left-52 left: 13rem;

-top-52 top: -13rem;

-right-52 right: -13rem;

-bottom-52 bottom: -13rem;

-left-52 left: -13rem;

inset-56 top: 14rem; right: 14rem; bottom: 14rem; left: 14rem;

-inset-56 top: -14rem; right: -14rem;

bottom: -14rem; left: -14rem;

31
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
inset-y-56 top: 14rem; bottom: 14rem;

-inset-y-56 top: -14rem; bottom: -14rem;

inset-x-56 right: 14rem; left: 14rem;

-inset-x-56 right: -14rem; left: -14rem;

top-56 top: 14rem;

right-56 right: 14rem;

bottom-56 bottom: 14rem;

left-56 left: 14rem;

-top-56 top: -14rem;

-right-56 right: -14rem;

-bottom-56 bottom: -14rem;

-left-56 left: -14rem;

inset-60 top: 15rem; right: 15rem; bottom: 15rem; left: 15rem;

-inset-60 top: -15rem; right: -15rem;

bottom: -15rem; left: -15rem;

inset-y-60 top: 15rem; bottom: 15rem;

-inset-y-60 top: -15rem; bottom: -15rem;

inset-x-60 right: 15rem; left: 15rem;

-inset-x-60 right: -15rem; left: -15rem;

top-60 top: 15rem;

right-60 right: 15rem;

bottom-60 bottom: 15rem;

left-60 left: 15rem;

-top-60 top: -15rem;

32
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
-right-60 right: -15rem;

-bottom-60 bottom: -15rem;

-left-60 left: -15rem;

inset-64 top: 16rem; right: 16rem; bottom: 16rem; left: 16rem;

-inset-64 top: -16rem; right: -16rem;

bottom: -16rem; left: -16rem;

inset-y-64 top: 16rem; bottom: 16rem;

-inset-y-64 top: -16rem; bottom: -16rem;

inset-x-64 right: 16rem; left: 16rem;

-inset-x-64 right: -16rem; left: -16rem;

top-64 top: 16rem;

right-64 right: 16rem;

bottom-64 bottom: 16rem;

left-64 left: 16rem;

-top-64 top: -16rem;

-right-64 right: -16rem;

-bottom-64 bottom: -16rem;

-left-64 left: -16rem;

inset-72 top: 18rem; right: 18rem; bottom: 18rem; left: 18rem;

-inset-72 top: -18rem; right: -18rem;

bottom: -18rem; left: -18rem;

inset-y-72 top: 18rem; bottom: 18rem;

-inset-y-72 top: -18rem; bottom: -18rem;

inset-x-72 right: 18rem; left: 18rem;

33
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
-inset-x-72 right: -18rem; left: -18rem;

top-72 top: 18rem;

right-72 right: 18rem;

bottom-72 bottom: 18rem;

left-72 left: 18rem;

-top-72 top: -18rem;

-right-72 right: -18rem;

-bottom-72 bottom: -18rem;

-left-72 left: -18rem;

inset-80 top: 20; right: 20; bottom: 20; left: 20;

-inset-80 top: -20; right: -20; bottom: -20; left: -20;

inset-y-80 top: 20; bottom: 20;

-inset-y-80 top: -20; bottom: -20;

inset-x-80 right: 20; left: 20;

-inset-x-80 right: -20; left: -20;

top-80 top: 20;

right-80 right: 20;

bottom-80 bottom: 20;

left-80 left: 20;

-top-80 top: -20;

-right-80 right: -20;

-bottom-80 bottom: -20;

-left-80 left: -20rem;

34
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
inset-96 top: 24rem; right: 24rem; bottom: 24rem; left: 24rem;

-inset-96 top: -24rem; right: -24rem;

bottom: -24rem; left: -24rem;

inset-y-96 top: 24rem; bottom: 24rem;

-inset-y-96 top: -24rem; bottom: -24rem;

inset-x-96 right: 24rem; left: 24rem;

-inset-x-96 right: -24rem; left: -24rem;

top-96 top: 24rem;

right-96 right: 24rem;

bottom-96 bottom: 24rem;

left-96 left: 24rem;

-top-96 top: -24rem;

-right-96 right: -24rem;

-bottom-96 bottom: -24rem;

-left-96 left: -24rem;

inset-auto top: auto; right: auto; bottom: auto; left: auto;

inset-y-auto top: auto; bottom: auto;

inset-x-auto right: auto; left: auto;

top-auto top: auto;

right-auto right: auto;

bottom-auto bottom: auto;

left-auto left: auto;

inset-1/2 top: 50%; right: 50%; bottom: 50%; left: 50%;

35
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
inset-2/3 top: 66.666667%; right: 66.666667%;
bottom: 66.666667%; left: 66.666667%;

inset-1/4 top: 25%; right: 25%; bottom: 25%; left: 25%;

inset-3/4 top: 75%; right: 75%; bottom: 75%; left: 75%;

inset-full top: 100%; right: 100%; bottom: 100%; left: 100%;

-inset-1/2 top: -50%; right: -50%; bottom: -50%; left: -50%;

-inset-2/3 top: -66.666667%; right: -66.666667%;

bottom: -66.666667%; left: -66.666667%;

-inset-1/4 top: -25%; right: -25%; bottom: -25%; left: -25%;

-inset-3/4 top: -75%; right: -75%; bottom: -75%; left: -75%;

-inset-full top: -100%; right: -100%; bottom: -100%; left: -100%;

inset-x-1/2 right: 50%; left: 50%;

inset-x-2/3 right: 66.666667%; left: 66.666667%;

inset-x-1/4 right: 25%; left: 25%;

inset-x-3/4 right: 75%; left: 75%;

inset-x-full right: 100%; left: 100%;

-inset-x-1/2 right: -50%; left: -50%;

-inset-x-2/3 right: -66.666667%; left: -66.666667%;

-inset-x-1/4 right: -25%; left: -25%;

-inset-x-3/4 right: -75%; left: -75%;

-inset-x-full right: -100%; left: -100%;

inset-y-1/2 top: 50%; bottom: 50%;

inset-y-2/3 top: 66.666667%; bottom: 66.666667%;

inset-y-1/4 top: 25%; bottom: 25%;

36
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
inset-y-3/4 top: 75%; bottom: 75%;

inset-y-full top: 100%; bottom: 100%;

-inset-y-1/2 top: -50%; bottom: -50%;

-inset-y-2/3 top: -66.666667%; bottom: -66.666667%;

-inset-y-1/4 top: -25%; bottom: -25%;

-inset-y-3/4 top: -75%; bottom: -75%;

-inset-y-full top: -100%; bottom: -100%;

top-1/2 top: 50%;

top-2/3 top: 66.666667%;

top-1/4 top: 25%;

top-3/4 top: 75%;

top-full top: 100%;

-top-1/2 top: -50%;

-top-2/3 top: -66.666667%;

-top-1/4 top: -25%;

-top-3/4 top: -75%;

-top-full top: -100%;

right-1/2 right: 50%;

right-2/3 right: 66.666667%;

right-1/4 right: 25%;

right-3/4 right: 75%;

right-full right: 100%;

-right-1/2 right: -50%;

37
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
-right-2/3 right: -66.666667%;

-right-1/4 right: -25%;

-right-3/4 right: -75%;

-right-full right: -100%;

bottom-1/2 bottom: 50%;

bottom-2/3 bottom: 66.666667%;

bottom-1/4 bottom: 25%;

bottom-3/4 bottom: 75%;

bottom-full bottom: 100%;

-bottom-1/2 bottom: -50%;

-bottom-2/3 bottom: -66.666667%;

-bottom-1/4 bottom: -25%;

-bottom-3/4 bottom: -75%;

-bottom-full bottom: -100%;

left-1/2 left: 50%;

left-2/3 left: 66.666667%;

left-1/4 left: 25%;

left-3/4 left: 75%;

left-full left: 100%;

-left-1/2 left: -50%;

-left-2/3 left: -66.666667%;

-left-1/4 left: -25%;

-left-3/4 left: -75%;

-left-full left: -100%;

38
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Layout
Visibility
Show or hide without affecting the layout of the document.

visible visibility: visible;

invisible visibility: hidden;

Z-index
Sets the z-order (“stack order”) of a positioned element.

z-0 z-index: 0;

z-10 z-index: 10;

z-20 z-index: 20;

z-30 z-index: 30;

z-40 z-index: 40;

z-50 z-index: 50;

z-auto z-index: auto;

39
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Sizing
Sizing
Width

w-0 width: 0;

w-0.5 width: 0.125rem; 2px

w-1 width: 0.25rem; 4px

w-1.5 width: 0.375rem; 6px

w-2 width: 0.5rem; 8px

w-2.5 width: 0.625rem; 10px

w-3 width: 0.75rem; 12px

w-3.5 width: 0.875rem; 14px

w-4 width: 1rem; 16px

w-5 width: 1.25rem; 20px

w-6 width: 1.5rem; 24px

w-8 width: 2rem; 32px

w-10 width: 2.5rem; 40px

w-11 width: 2.75rem; 44px

w-12 width: 3rem; 48px

w-14 width: 3.5rem; 56px

w-16 width: 4rem; 64px

w-20 width: 5rem; 80px

w-24 width: 6rem; 96px

w-28 width: 7rem; 112px

40
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Sizing
w-32 width: 8rem; 128px

w-36 width: 9rem; 144px

w-40 width: 10rem; 160px

w-44 width: 11rem; 176px

w-48 width: 12rem; 192px

w-52 width: 13rem; 208px

w-56 width: 14rem; 224px

w-64 width: 16rem; 256px

w-72 width: 18rem; 288px

w-80 width: 20rem; 320px

w-96 width: 24rem; 384px

w-px width: 1px;

w-auto width: auto;

w-1/2 width: 50%;

w-1/3 width: 33.333333%;

w-2/3 width: 66.666667%;

w-1/4 width: 25%;

w-2/4 width: 50%;

w-3/4 width: 75%;

w-1/5 width: 20%;

w-2/5 width: 40%;

w-3/5 width: 60%;

w-4/5 width: 80%;

w-1/6 width: 16.666667%;

41
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Sizing
w-2/6 width: 33.333333%;

w-3/6 width: 50%;

w-4/6 width: 66.666667%;

w-5/6 width: 83.333333%;

w-1/12 width: 8.333333%;

w-2/12 width: 16.666667%;

w-3/12 width: 25%;

w-4/12 width: 33.333333%;

w-5/12 width: 41.666667%;

w-6/12 width: 50%;

w-7/12 width: 58.333333%;

w-8/12 width: 66.666667%;

w-9/12 width: 75%;

w-10/12 width: 83.333333%;

w-11/12 width: 91.666667%;

w-full width: 100%;

w-screen width: 100vw;

w-min width: min-content;

w-max width: max-content;

w-fit width: fit-content;

42
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Sizing
Min Width
Sets the minimum width of an element.

min-w-0 min-width: 0;

min-w-full min-width: 100%;

min-w-min min-width: min-content;

min-w-max min-width: max-content;

min-w-fit min-width: fit-content;

Max Width
Sets the maxiumum width of an element.

max-w-0 max-width: 0rem;

max-w-none max-width: none;

max-w-xs max-width: 20rem; 320px

max-w-sm max-width: 24rem; 384px

max-w-md max-width: 28rem; 448px

max-w-lg max-width: 32rem; 512px

max-w-xl max-width: 36rem; 576px

max-w-2xl max-width: 42rem; 672px

max-w-3xl max-width: 48rem; 768px

max-w-4xl max-width: 56rem; 896px

max-w-5xl max-width: 64rem; 1024px

max-w-6xl max-width: 72rem; 1152px

43
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Sizing
max-w-7xl max-width: 80rem; 1280px

max-w-full max-width: 100%;

max-w-min max-width: min-content;

max-w-max max-width: max-content;

max-w-fit max-width: fit-content;

max-w-prose max-width: 65ch;

max-w-screen-sm max-width: 640px;

max-w-screen-md max-width: 768px;

max-w-screen-lg max-width: 1024px;

max-w-screen-xl max-width: 1280px;

max-w-screen-2xl max-width: 1536px;

Height

h-0 height: 0;

h-0.5 height: 0.125rem; 2px

h-1 height: 0.25rem; 4px

h-1.5 height: 0.375rem; 6px

h-2 height: 0.5rem; 8px

h-2.5 height: 0.625rem; 10px

h-3 height: 0.75rem; 12px

h-3.5 height: 0.875rem; 14px

h-4 height: 1rem; 16px

44
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Sizing
h-5 height: 1.25rem; 20px

h-6 height: 1.5rem; 24px

h-8 height: 2rem; 32px

h-10 height: 2.5rem; 40px

h-11 height: 2.75rem; 44px

h-12 height: 3rem; 48px

h-14 height: 3.5rem; 56px

h-16 height: 4rem; 64px

h-20 height: 5rem; 80px

h-24 height: 6rem; 96px

h-28 height: 7rem; 112px

h-32 height: 8rem; 128px

h-36 height: 9rem; 144px

h-40 height: 10rem; 160px

h-44 height: 11rem; 176px

h-48 height: 12rem; 192px

h-52 height: 13rem; 208px

h-56 height: 14rem; 224px

h-64 height: 16rem; 256px

h-72 height: 18rem; 288px

h-80 height: 20rem; 320px

h-96 height: 24rem; 384px

h-px height: 1px;

h-auto height: auto;

45
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Sizing
h-1/2 height: 50%;

h-1/3 height: 33.333333%;

h-2/3 height: 66.666667%;

h-1/4 height: 25%;

h-2/4 height: 50%;

h-3/4 height: 75%;

h-1/5 height: 20%;

h-2/5 height: 40%;

h-3/5 height: 60%;

h-4/5 height: 80%;

h-1/6 height: 16.666667%;

h-2/6 height: 33.333333%;

h-3/6 height: 50%;

h-4/6 height: 66.666667%;

h-5/6 height: 83.333333%;

h-full height: 100%;

h-screen height: 100vh;

h-min height: min-content;

h-max height: max-content;

h-fit height: fit-content;

46
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Sizing
Min Height
Sets the minimum height of an element.

min-h-0 min-height: 0;

min-h-full min-height: 100%;

min-h-screen min-height: 100vh;

min-h-min min-height: min-content;

min-h-max min-height: max-content;

min-h-fit min-height: fit-content;

Max Height
Sets the maxiumum height of an element.

max-h-0 max-height: 0;

max-h-0.5 max-height: 0.125rem; 2px

max-h-1 max-height: 0.25rem; 4px

max-h-1.5 max-height: 0.375rem; 6px

max-h-2 max-height: 0.5rem; 8px

max-h-2.5 max-height: 0.625rem; 10px

max-h-3 max-height: 0.75rem; 12px

max-h-3.5 max-height: 0.875rem; 14px

max-h-4 max-height: 1rem; 16px

max-h-5 max-height: 1.25rem; 20px

max-h-6 max-height: 1.5rem; 24px

47
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Sizing
max-h-8 max-height: 2rem; 32px

max-h-10 max-height: 2.5rem; 40px

max-h-11 max-height: 2.75rem; 44px

max-h-12 max-height: 3rem; 48px

max-h-14 max-height: 3.5rem; 56px

max-h-16 max-height: 4rem; 64px

max-h-20 max-height: 5rem; 80px

max-h-24 max-height: 6rem; 96px

max-h-28 max-height: 7rem; 112px

max-h-32 max-height: 8rem; 128px

max-h-36 max-height: 9rem; 144px

max-h-40 max-height: 10rem; 160px

max-h-44 max-height: 11rem; 176px

max-h-48 max-height: 12rem; 192px

max-h-52 max-height: 13rem; 208px

max-h-56 max-height: 14rem; 224px

max-h-64 max-height: 16rem; 256px

max-h-72 max-height: 18rem; 288px

max-h-80 max-height: 20rem; 320px

max-h-96 max-height: 24rem; 384px

max-h-px max-height: 1px;

max-h-full max-height: 100%;

max-h-screen max-height: 100vh;

48
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Sizing
max-h-min max-height: min-content;

max-h-max max-height: max-content;

max-h-fit max-height: fit-content;

49
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Transforms
Transforms
Scale
Scales an element that has transform applied.

scale-0 --transform-scale-x: 0; --transform-scale-y: 0;

scale-50 --transform-scale-x: .5; --transform-scale-y: .5;

scale-75 --transform-scale-x: .75; --transform-scale-y: .75;

scale-90 --transform-scale-x: .9; --transform-scale-y: .9;

scale-95 --transform-scale-x: .95; --transform-scale-y: .95;

scale-100 --transform-scale-x: 1; --transform-scale-y: 1;

scale-105 --transform-scale-x: 1.05; --transform-scale-y: 1.05;

scale-110 --transform-scale-x: 1.1; --transform-scale-y: 1.1;

scale-125 --transform-scale-x: 1.25; --transform-scale-y: 1.25;

scale-150 --transform-scale-x: 1.5; --transform-scale-y: 1.5;

scale-x-0 --transform-scale-x: 0;

scale-x-50 --transform-scale-x: .5;

scale-x-75 --transform-scale-x: .75;

scale-x-90 --transform-scale-x: .9;

scale-x-95 --transform-scale-x: .95;

scale-x-100 --transform-scale-x: 1;

scale-x-105 --transform-scale-x: 1.05;

scale-x-110 --transform-scale-x: 1.1;

scale-x-125 --transform-scale-x: 1.25;

50
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Transforms
scale-x-150 --transform-scale-x: 1.5;

scale-y-0 --transform-scale-y: 0;

scale-y-50 --transform-scale-y: .5;

scale-y-75 --transform-scale-y: .75;

scale-y-90 --transform-scale-y: .9;

scale-y-95 --transform-scale-y: .95;

scale-y-100 --transform-scale-y: 1;

scale-y-105 --transform-scale-y: 1.05;

scale-y-110 --transform-scale-y: 1.1;

scale-y-125 --transform-scale-y: 1.25;

scale-y-150 --transform-scale-y: 1.5;

Rotate
Rotates an element that has transform applied.

rotate-0 --transform-rotate: 0;

rotate-1 --transform-rotate: 1deg;

rotate-2 --transform-rotate: 2deg;

rotate-3 --transform-rotate: 3deg;

rotate-6 --transform-rotate: 6deg;

rotate-12 --transform-rotate: 12deg;

rotate-45 --transform-rotate: 45deg;

rotate-90 --transform-rotate: 90deg;

rotate-180 --transform-rotate: 180deg;

51
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Transforms
Translate
Translates an element that has transform applied.

translate-x-0 --transform-translate-x: 0;

translate-x-0.5 --transform-translate-x: 0.125rem; 2px

translate-x-1 --transform-translate-x: 0.25rem; 4px

translate-x-1.5 --transform-translate-x: 0.375rem; 6px

translate-x-2 --transform-translate-x: 0.5rem; 8px

translate-x-2.5 --transform-translate-x: 0.625rem; 10px

translate-x-3 --transform-translate-x: 0.75rem; 12px

translate-x-3.5 --transform-translate-x: 0.875rem; 14px

translate-x-4 --transform-translate-x: 1rem; 16px

translate-x-5 --transform-translate-x: 1.25rem; 20px

translate-x-6 --transform-translate-x: 1.5rem; 24px

translate-x-7 --transform-translate-x: 1.75rem; 28px

translate-x-8 --transform-translate-x: 2rem; 32px

translate-x-9 --transform-translate-x: 2.25rem; 36px

translate-x-10 --transform-translate-x: 2.5rem; 40px

translate-x-11 --transform-translate-x: 2.75rem; 44px

translate-x-12 --transform-translate-x: 3rem; 48px

translate-x-14 --transform-translate-x: 3.5rem; 56px

translate-x-16 --transform-translate-x: 4rem; 64px

translate-x-20 --transform-translate-x: 5rem; 80px

translate-x-24 --transform-translate-x: 6rem; 96px

52
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Transforms
translate-x-28 --transform-translate-x: 7rem; 112px

translate-x-32 --transform-translate-x: 8rem; 128px

translate-x-36 --transform-translate-x: 8rem; 144px

translate-x-40 --transform-translate-x: 10rem; 160px

translate-x-44 --transform-translate-x: 11rem; 176px

translate-x-48 --transform-translate-x: 12rem; 192px

translate-x-52 --transform-translate-x: 13rem; 208px

translate-x-56 --transform-translate-x: 14rem; 224px

translate-x-60 --transform-translate-x: 15rem; 240px

translate-x-64 --transform-translate-x: 16rem; 256px

translate-x-72 --transform-translate-x: 18rem; 288px

translate-x-80 --transform-translate-x: 20rem; 320px

translate-x-96 --transform-translate-x: 24rem; 384px

translate-x-px --transform-translate-x: 1px;

translate-x-1/2 --transform-translate-x: 50%;

translate-x-1/3 --transform-translate-x: 33.333333%;

translate-x-2/3 --transform-translate-x: 66.6666666%;

translate-x-1/4 --transform-translate-x: 25%;

translate-x-2/4 --transform-translate-x: 50%;

translate-x-3/4 --transform-translate-x: 75%;

translate-x-full --transform-translate-x: 100%;

translate-y-0 --transform-translate-y: 0;

translate-y-0.5 --transform-translate-y: 0.125rem; 2px

53
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Transforms
translate-y-1 --transform-translate-y: 0.25rem; 4px

translate-y-1.5 --transform-translate-y: 0.375rem; 6px

translate-y-2 --transform-translate-y: 0.5rem; 8px

translate-y-2.5 --transform-translate-y: 0.625rem; 10px

translate-y-3 --transform-translate-y: 0.75rem; 12px

translate-y-3.5 --transform-translate-y: 0.875rem; 14px

translate-y-4 --transform-translate-y: 1rem; 16px

translate-y-5 --transform-translate-y: 1.25rem; 20px

translate-y-6 --transform-translate-y: 1.5rem; 24px

translate-y-7 --transform-translate-y: 1.75rem; 28px

translate-y-8 --transform-translate-y: 2rem; 32px

translate-y-9 --transform-translate-y: 2.25rem; 36px

translate-y-10 --transform-translate-y: 2.5rem; 40px

translate-y-11 --transform-translate-y: 2.75rem; 44px

translate-y-12 --transform-translate-y: 3rem; 48px

translate-y-14 --transform-translate-y: 3.5rem; 56px

translate-y-16 --transform-translate-y: 4rem; 64px

translate-y-20 --transform-translate-y: 5rem; 80px

translate-y-24 --transform-translate-y: 6rem; 96px

translate-y-28 --transform-translate-y: 7rem; 112px

translate-y-32 --transform-translate-y: 8rem; 128px

translate-y-36 --transform-translate-y: 8rem; 144px

translate-y-40 --transform-translate-y: 10rem; 160px

54
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Transforms
translate-y-44 --transform-translate-y: 11rem; 176px

translate-y-48 --transform-translate-y: 12rem; 192px

translate-y-52 --transform-translate-y: 13rem; 208px

translate-y-56 --transform-translate-y: 14rem; 224px

translate-y-60 --transform-translate-y: 15rem; 240px

translate-y-64 --transform-translate-y: 16rem; 256px

translate-y-72 --transform-translate-y: 18rem; 288px

translate-y-80 --transform-translate-y: 20rem; 320px

translate-y-96 --transform-translate-y: 24rem; 384px

translate-y-px --transform-translate-y: 1px;

translate-y-1/2 --transform-translate-y: 50%;

translate-y-1/3 --transform-translate-y: 33.333333%;

translate-y-2/3 --transform-translate-y: 66.6666666%;

translate-y-1/4 --transform-translate-y: 25%;

translate-y-2/4 --transform-translate-y: 50%;

translate-y-3/4 --transform-translate-y: 75%;

translate-y-full --transform-translate-y: 100%;

55
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Transforms
Skew
Skews an element that has transform applied.

skew-x-0 --transform-skew-x: 0;

skew-x-1 --transform-skew-x: 1deg;

skew-x-2 --transform-skew-x: 2deg;

skew-x-3 --transform-skew-x: 3deg;

skew-x-6 --transform-skew-x: 6deg;

skew-x-12 --transform-skew-x: 12deg;

skew-y-0 --transform-skew-y: 0;

skew-y-1 --transform-skew-y: 1deg;

skew-y-2 --transform-skew-y: 2deg;

skew-y-3 --transform-skew-y: 3deg;

skew-y-6 --transform-skew-y: 6deg;

skew-y-12 --transform-skew-y: 12deg;

56
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Transforms
Transform Origin
Sets the origin of an element’s transforms. Think of the origin as pushing a thumbtack into
the element at the specified position.

origin-center transform-origin: center;

origin-top transform-origin: top;

origin-top-right transform-origin: top right;

origin-right transform-origin: right;

origin-bottom-right transform-origin: bottom right;

origin-bottom transform-origin: bottom;

origin-bottom-left transform-origin: bottom left;

origin-left transform-origin: left;

origin-top-left transform-origin: top left;

57
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Effects
Effects
Box Shadow

shadow-xs box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);

shadow-sm box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

shadow box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),

0 1px 2px 0 rgba(0, 0, 0, 0.06);

shadow-md box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),

0 2px 4px -1px rgba(0, 0, 0, 0.06);

shadow-lg box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),

0 4px 6px -2px rgba(0, 0, 0, 0.05);

shadow-xl box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),

0 10px 10px -5px rgba(0, 0, 0, 0.04);

shadow-2xl box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

shadow-inner box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

shadow-outline box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);

shadow-none box-shadow: none;

58
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Effects
Opacity

opacity-0 opacity: 0;

opacity-5 opacity: 0.05;

opacity-10 opacity: 0.1;

opacity-20 opacity: 0.2;

opacity-25 opacity: 0.25;

opacity-30 opacity: 0.3;

opacity-40 opacity: 0.4;

opacity-50 opacity: 0.5;

opacity-60 opacity: 0.6;

opacity-70 opacity: 0.7;

opacity-75 opacity: 0.75;

opacity-80 opacity: 0.8;

opacity-90 opacity: 0.9;

opacity-100 opacity: 1;

59
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Effects
Mix Blend Mode
Utilities for controlling how an element should blend with the background.

mix-blend-normal mix-blend-mode: normal;

mix-blend-multiply mix-blend-mode: multiply;

mix-blend-screen mix-blend-mode: screen;

mix-blend-overlay mix-blend-mode: overlay;

mix-blend-darken mix-blend-mode: darken;

mix-blend-lighten mix-blend-mode: lighten;

mix-blend-color-dodge mix-blend-mode: color-dodge;

mix-blend-color-burn mix-blend-mode: color-burn;

mix-blend-hard-light mix-blend-mode: hard-light;

mix-blend-soft-light mix-blend-mode: soft-light;

mix-blend-difference mix-blend-mode: difference;

mix-blend-exclusion mix-blend-mode: exclusion;

mix-blend-hue mix-blend-mode: hue;

mix-blend-saturation mix-blend-mode: saturation;

mix-blend-color mix-blend-mode: color;

mix-blend-luminosity mix-blend-mode: luminosity;

60
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Effects
Background Blend Mode
Utilities for controlling how an element’s background image should blend with its back-
ground color.

bg-blend-normal background-blend-mode: normal;

bg-blend-multiply background-blend-mode: multiply;

bg-blend-screen background-blend-mode: screen;

bg-blend-overlay background-blend-mode: overlay;

bg-blend-darken background-blend-mode: darken;

bg-blend-lighten background-blend-mode: lighten;

bg-blend-color-dodge background-blend-mode: color-dodge;

bg-blend-color-burn background-blend-mode: color-burn;

bg-blend-hard-light background-blend-mode: hard-light;

bg-blend-soft-light background-blend-mode: soft-light;

bg-blend-difference background-blend-mode: difference;

bg-blend-exclusion background-blend-mode: exclusion;

bg-blend-hue background-blend-mode: hue;

bg-blend-saturation background-blend-mode: saturation;

bg-blend-color background-blend-mode: color;

bg-blend-luminosity background-blend-mode: luminosity;

61
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
Spacing
Padding
Controls padding in 0.25rem increments.

p-0 padding: 0;

p-0.5 padding: 0.125rem; 2px

p-1 padding: 0.25rem; 4px

p-1.5 padding: 0.375rem; 6px

p-2 padding: 0.5rem; 8px

p-2.5 padding: 0.625rem; 10px

p-3 padding: 0.75rem; 12px

p-3.5 padding: 0.875rem; 14px

p-4 padding: 1rem; 16px

p-5 padding: 1.25rem; 20px

p-6 padding: 1.5rem; 24px

p-8 padding: 2rem; 32px

p-10 padding: 2.5rem; 40px

p-11 padding: 2.75rem; 44px

p-12 padding: 3rem; 48px

p-14 padding: 3.5rem; 56px

p-16 padding: 4rem; 64px

p-20 padding: 5rem; 80px

p-24 padding: 6rem; 96px

62
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
p-28 padding: 7rem; 112px

p-32 padding: 8rem; 128px

p-36 padding: 9rem; 144px

p-40 padding: 10rem; 160px

p-44 padding: 11rem; 176px

p-48 padding: 12rem; 192px

p-52 padding: 13rem; 208px

p-56 padding: 14rem; 224px

p-64 padding: 16rem; 256px

p-72 padding: 18rem; 288px

p-80 padding: 20rem; 320px

p-96 padding: 24rem; 384px

p-px padding: 1px;

py-0 padding-top: 0; padding-bottom: 0;

px-0 padding-left: 0; padding-right: 0;

py-0.5 padding-top: 0.125rem; padding-bottom: 0.125rem; 2px

px-0.5 padding-left: 0.125rem; padding-right: 0.125rem; 2px

py-1 padding-top: 0.25rem; padding-bottom: 0.25rem; 4px

px-1 padding-left: 0.25rem; padding-right: 0.25rem; 4px

py-1.5 padding-top: 0.375rem; padding-bottom: 0.375rem; 6px

px-1.5 padding-left: 0.375rem; padding-right: 0.375rem; 6px

py-2 padding-top: 0.5rem; padding-bottom: 0.5rem; 8px

px-2 padding-left: 0.5rem; padding-right: 0.5rem; 8px

63
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
py-2.5 padding-top: 0.625rem; padding-bottom: 0.625rem; 10px

px-2.5 padding-left: 0.625rem; padding-right: 0.625rem; 10px

py-3 padding-top: 0.75rem; padding-bottom: 0.75rem; 12px

px-3 padding-left: 0.75rem; padding-right: 0.75rem; 12px

py-3.5 padding-top: 0.875rem; padding-bottom: 0.875rem; 14px

px-3.5 padding-left: 0.875rem; padding-right: 0.875rem; 14px

py-4 padding-top: 1rem; padding-bottom: 1rem; 16px

px-4 padding-left: 1rem; padding-right: 1rem; 16px

py-5 padding-top: 1.25rem; padding-bottom: 1.25rem; 20px

px-5 padding-left: 1.25rem; padding-right: 1.25rem; 20px

py-6 padding-top: 1.5rem; padding-bottom: 1.5rem; 24px

px-6 padding-left: 1.5rem; padding-right: 1.5rem; 24px

py-7 padding-top: 1.75rem; padding-bottom: 1.75rem; 24px

px-7 padding-left: 1.75rem; padding-right: 1.75rem; 24px

py-8 padding-top: 2rem; padding-bottom: 2rem; 32px

px-8 padding-left: 2rem; padding-right: 2rem; 32px

py-9 padding-top: 2.25rem; padding-bottom: 2.25rem; 36px

px-9 padding-left: 2.25rem; padding-right: 2.25rem; 36px

py-10 padding-top: 2.5rem; padding-bottom: 2.5rem; 40px

px-10 padding-left: 2.5rem; padding-right: 2.5rem; 40px

py-11 padding-top: 2.75rem; padding-bottom: 2.75rem; 44px

px-11 padding-left: 2.75rem; padding-right: 2.75rem; 44px

py-12 padding-top: 3rem; padding-bottom: 3rem; 48px

64
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
px-12 padding-left: 3rem; padding-right: 3rem; 48px

py-14 padding-top: 3.5rem; padding-bottom: 3.5rem; 56px

px-14 padding-left: 3.5rem; padding-right: 3.5rem; 56px

py-16 padding-top: 4rem; padding-bottom: 4rem; 64px

px-16 padding-left: 4rem; padding-right: 4rem; 64px

py-20 padding-top: 5rem; padding-bottom: 5rem; 80px

px-20 padding-left: 5rem; padding-right: 5rem; 80px

py-24 padding-top: 6rem; padding-bottom: 6rem; 96px

px-24 padding-left: 6rem; padding-right: 6rem; 96px

py-28 padding-top: 7rem; padding-bottom: 7rem; 112px

px-28 padding-left: 7rem; padding-right: 7rem; 112px

py-32 padding-top: 8rem; padding-bottom: 8rem; 128px

px-32 padding-left: 8rem; padding-right: 8rem; 128px

py-36 padding-top: 9rem; padding-bottom: 9rem; 144px

px-36 padding-left: 9rem; padding-right: 9rem; 144px

py-40 padding-top: 10rem; padding-bottom: 10rem; 160px

px-40 padding-left: 10rem; padding-right: 10rem; 160px

py-44 padding-top: 11rem; padding-bottom: 11rem; 176px

px-44 padding-left: 11rem; padding-right: 11rem; 176px

py-48 padding-top: 12rem; padding-bottom: 12rem; 192px

px-48 padding-left: 12rem; padding-right: 12rem; 192px

py-52 padding-top: 13rem; padding-bottom: 13rem; 208px

px-52 padding-left: 13rem; padding-right: 13rem; 208px

65
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
py-56 padding-top: 14rem; padding-bottom: 14rem; 224px

px-56 padding-left: 14rem; padding-right: 14rem; 224px

py-60 padding-top: 15rem; padding-bottom: 15rem; 240px

px-60 padding-left: 15rem; padding-right: 15rem; 240px

py-64 padding-top: 16rem; padding-bottom: 16rem; 256px

px-64 padding-left: 16rem; padding-right: 16rem; 256px

py-70 padding-top: 18rem; padding-bottom: 18rem; 280px

px-70 padding-left: 18rem; padding-right: 18rem; 280px

py-80 padding-top: 20rem; padding-bottom: 20rem; 320px

px-80 padding-left: 20rem; padding-right: 20rem; 320px

py-96 padding-top: 24rem; padding-bottom: 24rem; 384px

px-96 padding-left: 24rem; padding-right: 24rem; 384px

py-px padding-top: 1px; padding-bottom: 1px;

px-px padding-left: 1px; padding-right: 1px;

pt-0 padding-top: 0;

pr-0 padding-right: 0;

pb-0 padding-bottom: 0;

pl-0 padding-left: 0;

pt-0.5 padding-top: 0.125rem; 2px

pr-0.5 padding-right: 0.125rem; 2px

pb-0.5 padding-bottom: 0.125rem; 2px

pl-0.5 padding-left: 0.125rem; 2px

pt-1 padding-top: 0.25rem; 4px

66
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
pr-1 padding-right: 0.25rem; 4px

pb-1 padding-bottom: 0.25rem; 4px

pl-1 padding-left: 0.25rem; 4px

pt-1.5 padding-top: 0.375rem; 6px

pr-1.5 padding-right: 0.375rem; 6px

pb-1.5 padding-bottom: 0.375rem; 6px

pl-1.5 padding-left: 0.375rem; 6px

pt-2 padding-top: 0.5rem; 8px

pr-2 padding-right: 0.5rem; 8px

pb-2 padding-bottom: 0.5rem; 8px

pl-2 padding-left: 0.5rem; 8px

pt-2.5 padding-top: 0.625rem; 10px

pr-2.5 padding-right: 0.625rem; 10px

pb-2.5 padding-bottom: 0.625rem; 10px

pl-2.5 padding-left: 0.625rem; 10px

pt-3 padding-top: 0.75rem; 12px

pr-3 padding-right: 0.75rem; 12px

pb-3 padding-bottom: 0.75rem; 12px

pl-3 padding-left: 0.75rem; 12px

pt-3.5 padding-top: 0.875rem; 14px

pr-3.5 padding-right: 0.875rem; 14px

pb-3.5 padding-bottom: 0.875rem; 14px

pl-3.5 padding-left: 0.875rem; 14px

67
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
pt-4 padding-top: 1rem; 16px

pr-4 padding-right: 1rem; 16px

pb-4 padding-bottom: 1rem; 16px

pl-4 padding-left: 1rem; 16px

pt-5 padding-top: 1.25rem; 20px

pr-5 padding-right: 1.25rem; 20px

pb-5 padding-bottom: 1.25rem; 20px

pl-5 padding-left: 1.25rem; 20px

pt-6 padding-top: 1.5rem; 24px

pr-6 padding-right: 1.5rem; 24px

pb-6 padding-bottom: 1.5rem; 24px

pl-6 padding-left: 1.5rem; 24px

pt-7 padding-top: 1.75rem; 28px

pr-7 padding-right: 1.75rem; 28px

pb-7 padding-bottom: 1.75rem; 28px

pl-7 padding-left: 1.75rem; 28px

pt-8 padding-top: 2rem; 32px

pr-8 padding-right: 2rem; 32px

pb-8 padding-bottom: 2rem; 32px

pl-8 padding-left: 2rem; 32px

pt-9 padding-top: 2.25rem; 36px

pr-9 padding-right: 2.25rem; 36px

pb-9 padding-bottom: 2.25rem; 36px

68
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
pl-9 padding-left: 2.25rem; 36px

pt-10 padding-top: 2.5rem; 40px

pr-10 padding-right: 2.5rem; 40px

pb-10 padding-bottom: 2.5rem; 40px

pl-10 padding-left: 2.5rem; 40px

pt-11 padding-top: 2.75rem; 44px

pr-11 padding-right: 2.75rem; 44px

pb-11 padding-bottom: 2.75rem; 44px

pl-11 padding-left: 2.75rem; 44px

pt-12 padding-top: 3rem; 48px

pr-12 padding-right: 3rem; 48px

pb-12 padding-bottom: 3rem; 48px

pl-12 padding-left: 3rem; 48px

pt-14 padding-top: 3.5rem; 56px

pr-14 padding-right: 3.5rem; 56px

pb-14 padding-bottom: 3.5rem; 56px

pl-14 padding-left: 3.5rem; 56px

pt-16 padding-top: 4rem; 64px

pr-16 padding-right: 4rem; 64px

pb-16 padding-bottom: 4rem; 64px

pl-16 padding-left: 4rem; 64px

pt-20 padding-top: 5rem; 80px

pr-20 padding-right: 5rem; 80px

69
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
pb-20 padding-bottom: 5rem; 80px

pl-20 padding-left: 5rem; 80px

pt-24 padding-top: 6rem; 96px

pr-24 padding-right: 6rem; 96px

pb-24 padding-bottom: 6rem; 96px

pl-24 padding-left: 6rem; 96px

pt-28 padding-top: 7rem; 112px

pr-28 padding-right: 7rem; 112px

pb-28 padding-bottom: 7rem; 112px

pl-28 padding-left: 7rem; 112px

pt-32 padding-top: 8rem; 128px

pr-32 padding-right: 8rem; 128px

pb-32 padding-bottom: 8rem; 128px

pl-32 padding-left: 8rem; 128px

pt-36 padding-top: 9rem; 144px

pr-36 padding-right: 9rem; 144px

pb-36 padding-bottom: 9rem; 144px

pl-36 padding-left: 9rem; 144px

pt-40 padding-top: 10rem; 160px

pr-40 padding-right: 10rem; 160px

pb-40 padding-bottom: 10rem; 160px

pl-40 padding-left: 10rem; 160px

pt-44 padding-top: 11rem; 176px

70
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
pr-44 padding-right: 11rem; 176px

pb-44 padding-bottom: 11rem; 176px

pl-44 padding-left: 11rem; 176px

pt-48 padding-top: 12rem; 192px

pr-48 padding-right: 12rem; 192px

pb-48 padding-bottom: 12rem; 192px

pl-48 padding-left: 12rem; 192px

pt-52 padding-top: 13rem; 208px

pr-52 padding-right: 13rem; 208px

pb-52 padding-bottom: 13rem; 208px

pl-52 padding-left: 13rem; 208px

pt-56 padding-top: 14rem; 224px

pr-56 padding-right: 14rem; 224px

pb-56 padding-bottom: 14rem; 224px

pl-56 padding-left: 14rem; 224px

pt-60 padding-top: 15rem; 240px

pr-60 padding-right: 15rem; 240px

pb-60 padding-bottom: 15rem; 240px

pl-60 padding-left: 15rem; 240px

pt-64 padding-top: 16rem; 256px

pr-64 padding-right: 16rem; 256px

pb-64 padding-bottom: 16rem; 256px

pl-64 padding-left: 16rem; 256px

71
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
pt-72 padding-top: 18rem; 288px

pr-72 padding-right: 18rem; 288px

pb-72 padding-bottom: 18rem; 288px

pl-72 padding-left: 18rem; 288px

pt-80 padding-top: 20rem; 320px

pr-80 padding-right: 20rem; 320px

pb-80 padding-bottom: 20rem; 320px

pl-80 padding-left: 20rem; 320px

pt-96 padding-top: 24rem; 384px

pr-96 padding-right: 24rem; 384px

pb-96 padding-bottom: 24rem; 384px

pl-96 padding-left: 24rem; 384px

pt-px padding-top: 1px;

pr-px padding-right: 1px;

pb-px padding-bottom: 1px;

pl-px padding-left: 1px;

72
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
Margin
Controls margin (and negative margin) in 0.25rem increments.

m-0 margin: 0;

m-0.5 margin: 0.125rem; 2px

m-1 margin: 0.25rem; 4px

m-1.5 margin: 0.375rem; 6px

m-2 margin: 0.5rem; 8px

m-2.5 margin: 0.625rem; 10px

m-3 margin: 0.75rem; 12px

m-3.5 margin: 0.875rem; 14px

m-4 margin: 1rem; 16px

m-5 margin: 1.25rem; 20px

m-6 margin: 1.5rem; 24px

m-8 margin: 2rem; 32px

m-10 margin: 2.5rem; 40px

m-11 margin: 2.75rem; 44px

m-12 margin: 3rem; 48px

m-14 margin: 3.5rem; 56px

m-16 margin: 4rem; 64px

m-20 margin: 5rem; 80px

m-24 margin: 6rem; 96px

m-28 margin: 7rem; 112px

m-32 margin: 8rem; 128px

73
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
m-36 margin: 9rem; 144px

m-40 margin: 10rem; 160px

m-44 margin: 11rem; 176px

m-48 margin: 12rem; 192px

m-52 margin: 13rem; 208px

m-56 margin: 14rem; 224px

m-64 margin: 16rem; 256px

m-72 margin: 18rem; 288px

m-80 margin: 20rem; 320px

m-96 margin: 24rem; 384px

m-px margin: 1px;

my-0 margin-top: 0; margin-bottom: 0;

mx-0 margin-left: 0; margin-right: 0;

my-0.5 margin-top: 0.125rem; margin-bottom: 0.125rem; 2px

mx-0.5 margin-left: 0.125rem; margin-right: 0.125rem; 2px

my-1 margin-top: 0.25rem; margin-bottom: 0.25rem; 4px

mx-1 margin-left: 0.25rem; margin-right: 0.25rem; 4px

my-1.5 margin-top: 0.375rem; margin-bottom: 0.375rem; 6px

mx-1.5 margin-left: 0.375rem; margin-right: 0.375rem; 6px

my-2 margin-top: 0.5rem; margin-bottom: 0.5rem; 8px

mx-2 margin-left: 0.5rem; margin-right: 0.5rem; 8px

my-2.5 margin-top: 0.625rem; margin-bottom: 0.625rem; 10px

mx-2.5 margin-left: 0.625rem; margin-right: 0.625rem; 10px

74
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
my-3 margin-top: 0.75rem; margin-bottom: 0.75rem; 12px

mx-3 margin-left: 0.75rem; margin-right: 0.75rem; 12px

my-3.5 margin-top: 0.875rem; margin-bottom: 0.875rem; 14px

mx-3.5 margin-left: 0.875rem; margin-right: 0.875rem; 14px

my-4 margin-top: 1rem; margin-bottom: 1rem; 16px

mx-4 margin-left: 1rem; margin-right: 1rem; 16px

my-5 margin-top: 1.25rem; margin-bottom: 1.25rem; 20px

mx-5 margin-left: 1.25rem; margin-right: 1.25rem; 20px

my-6 margin-top: 1.5rem; margin-bottom: 1.5rem; 24px

mx-6 margin-left: 1.5rem; margin-right: 1.5rem; 24px

my-7 margin-top: 1.75rem; margin-bottom: 1.75rem; 24px

mx-7 margin-left: 1.75rem; margin-right: 1.75rem; 24px

my-8 margin-top: 2rem; margin-bottom: 2rem; 32px

mx-8 margin-left: 2rem; margin-right: 2rem; 32px

my-9 margin-top: 2.25rem; margin-bottom: 2.25rem; 36px

mx-9 margin-left: 2.25rem; margin-right: 2.25rem; 36px

my-10 margin-top: 2.5rem; margin-bottom: 2.5rem; 40px

mx-10 margin-left: 2.5rem; margin-right: 2.5rem; 40px

my-11 margin-top: 2.75rem; margin-bottom: 2.75rem; 44px

mx-11 margin-left: 2.75rem; margin-right: 2.75rem; 44px

my-12 margin-top: 3rem; margin-bottom: 3rem; 48px

mx-12 margin-left: 3rem; margin-right: 3rem; 48px

my-14 margin-top: 3.5rem; margin-bottom: 3.5rem; 56px

75
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
mx-14 margin-left: 3.5rem; margin-right: 3.5rem; 56px

my-16 margin-top: 4rem; margin-bottom: 4rem; 64px

mx-16 margin-left: 4rem; margin-right: 4rem; 64px

my-20 margin-top: 5rem; margin-bottom: 5rem; 80px

mx-20 margin-left: 5rem; margin-right: 5rem; 80px

my-24 margin-top: 6rem; margin-bottom: 6rem; 96px

mx-24 margin-left: 6rem; margin-right: 6rem; 96px

my-28 margin-top: 7rem; margin-bottom: 7rem; 112px

mx-28 margin-left: 7rem; margin-right: 7rem; 112px

my-32 margin-top: 8rem; margin-bottom: 8rem; 128px

mx-32 margin-left: 8rem; margin-right: 8rem; 128px

my-36 margin-top: 9rem; margin-bottom: 9rem; 144px

mx-36 margin-left: 9rem; margin-right: 9rem; 144px

my-40 margin-top: 10rem; margin-bottom: 10rem; 160px

mx-40 margin-left: 10rem; margin-right: 10rem; 160px

my-44 margin-top: 11rem; margin-bottom: 11rem; 176px

mx-44 margin-left: 11rem; margin-right: 11rem; 176px

my-48 margin-top: 12rem; margin-bottom: 12rem; 192px

mx-48 margin-left: 12rem; margin-right: 12rem; 192px

my-52 margin-top: 13rem; margin-bottom: 13rem; 208px

mx-52 margin-left: 13rem; margin-right: 13rem; 208px

my-56 margin-top: 14rem; margin-bottom: 14rem; 224px

mx-56 margin-left: 14rem; margin-right: 14rem; 224px

76
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
my-60 margin-top: 15rem; margin-bottom: 15rem; 240px

mx-60 margin-left: 15rem; margin-right: 15rem; 240px

my-64 margin-top: 16rem; margin-bottom: 16rem; 256px

mx-64 margin-left: 16rem; margin-right: 16rem; 256px

my-70 margin-top: 18rem; margin-bottom: 18rem; 280px

mx-70 margin-left: 18rem; margin-right: 18rem; 280px

my-80 margin-top: 20rem; margin-bottom: 20rem; 320px

mx-80 margin-left: 20rem; margin-right: 20rem; 320px

my-96 margin-top: 24rem; margin-bottom: 24rem; 384px

mx-96 margin-left: 24rem; margin-right: 24rem; 384px

my-px margin-top: 1px; margin-bottom: 1px;

mx-px margin-left: 1px; margin-right: 1px;

mt-0 margin-top: 0;

mr-0 margin-right: 0;

mb-0 margin-bottom: 0;

ml-0 margin-left: 0;

mt-0.5 margin-top: 0.125rem; 2px

mr-0.5 margin-right: 0.125rem; 2px

mb-0.5 margin-bottom: 0.125rem; 2px

ml-0.5 margin-left: 0.125rem; 2px

mt-1 margin-top: 0.25rem; 4px

mr-1 margin-right: 0.25rem; 4px

mb-1 margin-bottom: 0.25rem; 4px

77
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
ml-1 margin-left: 0.25rem; 4px

mt-1.5 margin-top: 0.375rem; 6px

mr-1.5 margin-right: 0.375rem; 6px

mb-1.5 margin-bottom: 0.375rem; 6px

ml-1.5 margin-left: 0.375rem; 6px

mt-2 margin-top: 0.5rem; 8px

mr-2 margin-right: 0.5rem; 8px

mb-2 margin-bottom: 0.5rem; 8px

ml-2 margin-left: 0.5rem; 8px

mt-2.5 margin-top: 0.625rem; 10px

mr-2.5 margin-right: 0.625rem; 10px

mb-2.5 margin-bottom: 0.625rem; 10px

ml-2.5 margin-left: 0.625rem; 10px

mt-3 margin-top: 0.75rem; 12px

mr-3 margin-right: 0.75rem; 12px

mb-3 margin-bottom: 0.75rem; 12px

ml-3 margin-left: 0.75rem; 12px

mt-3.5 margin-top: 0.875rem; 14px

mr-3.5 margin-right: 0.875rem; 14px

mb-3.5 margin-bottom: 0.875rem; 14px

ml-3.5 margin-left: 0.875rem; 14px

mt-4 margin-top: 1rem; 16px

mr-4 margin-right: 1rem; 16px

78
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
mb-4 margin-bottom: 1rem; 16px

ml-4 margin-left: 1rem; 16px

mt-5 margin-top: 1.25rem; 20px

mr-5 margin-right: 1.25rem; 20px

mb-5 margin-bottom: 1.25rem; 20px

ml-5 margin-left: 1.25rem; 20px

mt-6 margin-top: 1.5rem; 24px

mr-6 margin-right: 1.5rem; 24px

mb-6 margin-bottom: 1.5rem; 24px

ml-6 margin-left: 1.5rem; 24px

mt-7 margin-top: 1.75rem; 28px

mr-7 margin-right: 1.75rem; 28px

mb-7 margin-bottom: 1.75rem; 28px

ml-7 margin-left: 1.75rem; 28px

mt-8 margin-top: 2rem; 32px

mr-8 margin-right: 2rem; 32px

mb-8 margin-bottom: 2rem; 32px

ml-8 margin-left: 2rem; 32px

mt-9 margin-top: 2.25rem; 36px

mr-9 margin-right: 2.25rem; 36px

mb-9 margin-bottom: 2.25rem; 36px

ml-9 margin-left: 2.25rem; 36px

mt-10 margin-top: 2.5rem; 40px

79
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
mr-10 margin-right: 2.5rem; 40px

mb-10 margin-bottom: 2.5rem; 40px

ml-10 margin-left: 2.5rem; 40px

mt-11 margin-top: 2.75rem; 44px

mr-11 margin-right: 2.75rem; 44px

mb-11 margin-bottom: 2.75rem; 44px

ml-11 margin-left: 2.75rem; 44px

mt-12 margin-top: 3rem; 48px

mr-12 margin-right: 3rem; 48px

mb-12 margin-bottom: 3rem; 48px

ml-12 margin-left: 3rem; 48px

mt-14 margin-top: 3.5rem; 56px

mr-14 margin-right: 3.5rem; 56px

mb-14 margin-bottom: 3.5rem; 56px

ml-14 margin-left: 3.5rem; 56px

mt-16 margin-top: 4rem; 64px

mr-16 margin-right: 4rem; 64px

mb-16 margin-bottom: 4rem; 64px

ml-16 margin-left: 4rem; 64px

mt-20 margin-top: 5rem; 80px

mr-20 margin-right: 5rem; 80px

mb-20 margin-bottom: 5rem; 80px

ml-20 margin-left: 5rem; 80px

80
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
mt-24 margin-top: 6rem; 96px

mr-24 margin-right: 6rem; 96px

mb-24 margin-bottom: 6rem; 96px

ml-24 margin-left: 6rem; 96px

mt-28 margin-top: 7rem; 112px

mr-28 margin-right: 7rem; 112px

mb-28 margin-bottom: 7rem; 112px

ml-28 margin-left: 7rem; 112px

mt-32 margin-top: 8rem; 128px

mr-32 margin-right: 8rem; 128px

mb-32 margin-bottom: 8rem; 128px

ml-32 margin-left: 8rem; 128px

mt-36 margin-top: 9rem; 144px

mr-36 margin-right: 9rem; 144px

mb-36 margin-bottom: 9rem; 144px

ml-36 margin-left: 9rem; 144px

mt-40 margin-top: 10rem; 160px

mr-40 margin-right: 10rem; 160px

mb-40 margin-bottom: 10rem; 160px

ml-40 margin-left: 10rem; 160px

mt-44 margin-top: 11rem; 176px

mr-44 margin-right: 11rem; 176px

mb-44 margin-bottom: 11rem; 176px

81
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
ml-44 margin-left: 11rem; 176px

mt-48 margin-top: 12rem; 192px

mr-48 margin-right: 12rem; 192px

mb-48 margin-bottom: 12rem; 192px

ml-48 margin-left: 12rem; 192px

mt-52 margin-top: 13rem; 208px

mr-52 margin-right: 13rem; 208px

mb-52 margin-bottom: 13rem; 208px

ml-52 margin-left: 13rem; 208px

mt-56 margin-top: 14rem; 224px

mr-56 margin-right: 14rem; 224px

mb-56 margin-bottom: 14rem; 224px

ml-56 margin-left: 14rem; 224px

mt-60 margin-top: 15rem; 240px

mr-60 margin-right: 15rem; 240px

mb-60 margin-bottom: 15rem; 240px

ml-60 margin-left: 15rem; 240px

mt-64 margin-top: 16rem; 256px

mr-64 margin-right: 16rem; 256px

mb-64 margin-bottom: 16rem; 256px

ml-64 margin-left: 16rem; 256px

mt-72 margin-top: 18rem; 288px

mr-72 margin-right: 18rem; 288px

82
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
mb-72 margin-bottom: 18rem; 288px

ml-72 margin-left: 18rem; 288px

mt-80 margin-top: 20rem; 320px

mr-80 margin-right: 20rem; 320px

mb-80 margin-bottom: 20rem; 320px

ml-80 margin-left: 20rem; 320px

mt-96 margin-top: 24rem; 384px

mr-96 margin-right: 24rem; 384px

mb-96 margin-bottom: 24rem; 384px

ml-96 margin-left: 24rem; 384px

mt-px margin-top: 1px;

mr-px margin-right: 1px;

mb-px margin-bottom: 1px;

ml-px margin-left: 1px;

-m-0 margin: 0;

-m-0.5 margin: -0.125rem; 2px

-m-1 margin: -0.25rem; 4px

-m-1.5 margin: -0.375rem; 6px

-m-2 margin: -0.5rem; 8px

-m-2.5 margin: -0.625rem; 10px

-m-3 margin: -0.75rem; 12px

-m-3.5 margin: -0.875rem; 14px

-m-4 margin: -1rem; 16px

83
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
-m-5 margin: -1.25rem; 20px

-m-6 margin: -1.5rem; 24px

-m-8 margin: -2rem; 32px

-m-10 margin: -2.5rem; 40px

-m-11 margin: -2.75rem; 44px

-m-12 margin: -3rem; 48px

-m-14 margin: -3.5rem; 56px

-m-16 margin: -4rem; 64px

-m-20 margin: -5rem; 80px

-m-24 margin: -6rem; 96px

-m-28 margin: -7rem; 112px

-m-32 margin: -8rem; 128px

-m-36 margin: -9rem; 144px

-m-40 margin: -10rem; 160px

-m-44 margin: -11rem; 176px

-m-48 margin: -12rem; 192px

-m-52 margin: -13rem; 208px

-m-56 margin: -14rem; 224px

-m-64 margin: -16rem; 256px

-m-72 margin: -18rem; 288px

-m-80 margin: -20rem; 320px

-m-96 margin: -24rem; 384px

-m-px margin: -1px;

84
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
-my-0 margin-top: 0; margin-bottom: 0;

-mx-0 margin-left: 0; margin-right: 0;

-my-0.5 margin-top: -0.125rem; margin-bottom: -0.125rem; 2px

-mx-0.5 margin-left: -0.125rem; margin-right: -0.125rem; 2px

-my-1 margin-top: -0.25rem; margin-bottom: -0.25rem; 4px

-mx-1 margin-left: -0.25rem; margin-right: -0.25rem; 4px

-my-1.5 margin-top: -0.375rem; margin-bottom: -0.375rem; 6px

-mx-1.5 margin-left: -0.375rem; margin-right: -0.375rem; 6px

-my-2 margin-top: -0.5rem; margin-bottom: -0.5rem; 8px

-mx-2 margin-left: -0.5rem; margin-right: -0.5rem; 8px

-my-2.5 margin-top: -0.625rem; margin-bottom: -0.625rem; 10px

-mx-2.5 margin-left: -0.625rem; margin-right: -0.625rem; 10px

-my-3 margin-top: -0.75rem; margin-bottom: -0.75rem; 12px

-mx-3 margin-left: -0.75rem; margin-right: -0.75rem; 12px

-my-3.5 margin-top: -0.875rem; margin-bottom: -0.875rem; 14px

-mx-3.5 margin-left: -0.875rem; margin-right: -0.875rem; 14px

-my-4 margin-top: -1rem; margin-bottom: -1rem; 16px

-mx-4 margin-left: -1rem; margin-right: -1rem; 16px

-my-5 margin-top: -1.25rem; margin-bottom: -1.25rem; 20px

-mx-5 margin-left: -1.25rem; margin-right: -1.25rem; 20px

-my-6 margin-top: -1.5rem; margin-bottom: -1.5rem; 24px

-mx-6 margin-left: -1.5rem; margin-right: -1.5rem; 24px

-my-7 margin-top: 1.75rem; margin-bottom: 1.75rem; 24px

85
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
-mx-7 margin-left: 1.75rem; margin-right: 1.75rem; 24px

-my-8 margin-top: -2rem; margin-bottom: -2rem; 32px

-mx-8 margin-left: -2rem; margin-right: -2rem; 32px

-my-9 margin-top: 2.25rem; margin-bottom: 2.25rem; 36px

-mx-9 margin-left: 2.25rem; margin-right: 2.25rem; 36px

-my-10 margin-top: -2.5rem; margin-bottom: -2.5rem; 40px

-mx-10 margin-left: -2.5rem; margin-right: -2.5rem; 40px

-my-11 margin-top: -2.75rem; margin-bottom: -2.75rem; 44px

-mx-11 margin-left: -2.75rem; margin-right: -2.75rem; 44px

-my-12 margin-top: -3rem; margin-bottom: -3rem; 48px

-mx-12 margin-left: -3rem; margin-right: -3rem; 48px

-my-14 margin-top: -3.5rem; margin-bottom: -3.5rem; 56px

-mx-14 margin-left: -3.5rem; margin-right: -3.5rem; 56px

-my-16 margin-top: -4rem; margin-bottom: -4rem; 64px

-mx-16 margin-left: -4rem; margin-right: -4rem; 64px

-my-20 margin-top: -5rem; margin-bottom: -5rem; 80px

-mx-20 margin-left: -5rem; margin-right: -5rem; 80px

-my-24 margin-top: -6rem; margin-bottom: -6rem; 96px

-mx-24 margin-left: -6rem; margin-right: -6rem; 96px

-my-28 margin-top: -7rem; margin-bottom: -7rem; 112px

-mx-28 margin-left: -7rem; margin-right: -7rem; 112px

-my-32 margin-top: -8rem; margin-bottom: -8rem; 128px

-mx-32 margin-left: -8rem; margin-right: -8rem; 128px

86
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
-my-36 margin-top: -9rem; margin-bottom: -9rem; 144px

-mx-36 margin-left: -9rem; margin-right: -9rem; 144px

-my-40 margin-top: -10rem; margin-bottom: -10rem; 160px

-mx-40 margin-left: -10rem; margin-right: -10rem; 160px

-my-44 margin-top: -11rem; margin-bottom: -11rem; 176px

-mx-44 margin-left: -11rem; margin-right: -11rem; 176px

-my-48 margin-top: -12rem; margin-bottom: -12rem; 192px

-mx-48 margin-left: -12rem; margin-right: -12rem; 192px

-my-52 margin-top: -13rem; margin-bottom: -13rem; 208px

-mx-52 margin-left: -13rem; margin-right: -13rem; 208px

-my-56 margin-top: -14rem; margin-bottom: -14rem; 224px

-mx-56 margin-left: -14rem; margin-right: -14rem; 224px

-my-60 margin-top: 15rem; margin-bottom: 15rem; 240px

-mx-60 margin-left: 15rem; margin-right: 15rem; 240px

-my-64 margin-top: -16rem; margin-bottom: -16rem; 256px

-mx-64 margin-left: -16rem; margin-right: -16rem; 256px

-my-70 margin-top: -18rem; margin-bottom: -18rem; 280px

-mx-70 margin-left: -18rem; margin-right: -18rem; 280px

-my-80 margin-top: -20rem; margin-bottom: -20rem; 320px

-mx-80 margin-left: -20rem; margin-right: -20rem; 320px

-my-96 margin-top: -24rem; margin-bottom: -24rem; 384px

-mx-96 margin-left: -24rem; margin-right: -24rem; 384px

-my-px margin-top: -1px; margin-bottom: -1px;

87
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
-mx-px margin-left: -1px; margin-right: -1px;

-mt-0 margin-top: 0;

-mr-0 margin-right: 0;

-mb-0 margin-bottom: 0;

-ml-0 margin-left: 0;

-mt-0.5 margin-top: -0.125rem; 2px

-mr-0.5 margin-right: -0.125rem; 2px

-mb-0.5 margin-bottom: -0.125rem; 2px

-ml-0.5 margin-left: -0.125rem; 2px

-mt-1 margin-top: -0.25rem; 4px

-mr-1 margin-right: -0.25rem; 4px

-mb-1 margin-bottom: -0.25rem; 4px

-ml-1 margin-left: -0.25rem; 4px

-mt-1.5 margin-top: -0.375rem; 6px

-mr-1.5 margin-right: -0.375rem; 6px

-mb-1.5 margin-bottom: -0.375rem; 6px

-ml-1.5 margin-left: -0.375rem; 6px

-mt-2 margin-top: -0.5rem; 8px

-mr-2 margin-right: -0.5rem; 8px

-mb-2 margin-bottom: -0.5rem; 8px

-ml-2 margin-left: -0.5rem; 8px

-mt-2.5 margin-top: -0.625rem; 10px

-mr-2.5 margin-right: -0.625rem; 10px

88
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
-mb-2.5 margin-bottom: -0.625rem; 10px

-ml-2.5 margin-left: -0.625rem; 10px

-mt-3 margin-top: -0.75rem; 12px

-mr-3 margin-right: -0.75rem; 12px

-mb-3 margin-bottom: -0.75rem; 12px

-ml-3 margin-left: -0.75rem; 12px

-mt-3.5 margin-top: -0.875rem; 14px

-mr-3.5 margin-right: -0.875rem; 14px

-mb-3.5 margin-bottom: -0.875rem; 14px

-ml-3.5 margin-left: -0.875rem; 14px

-mt-4 margin-top: -1rem; 16px

-mr-4 margin-right: -1rem; 16px

-mb-4 margin-bottom: -1rem; 16px

-ml-4 margin-left: -1rem; 16px

-mt-5 margin-top: -1.25rem; 20px

-mr-5 margin-right: -1.25rem; 20px

-mb-5 margin-bottom: -1.25rem; 20px

-ml-5 margin-left: -1.25rem; 20px

-mt-6 margin-top: -1.5rem; 24px

-mr-6 margin-right: -1.5rem; 24px

-mb-6 margin-bottom: -1.5rem; 24px

-ml-6 margin-left: -1.5rem; 24px

-mt-7 margin-top: 1.75rem; 28px

89
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
-mr-7 margin-right: 1.75rem; 28px

-mb-7 margin-bottom: 1.75rem; 28px

-ml-7 margin-left: 1.75rem; 28px

-mt-8 margin-top: -2rem; 32px

-mr-8 margin-right: -2rem; 32px

-mb-8 margin-bottom: -2rem; 32px

-ml-8 margin-left: -2rem; 32px

-mt-9 margin-top: 2.25rem; 36px

-mr-9 margin-right: 2.25rem; 36px

-mb-9 margin-bottom: 2.25rem; 36px

-ml-9 margin-left: 2.25rem; 36px

-mt-10 margin-top: -2.5rem; 40px

-mr-10 margin-right: -2.5rem; 40px

-mb-10 margin-bottom: -2.5rem; 40px

-ml-10 margin-left: -2.5rem; 40px

-mt-11 margin-top: -2.75rem; 44px

-mr-11 margin-right: -2.75rem; 44px

-mb-11 margin-bottom: -2.75rem; 44px

-ml-11 margin-left: -2.75rem; 44px

-mt-12 margin-top: -3rem; 48px

-mr-12 margin-right: -3rem; 48px

-mb-12 margin-bottom: -3rem; 48px

-ml-12 margin-left: -3rem; 48px

90
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
-mt-14 margin-top: -3.5rem; 56px

-mr-14 margin-right: -3.5rem; 56px

-mb-14 margin-bottom: -3.5rem; 56px

-ml-14 margin-left: -3.5rem; 56px

-mt-16 margin-top: -4rem; 64px

-mr-16 margin-right: -4rem; 64px

-mb-16 margin-bottom: -4rem; 64px

-ml-16 margin-left: -4rem; 64px

-mt-20 margin-top: -5rem; 80px

-mr-20 margin-right: -5rem; 80px

-mb-20 margin-bottom: -5rem; 80px

-ml-20 margin-left: -5rem; 80px

-mt-24 margin-top: -6rem; 96px

-mr-24 margin-right: -6rem; 96px

-mb-24 margin-bottom: -6rem; 96px

-ml-24 margin-left: -6rem; 96px

-mt-28 margin-top: -7rem; 112px

-mr-28 margin-right: -7rem; 112px

-mb-28 margin-bottom: -7rem; 112px

-ml-28 margin-left: -7rem; 112px

-mt-32 margin-top: -8rem; 128px

-mr-32 margin-right: -8rem; 128px

-mb-32 margin-bottom: -8rem; 128px

91
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
-ml-32 margin-left: -8rem; 128px

-mt-36 margin-top: -9rem; 144px

-mr-36 margin-right: -9rem; 144px

-mb-36 margin-bottom: -9rem; 144px

-ml-36 margin-left: -9rem; 144px

-mt-40 margin-top: -10rem; 160px

-mr-40 margin-right: -10rem; 160px

-mb-40 margin-bottom: -10rem; 160px

-ml-40 margin-left: -10rem; 160px

-mt-44 margin-top: -11rem; 176px

-mr-44 margin-right: -11rem; 176px

-mb-44 margin-bottom: -11rem; 176px

-ml-44 margin-left: -11rem; 176px

-mt-48 margin-top: -12rem; 192px

-mr-48 margin-right: -12rem; 192px

-mb-48 margin-bottom: -12rem; 192px

-ml-48 margin-left: -12rem; 192px

-mt-52 margin-top: -13rem; 208px

-mr-52 margin-right: -13rem; 208px

-mb-52 margin-bottom: -13rem; 208px

-ml-52 margin-left: -13rem; 208px

-mt-56 margin-top: -14rem; 224px

-mr-56 margin-right: -14rem; 224px

92
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
-mb-56 margin-bottom: -14rem; 224px

-ml-56 margin-left: -14rem; 224px

-mt-60 margin-top: 15rem; 240px

-mr-60 margin-right: 15rem; 240px

-mb-60 margin-bottom: 15rem; 240px

-ml-60 margin-left: 15rem; 240px

-mt-64 margin-top: -16rem; 256px

-mr-64 margin-right: -16rem; 256px

-mb-64 margin-bottom: -16rem; 256px

-ml-64 margin-left: -16rem; 256px

-mt-72 margin-top: -18rem; 288px

-mr-72 margin-right: -18rem; 288px

-mb-72 margin-bottom: -18rem; 288px

-ml-72 margin-left: -18rem; 288px

-mt-80 margin-top: -20rem; 320px

-mr-80 margin-right: -20rem; 320px

-mb-80 margin-bottom: -20rem; 320px

-ml-80 margin-left: -20rem; 320px

-mt-96 margin-top: -24rem; 384px

-mr-96 margin-right: -24rem; 384px

-mb-96 margin-bottom: -24rem; 384px

-ml-96 margin-left: -24rem; 384px

-mt-px margin-top: -1px;

93
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
-mr-px margin-right: -1px;

-mb-px margin-bottom: -1px;

-ml-px margin-left: -1px;

Space Between
Controls margin between child elements

space-x-0 margin-left: 0;

space-x-0.5 margin-left: 0.125rem;

space-x-1 margin-left: 0.25rem;

space-x-1.5 margin-left: 0.375rem;

space-x-2 margin-left: 0.5rem;

space-x-2.5 margin-left: 0.625rem;

space-x-3 margin-left: 0.75rem;

space-x-3 margin-left: 0.875rem;

space-x-4 margin-left: 1rem;

space-x-5 margin-left: 1.25rem;

space-x-6 margin-left: 1.5rem;

space-x-7 margin-left: 1.75rem;

space-x-8 margin-left: 2rem;

space-x-9 margin-left: 2.25rem;

space-x-10 margin-left: 2.5rem;

space-x-11 margin-left: 2.75rem;

94
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
space-x-12 margin-left: 3rem;

space-x-14 margin-left: 3.5rem;

space-x-16 margin-left: 4rem;

space-x-20 margin-left: 5rem;

space-x-24 margin-left: 6rem;

space-x-28 margin-left: 7rem;

space-x-32 margin-left: 8rem;

space-x-36 margin-left: 9rem;

space-x-40 margin-left: 10rem;

space-x-44 margin-left: 11rem;

space-x-48 margin-left: 12rem;

space-x-52 margin-left: 13rem;

space-x-56 margin-left: 14rem;

space-x-60 margin-left: 15rem;

space-x-64 margin-left: 16rem;

space-x-72 margin-left: 18rem;

space-x-80 margin-left: 20rem;

space-x-96 margin-left: 24rem;

space-x-px margin-left: 1px;

-space-x-0 margin-left: 0;

-space-x-0.5 margin-left: -0.125rem;

-space-x-1 margin-left: -0.25rem;

-space-x-1.5 margin-left: -0.375rem;

95
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
-space-x-2 margin-left: -0.5rem;

-space-x-2.5 margin-left: -0.625rem;

-space-x-3 margin-left: -0.75rem;

-space-x-3 margin-left: -0.875rem;

-space-x-4 margin-left: -1rem;

-space-x-5 margin-left: -1.25rem;

-space-x-6 margin-left: -1.5rem;

-space-x-7 margin-left: -1.75rem;

-space-x-8 margin-left: -2rem;

-space-x-9 margin-left: -2.25rem;

-space-x-10 margin-left: -2.5rem;

-space-x-11 margin-left: -2.75rem;

-space-x-12 margin-left: -3rem;

-space-x-14 margin-left: -3.5rem;

-space-x-16 margin-left: -4rem;

-space-x-20 margin-left: -5rem;

-space-x-24 margin-left: -6rem;

-space-x-28 margin-left: -7rem;

-space-x-32 margin-left: -8rem;

-space-x-36 margin-left: -9rem;

-space-x-40 margin-left: -10rem;

-space-x-44 margin-left: -11rem;

-space-x-48 margin-left: -12rem;

96
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
-space-x-52 margin-left: -13rem;

-space-x-56 margin-left: -14rem;

-space-x-60 margin-left: -15rem;

-space-x-64 margin-left: -16rem;

-space-x-72 margin-left: -18rem;

-space-x-80 margin-left: -20rem;

-space-x-96 margin-left: -24rem;

-space-x-px margin-left: -1px;

space-y-0 margin-top: 0;

space-y-0.5 margin-top: 0.125rem;

space-y-1 margin-top: 0.25rem;

space-y-1.5 margin-top: 0.375rem;

space-y-2 margin-top: 0.5rem;

space-y-2.5 margin-top: 0.625rem;

space-y-3 margin-top: 0.75rem;

space-y-3 margin-top: 0.875rem;

space-y-4 margin-top: 1rem;

space-y-5 margin-top: 1.25rem;

space-y-6 margin-top: 1.5rem;

space-y-7 margin-top: 1.75rem;

space-y-8 margin-top: 2rem;

space-y-9 margin-top: 2.25rem;

space-y-10 margin-top: 2.5rem;

97
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
space-y-11 margin-top: 2.75rem;

space-y-12 margin-top: 3rem;

space-y-14 margin-top: 3.5rem;

space-y-16 margin-top: 4rem;

space-y-20 margin-top: 5rem;

space-y-24 margin-top: 6rem;

space-y-28 margin-top: 7rem;

space-y-32 margin-top: 8rem;

space-y-36 margin-top: 9rem;

space-y-40 margin-top: 10rem;

space-y-44 margin-top: 11rem;

space-y-48 margin-top: 12rem;

space-y-52 margin-top: 13rem;

space-y-56 margin-top: 14rem;

space-y-60 margin-top: 15rem;

space-y-64 margin-top: 16rem;

space-y-72 margin-top: 18rem;

space-y-80 margin-top: 20rem;

space-y-96 margin-top: 24rem;

space-y-px margin-top: 1px;

-space-y-0 margin-top: 0;

-space-y-0.5 margin-top: -0.125rem;

-space-y-1 margin-top: -0.25rem;

98
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
-space-y-1.5 margin-top: -0.375rem;

-space-y-2 margin-top: -0.5rem;

-space-y-2.5 margin-top: -0.625rem;

-space-y-3 margin-top: -0.75rem;

-space-y-3 margin-top: -0.875rem;

-space-y-4 margin-top: -1rem;

-space-y-5 margin-top: -1.25rem;

-space-y-6 margin-top: -1.5rem;

-space-y-7 margin-top: -1.75rem;

-space-y-8 margin-top: -2rem;

-space-y-9 margin-top: -2.25rem;

-space-y-10 margin-top: -2.5rem;

-space-y-11 margin-top: -2.75rem;

-space-y-12 margin-top: -3rem;

-space-y-14 margin-top: -3.5rem;

-space-y-16 margin-top: -4rem;

-space-y-20 margin-top: -5rem;

-space-y-24 margin-top: -6rem;

-space-y-28 margin-top: -7rem;

-space-y-32 margin-top: -8rem;

-space-y-36 margin-top: -9rem;

-space-y-40 margin-top: -10rem;

-space-y-44 margin-top: -11rem;

99
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Spacing
-space-y-48 margin-top: -12rem;

-space-y-52 margin-top: -13rem;

-space-y-56 margin-top: -14rem;

-space-y-60 margin-top: -15rem;

-space-y-64 margin-top: -16rem;

-space-y-72 margin-top: -18rem;

-space-y-80 margin-top: -20rem;

-space-y-96 margin-top: -24rem;

-space-y-px margin-top: -1px;

space-x-reverse --space-x-reverse: 1

space-y-reverse --space-y-reverse: 1

100
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Typography
Typography
Font Family
Sets the font family.

font-sans font-family: 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”;

font-serif font-family: Georgia, Cambria, “Times New Roman”,

Times, serif;

font-mono font-family: Menlo, Monaco, Consolas,

“Liberation Mono”, “Courier New”, monospace;

Font Size
Sets the font size.

text-xs font-size: 0.75rem; line-height: 1rem; 12px

text-sm font-size: 0.875rem; line-height: 1.25rem; 14px

text-base font-size: 1rem; line-height: 1.5rem; 16px

text-lg font-size: 1.125rem; line-height: 1.75rem; 18px

text-xl font-size: 1.25rem; line-height: 1.75rem; 20px

text-2xl font-size: 1.5rem; line-height: 2rem; 24px

text-3xl font-size: 1.875rem; line-height: 2.25rem; 30px

text-4xl font-size: 2.25rem; line-height: 2.5rem; 36px

text-5xl font-size: 3rem; line-height: 1; 48px

101
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Typography
text-6xl font-size: 3.75rem; line-height: 1; 64px

text-7xl font-size: 4.5rem; line-height: 1; 72px

text-8xl font-size: 6rem; line-height: 1; 80px

text-9xl font-size: 8rem; line-height: 1; 96px

Font Smoothing

antialiased -webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

subpixel-antialiased -webkit-font-smoothing: auto;

-moz-osx-font-smoothing: auto;

Font Style

italic font-style: italic;

not-italic font-style: normal;

102
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Typography
Font Weight
Sets the font weight.

font-thin font-weight: 100;

font-extralight font-weight: 200;

font-light font-weight: 300;

font-normal font-weight: 400;

font-medium font-weight: 500;

font-semibold font-weight: 600;

font-bold font-weight: 700;

font-extrabold font-weight: 800;

font-black font-weight: 900;

103
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Typography
Font Variant Numeric
Utilities for controlling the variant of numbers.

normal-nums font-variant-numeric: normal;

ordinal font-variant-numeric: ordinal;

slashed-zero font-variant-numeric: slashed-zero;

lining-nums font-variant-numeric: lining-nums;

oldstyle-nums font-variant-numeric: oldstyle-nums;

proportional-nums font-variant-numeric: proportional-nums;

tabular-nums font-variant-numeric: tabular-nums;

diagonal-fractions font-variant-numeric: diagonal-fractions;

stacked-fractions font-variant-numeric: stacked-fractions;

Letter Spacing
Sets the spacing between letters.

tracking-tighter letter-spacing: -0.05em;

tracking-tight letter-spacing: -0.025em;

tracking-normal letter-spacing: 0;

tracking-wide letter-spacing: 0.025em;

tracking-wider letter-spacing: 0.05em;

tracking-widest letter-spacing: 0.1em;

104
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Typography
Line Height
Sets the line height.

leading-none line-height: 1;

leading-tight line-height: 1.25;

leading-snug line-height: 1.375;

leading-normal line-height: 1.5;

leading-relaxed line-height: 1.625;

leading-loose line-height: 2;

leading-3 line-height: .75rem; 12px

leading-4 line-height: 1rem; 16px

leading-5 line-height: 1.25rem; 20px

leading-6 line-height: 1.5rem; 24px

leading-7 line-height: 1.75rem; 28px

leading-8 line-height: 2rem; 32px

leading-9 line-height: 2.25rem; 36px

leading-10 line-height: 2.5rem; 40px

105
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Typography
List Style Type
Sets the bullet style of a list.

list-none list-style-type: none;

list-disc list-style-type: disc;

list-decimal list-style-type: decimal;

List Style Position

Sets the position of a list’s bullets.

list-inside list-style-position: inside;

list-outside list-style-position: outside;

Text Align
Sets the alignment of text.

text-left text-align: left;

text-center text-align: center;

text-right text-align: right;

text-justify text-align: justify;

106
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Typography
Text Color
Sets the text color.

text-transparent color: transparent;

text-current color: currentColor;

text-black color: #000000;

text-white color: #ffffff;

text-gray-50 color: #F9FAFB;

text-gray-100 color: #F3F4F6;

text-gray-200 color: #E5E7EB;

text-gray-300 color: #D1D5DB;

text-gray-400 color: #9CA3AF;

text-gray-500 color: #6B7280;

text-gray-600 color: #4B5563;

text-gray-700 color: #374151;

text-gray-800 color: #1F2937;

text-gray-900 color: #111827;

text-red-50 color: #FEF2F2;

text-red-100 color: #FEE2E2;

text-red-200 color: #FECACA;

text-red-300 color: #FCA5A5;

text-red-400 color: #F87171;

text-red-500 color: #EF4444;

107
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Typography
text-red-600 color: #DC2626;

text-red-700 color: #B91C1C;

text-red-800 color: #991B1B;

text-red-900 color: #7F1D1D;

text-yellow-50 color: #FFFBEB;

text-yellow-100 color: #FEF3C7;

text-yellow-200 color: #FDE68A;

text-yellow-300 color: #FCD34D;

text-yellow-400 color: #FBBF24;

text-yellow-500 color: #F59E0B;

text-yellow-600 color: #D97706;

text-yellow-700 color: #B45309;

text-yellow-800 color: #92400E;

text-yellow-900 color: #78350F;

text-green-50 color: #ECFDF5;

text-green-100 color: #D1FAE5;

text-green-200 color: #A7F3D0;

text-green-300 color: #6EE7B7;

text-green-400 color: #34D399;

text-green-500 color: #10B981;

text-green-600 color: #059669;

text-green-700 color: #047857;

108
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Typography
text-green-800 color: #065F46;

text-green-900 color: #064E3B;

text-blue-50 color: #EFF6FF;

text-blue-100 color: #DBEAFE;

text-blue-200 color: #BFDBFE;

text-blue-300 color: #93C5FD;

text-blue-400 color: #60A5FA;

text-blue-500 color: #3B82F6;

text-blue-600 color: #2563EB;

text-blue-700 color: #1D4ED8;

text-blue-800 color: #1E40AF;

text-blue-900 color: #1E3A8A;

text-indigo-50 color: #EEF2FF;

text-indigo-100 color: #E0E7FF;

text-indigo-200 color: #C7D2FE;

text-indigo-300 color: #A5B4FC;

text-indigo-400 color: #818CF8;

text-indigo-500 color: #6366F1;

text-indigo-600 color: #4F46E5;

text-indigo-700 color: #4338CA;

text-indigo-800 color: #3730A3;

text-indigo-900 color: #312E81;

109
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Typography
text-purple-50 color: #F5F3FF;

text-purple-100 color: #EDE9FE;

text-purple-200 color: #DDD6FE;

text-purple-300 color: #C4B5FD;

text-purple-400 color: #A78BFA;

text-purple-500 color: #8B5CF6;

text-purple-600 color: #7C3AED;

text-purple-700 color: #6D28D9;

text-purple-800 color: #5B21B6;

text-purple-900 color: #4C1D95;

text-pink-50 color: #FDF2F8;

text-pink-100 color: #FCE7F3;

text-pink-200 color: #FBCFE8;

text-pink-300 color: #F9A8D4;

text-pink-400 color: #F472B6;

text-pink-500 color: #EC4899;

text-pink-600 color: #DB2777;

text-pink-700 color: #BE185D;

text-pink-800 color: #9D174D;

text-pink-900 color: #831843;

110
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Typography
Text Decoration
Utilities for controlling the decoration of text.

underline text-decoration: underline;

overline text-decoration: overline;

line-through text-decoration: line-through;

no-underline text-decoration: none;

Text Decoration Style

Utilities for controlling the style of text decorations.

decoration-solid text-decoration-style: solid;

decoration-double text-decoration-style: double;

decoration-dotted text-decoration-style: dotted;

decoration-dashed text-decoration-style: dashed;

decoration-wavy text-decoration-style: wavy;

111
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Typography
Text Decoration Thickness
Utilities for controlling the thickness of text decorations.

decoration-auto text-decoration-thickness: auto;

decoration-from-font text-decoration-thickness: from-font;

decoration-0 text-decoration-thickness: 0px;

decoration-1 text-decoration-thickness: 1px;

decoration-2 text-decoration-thickness: 2px;

decoration-4 text-decoration-thickness: 4px;

decoration-8 text-decoration-thickness: 8px;

Text Underline Offset

Utilities for controlling the offset of a text underline.

underline-offset-auto text-underline-offset: auto;

underline-offset-from-font text-underline-offset: from-font;

underline-offset-0 text-underline-offset: 0px;

underline-offset-1 text-underline-offset: 1px;

underline-offset-2 text-underline-offset: 2px;

underline-offset-4 text-underline-offset: 4px;

underline-offset-8 text-underline-offset: 8px;

112
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Typography
Text Transform
Utilities for controlling the transformation of text.

uppercase text-transform: uppercase;

lowercase text-transform: lowercase;

capitalize text-transform: capitalize;

normal-case text-transform: none;

Text Overflow
Utilities for controlling text overflow in an element.

truncate overflow: hidden; text-overflow: ellipsis;

white-space: nowrap;

text-ellipsis text-overflow: ellipsis;

text-clip text-overflow: clip;

113
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Typography
Text Indent
Utilities for controlling the amount of empty space shown before text in a block.

indent-0 text-indent: 0;

indent-0.5 text-indent: 0.125rem; 2px

indent-1 text-indent: 0.25rem; 4px

indent-1.5 text-indent: 0.375rem; 6px

indent-2 text-indent: 0.5rem; 8px

indent-2.5 text-indent: 0.625rem; 10px

indent-3 text-indent: 0.75rem; 12px

indent-3.5 text-indent: 0.875rem; 14px

indent-4 text-indent: 1rem; 16px

indent-5 text-indent: 1.25rem; 20px

indent-6 text-indent: 1.5rem; 24px

indent-8 text-indent: 2rem; 32px

indent-10 text-indent: 2.5rem; 40px

indent-11 text-indent: 2.75rem; 44px

indent-12 text-indent: 3rem; 48px

indent-14 text-indent: 3.5rem; 56px

indent-16 text-indent: 4rem; 64px

indent-20 text-indent: 5rem; 80px

indent-24 text-indent: 6rem; 96px

indent-28 text-indent: 7rem; 112px

114
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Typography
indent-32 text-indent: 8rem; 128px

indent-36 text-indent: 9rem; 144px

indent-40 text-indent: 10rem; 160px

indent-44 text-indent: 11rem; 176px

indent-48 text-indent: 12rem; 192px

indent-52 text-indent: 13rem; 208px

indent-56 text-indent: 14rem; 224px

indent-64 text-indent: 16rem; 256px

indent-72 text-indent: 18rem; 288px

indent-80 text-indent: 20rem; 320px

indent-96 text-indent: 24rem; 384px

indent-px text-indent: 1px;

115
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Typography
Vertical Align
Sets the vertical alignment of an inline or table-cell box.

align-baseline vertical-align: baseline;

align-top vertical-align: top;

align-middle vertical-align: middle;

align-bottom vertical-align: bottom;

align-text-top vertical-align: text-top;

align-text-bottom vertical-align: text-bottom;

align-sub vertical-align: sub;

align-super vertical-align: super;

White Space
Sets the whitespace of an element.

whitespace-normal white-space: normal;

whitespace-nowrap white-space: nowrap;

whitespace-pre white-space: pre;

whitespace-pre-line white-space: pre-line;

whitespace-pre-wrap white-space: pre-wrap;

116
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Typography
Word Break
Sets the word breaks of an element.

break-normal overflow-wrap: normal; word-break: normal;

break-words overflow-wrap: break-word;

break-all word-break: break-all;

Content
Utilities for controlling the content of the before and after pseudo-elements.

content-none content: none;

117
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
Interactivity
Appearance
Disables native styling based on the operating system’s theme.

appearance-none appearance: none;

Cursor
Changes the cursor when hovering over an element.

cursor-auto cursor: auto;

cursor-default cursor: default;

cursor-pointer cursor: pointer;

cursor-wait cursor: wait;

cursor-text cursor: text;

cursor-move cursor: move;

cursor-help cursor: help;

cursor-not-allowed cursor: not-allowed;

cursor-none cursor: none;

cursor-context-menu cursor: context-menu;

cursor-progress cursor: progress;

cursor-cell cursor: cell;

cursor-crosshair cursor: crosshair;

118
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
cursor-vertical-text cursor: vertical-text;

cursor-alias cursor: alias;

cursor-copy cursor: copy;

cursor-no-drop cursor: no-drop;

cursor-grab cursor: grab;

cursor-grabbing cursor: grabbing;

cursor-all-scroll cursor: all-scroll;

cursor-col-resize cursor: col-resize;

cursor-row-resize cursor: row-resize;

cursor-n-resize cursor: n-resize;

cursor-e-resize cursor: e-resize;

cursor-s-resize cursor: s-resize;

cursor-w-resize cursor: w-resize;

cursor-ne-resize cursor: ne-resize;

cursor-nw-resize cursor: nw-resize;

cursor-se-resize cursor: se-resize;

cursor-sw-resize cursor: sw-resize;

cursor-ew-resize cursor: ew-resize;

cursor-ns-resize cursor: ns-resize;

cursor-nesw-resize cursor: nesw-resize;

cursor-nwse-resize cursor: nwse-resize;

119
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
cursor-zoom-in cursor: zoom-in;

cursor-zoom-out cursor: zoom-out;

Pointer Events
Specifies whether an element is the target of mouse events.

pointer-events-none pointer-events: none;

pointer-events-auto pointer-events: auto;

Resize
Sets whether an element is resizable, along with direction.

resize-none resize: none;

resize resize: both;

resize-y resize: vertical;

resize-x resize: horizontal;

Scroll Behavior
Utilities for controlling the scroll behavior of an element.

scroll-auto scroll-behavior: auto;

scroll-smooth scroll-behavior: smooth;

120
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
Scroll Margin
Utilities for controlling the scroll offset around items in a snap container.

scroll-m-0 scroll-margin: 0;

scroll-m-0.5 scroll-margin: 0.125rem; 2px

scroll-m-1 scroll-margin: 0.25rem; 4px

scroll-m-1.5 scroll-margin: 0.375rem; 6px

scroll-m-2 scroll-margin: 0.5rem; 8px

scroll-m-2.5 scroll-margin: 0.625rem; 10px

scroll-m-3 scroll-margin: 0.75rem; 12px

scroll-m-3.5 scroll-margin: 0.875rem; 14px

scroll-m-4 scroll-margin: 1rem; 16px

scroll-m-5 scroll-margin: 1.25rem; 20px

scroll-m-6 scroll-margin: 1.5rem; 24px

scroll-m-8 scroll-margin: 2rem; 32px

scroll-m-10 scroll-margin: 2.5rem; 40px

scroll-m-11 scroll-margin: 2.75rem; 44px

scroll-m-12 scroll-margin: 3rem; 48px

scroll-m-14 scroll-margin: 3.5rem; 56px

scroll-m-16 scroll-margin: 4rem; 64px

scroll-m-20 scroll-margin: 5rem; 80px

scroll-m-24 scroll-margin: 6rem; 96px

scroll-m-28 scroll-margin: 7rem; 112px

121
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-m-32 scroll-margin: 8rem; 128px

scroll-m-36 scroll-margin: 9rem; 144px

scroll-m-40 scroll-margin: 10rem; 160px

scroll-m-44 scroll-margin: 11rem; 176px

scroll-m-48 scroll-margin: 12rem; 192px

scroll-m-52 scroll-margin: 13rem; 208px

scroll-m-56 scroll-margin: 14rem; 224px

scroll-m-64 scroll-margin: 16rem; 256px

scroll-m-72 scroll-margin: 18rem; 288px

scroll-m-80 scroll-margin: 20rem; 320px

scroll-m-96 scroll-margin: 24rem; 384px

scroll-m-px scroll-margin: 1px;

scroll-my-0 scroll-margin-top: 0; scroll-margin-bottom: 0;

scroll-mx-0 scroll-margin-left: 0; scroll-margin-right: 0;

scroll-my-0.5 scroll-margin-top: 0.125rem;

scroll-margin-bottom: 0.125rem; 2px

scroll-mx-0.5 scroll-margin-left: 0.125rem;

scroll-margin-right: 0.125rem; 2px

scroll-my-1 scroll-margin-top: 0.25rem;

scroll-margin-bottom: 0.25rem; 4px

scroll-mx-1 scroll-margin-left: 0.25rem;

scroll-margin-right: 0.25rem; 4px

scroll-my-1.5 scroll-margin-top: 0.375rem;

scroll-margin-bottom: 0.375rem; 6px

122
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-mx-1.5 scroll-margin-left: 0.375rem;
scroll-margin-right: 0.375rem; 6px

scroll-my-2 scroll-margin-top: 0.5rem;

scroll-margin-bottom: 0.5rem; 8px

scroll-mx-2 scroll-margin-left: 0.5rem;

scroll-margin-right: 0.5rem; 8px

scroll-my-2.5 scroll-margin-top: 0.625rem;

scroll-margin-bottom: 0.625rem; 10px

scroll-mx-2.5 scroll-margin-left: 0.625rem;

scroll-margin-right: 0.625rem; 10px

scroll-my-3 scroll-margin-top: 0.75rem;

scroll-margin-bottom: 0.75rem; 12px

scroll-mx-3 scroll-margin-left: 0.75rem;

scroll-margin-right: 0.75rem; 12px

scroll-my-3.5 scroll-margin-top: 0.875rem;

scroll-margin-bottom: 0.875rem; 14px

scroll-mx-3.5 scroll-margin-left: 0.875rem;

scroll-margin-right: 0.875rem; 14px

scroll-my-4 scroll-margin-top: 1rem;

scroll-margin-bottom: 1rem; 16px

scroll-mx-4 scroll-margin-left: 1rem;

scroll-margin-right: 1rem; 16px

scroll-my-5 scroll-margin-top: 1.25rem;

scroll-margin-bottom: 1.25rem; 20px

scroll-mx-5 scroll-margin-left: 1.25rem;

scroll-margin-right: 1.25rem; 20px

scroll-my-6 scroll-margin-top: 1.5rem;

scroll-margin-bottom: 1.5rem; 24px

scroll-mx-6 scroll-margin-left: 1.5rem;

scroll-margin-right: 1.5rem; 24px

123
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-my-7 scroll-margin-top: 1.75rem;
scroll-margin-bottom: 1.75rem; 24px

scroll-mx-7 scroll-margin-left: 1.75rem;

scroll-margin-right: 1.75rem; 24px

scroll-my-8 scroll-margin-top: 2rem;

scroll-margin-bottom: 2rem; 32px

scroll-mx-8 scroll-margin-left: 2rem;

scroll-margin-right: 2rem; 32px

scroll-my-9 scroll-margin-top: 2.25rem;

scroll-margin-bottom: 2.25rem; 36px

scroll-mx-9 scroll-margin-left: 2.25rem;

scroll-margin-right: 2.25rem; 36px

scroll-my-10 scroll-margin-top: 2.5rem;

scroll-margin-bottom: 2.5rem; 40px

scroll-mx-10 scroll-margin-left: 2.5rem;

scroll-margin-right: 2.5rem; 40px

scroll-my-11 scroll-margin-top: 2.75rem;

scroll-margin-bottom: 2.75rem; 44px

scroll-mx-11 scroll-margin-left: 2.75rem;

scroll-margin-right: 2.75rem; 44px

scroll-my-12 scroll-margin-top: 3rem;

scroll-margin-bottom: 3rem; 48px

scroll-mx-12 scroll-margin-left: 3rem;

scroll-margin-right: 3rem; 48px

scroll-my-14 scroll-margin-top: 3.5rem;

scroll-margin-bottom: 3.5rem; 56px

scroll-mx-14 scroll-margin-left: 3.5rem;

scroll-margin-right: 3.5rem; 56px

scroll-my-16 scroll-margin-top: 4rem;

scroll-margin-bottom: 4rem; 64px

124
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-mx-16 scroll-margin-left: 4rem;
scroll-margin-right: 4rem; 64px

scroll-my-20 scroll-margin-top: 5rem;

scroll-margin-bottom: 5rem; 80px

scroll-mx-20 scroll-margin-left: 5rem;

scroll-margin-right: 5rem; 80px

scroll-my-24 scroll-margin-top: 6rem;

scroll-margin-bottom: 6rem; 96px

scroll-mx-24 scroll-margin-left: 6rem;

scroll-margin-right: 6rem; 96px

scroll-my-28 scroll-margin-top: 7rem;

scroll-margin-bottom: 7rem; 112px

scroll-mx-28 scroll-margin-left: 7rem;

scroll-margin-right: 7rem; 112px

scroll-my-32 scroll-margin-top: 8rem;

scroll-margin-bottom: 8rem; 128px

scroll-mx-32 scroll-margin-left: 8rem;

scroll-margin-right: 8rem; 128px

scroll-my-36 scroll-margin-top: 9rem;

scroll-margin-bottom: 9rem; 144px

scroll-mx-36 scroll-margin-left: 9rem;

scroll-margin-right: 9rem; 144px

scroll-my-40 scroll-margin-top: 10rem;

scroll-margin-bottom: 10rem; 160px

scroll-mx-40 scroll-margin-left: 10rem;

scroll-margin-right: 10rem; 160px

scroll-my-44 scroll-margin-top: 11rem;

scroll-margin-bottom: 11rem; 176px

scroll-mx-44 scroll-margin-left: 11rem;

scroll-margin-right: 11rem; 176px

125
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-my-48 scroll-margin-top: 12rem;
scroll-margin-bottom: 12rem; 192px

scroll-mx-48 scroll-margin-left: 12rem;

scroll-margin-right: 12rem; 192px

scroll-my-52 scroll-margin-top: 13rem;

scroll-margin-bottom: 13rem; 208px

scroll-mx-52 scroll-margin-left: 13rem;

scroll-margin-right: 13rem; 208px

scroll-my-56 scroll-margin-top: 14rem;

scroll-margin-bottom: 14rem; 224px

scroll-mx-56 scroll-margin-left: 14rem;

scroll-margin-right: 14rem; 224px

scroll-my-60 scroll-margin-top: 15rem;

scroll-margin-bottom: 15rem; 240px

scroll-mx-60 scroll-margin-left: 15rem;

scroll-margin-right: 15rem; 240px

scroll-my-64 scroll-margin-top: 16rem;

scroll-margin-bottom: 16rem; 256px

scroll-mx-64 scroll-margin-left: 16rem;

scroll-margin-right: 16rem; 256px

scroll-my-70 scroll-margin-top: 18rem;

scroll-margin-bottom: 18rem; 280px

scroll-mx-70 scroll-margin-left: 18rem;

scroll-margin-right: 18rem; 280px

scroll-my-80 scroll-margin-top: 20rem;

scroll-margin-bottom: 20rem; 320px

scroll-mx-80 scroll-margin-left: 20rem;

scroll-margin-right: 20rem; 320px

scroll-my-96 scroll-margin-top: 24rem;

scroll-margin-bottom: 24rem; 384px

126
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-mx-96 scroll-margin-left: 24rem;
scroll-margin-right: 24rem; 384px

scroll-my-px scroll-margin-top: 1px;

scroll-margin-bottom: 1px;

scroll-mx-px scroll-margin-left: 1px; scroll-margin-right: 1px;

scroll-mt-0 scroll-margin-top: 0;

scroll-mr-0 scroll-margin-right: 0;

scroll-mb-0 scroll-margin-bottom: 0;

scroll-ml-0 scroll-margin-left: 0;

scroll-mt-0.5 scroll-margin-top: 0.125rem; 2px

scroll-mr-0.5 scroll-margin-right: 0.125rem; 2px

scroll-mb-0.5 scroll-margin-bottom: 0.125rem; 2px

scroll-ml-0.5 scroll-margin-left: 0.125rem; 2px

scroll-mt-1 scroll-margin-top: 0.25rem; 4px

scroll-mr-1 scroll-margin-right: 0.25rem; 4px

scroll-mb-1 scroll-margin-bottom: 0.25rem; 4px

scroll-ml-1 scroll-margin-left: 0.25rem; 4px

scroll-mt-1.5 scroll-margin-top: 0.375rem; 6px

scroll-mr-1.5 scroll-margin-right: 0.375rem; 6px

scroll-mb-1.5 scroll-margin-bottom: 0.375rem; 6px

scroll-ml-1.5 scroll-margin-left: 0.375rem; 6px

scroll-mt-2 scroll-margin-top: 0.5rem; 8px

scroll-mr-2 scroll-margin-right: 0.5rem; 8px

127
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-mb-2 scroll-margin-bottom: 0.5rem; 8px

scroll-ml-2 scroll-margin-left: 0.5rem; 8px

scroll-mt-2.5 scroll-margin-top: 0.625rem; 10px

scroll-mr-2.5 scroll-margin-right: 0.625rem; 10px

scroll-mb-2.5 scroll-margin-bottom: 0.625rem; 10px

scroll-ml-2.5 scroll-margin-left: 0.625rem; 10px

scroll-mt-3 scroll-margin-top: 0.75rem; 12px

scroll-mr-3 scroll-margin-right: 0.75rem; 12px

scroll-mb-3 scroll-margin-bottom: 0.75rem; 12px

scroll-ml-3 scroll-margin-left: 0.75rem; 12px

scroll-mt-3.5 scroll-margin-top: 0.875rem; 14px

scroll-mr-3.5 scroll-margin-right: 0.875rem; 14px

scroll-mb-3.5 scroll-margin-bottom: 0.875rem; 14px

scroll-ml-3.5 scroll-margin-left: 0.875rem; 14px

scroll-mt-4 scroll-margin-top: 1rem; 16px

scroll-mr-4 scroll-margin-right: 1rem; 16px

scroll-mb-4 scroll-margin-bottom: 1rem; 16px

scroll-ml-4 scroll-margin-left: 1rem; 16px

scroll-mt-5 scroll-margin-top: 1.25rem; 20px

scroll-mr-5 scroll-margin-right: 1.25rem; 20px

scroll-mb-5 scroll-margin-bottom: 1.25rem; 20px

scroll-ml-5 scroll-margin-left: 1.25rem; 20px

128
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-mt-6 scroll-margin-top: 1.5rem; 24px

scroll-mr-6 scroll-margin-right: 1.5rem; 24px

scroll-mb-6 scroll-margin-bottom: 1.5rem; 24px

scroll-ml-6 scroll-margin-left: 1.5rem; 24px

scroll-mt-7 scroll-margin-top: 1.75rem; 28px

scroll-mr-7 scroll-margin-right: 1.75rem; 28px

scroll-mb-7 scroll-margin-bottom: 1.75rem; 28px

scroll-ml-7 scroll-margin-left: 1.75rem; 28px

scroll-mt-8 scroll-margin-top: 2rem; 32px

scroll-mr-8 scroll-margin-right: 2rem; 32px

scroll-mb-8 scroll-margin-bottom: 2rem; 32px

scroll-ml-8 scroll-margin-left: 2rem; 32px

scroll-mt-9 scroll-margin-top: 2.25rem; 36px

scroll-mr-9 scroll-margin-right: 2.25rem; 36px

scroll-mb-9 scroll-margin-bottom: 2.25rem; 36px

scroll-ml-9 scroll-margin-left: 2.25rem; 36px

scroll-mt-10 scroll-margin-top: 2.5rem; 40px

scroll-mr-10 scroll-margin-right: 2.5rem; 40px

scroll-mb-10 scroll-margin-bottom: 2.5rem; 40px

scroll-ml-10 scroll-margin-left: 2.5rem; 40px

scroll-mt-11 scroll-margin-top: 2.75rem; 44px

scroll-mr-11 scroll-margin-right: 2.75rem; 44px

129
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-mb-11 scroll-margin-bottom: 2.75rem; 44px

scroll-ml-11 scroll-margin-left: 2.75rem; 44px

scroll-mt-12 scroll-margin-top: 3rem; 48px

scroll-mr-12 scroll-margin-right: 3rem; 48px

scroll-mb-12 scroll-margin-bottom: 3rem; 48px

scroll-ml-12 scroll-margin-left: 3rem; 48px

scroll-mt-14 scroll-margin-top: 3.5rem; 56px

scroll-mr-14 scroll-margin-right: 3.5rem; 56px

scroll-mb-14 scroll-margin-bottom: 3.5rem; 56px

scroll-ml-14 scroll-margin-left: 3.5rem; 56px

scroll-mt-16 scroll-margin-top: 4rem; 64px

scroll-mr-16 scroll-margin-right: 4rem; 64px

scroll-mb-16 scroll-margin-bottom: 4rem; 64px

scroll-ml-16 scroll-margin-left: 4rem; 64px

scroll-mt-20 scroll-margin-top: 5rem; 80px

scroll-mr-20 scroll-margin-right: 5rem; 80px

scroll-mb-20 scroll-margin-bottom: 5rem; 80px

scroll-ml-20 scroll-margin-left: 5rem; 80px

scroll-mt-24 scroll-margin-top: 6rem; 96px

scroll-mr-24 scroll-margin-right: 6rem; 96px

scroll-mb-24 scroll-margin-bottom: 6rem; 96px

scroll-ml-24 scroll-margin-left: 6rem; 96px

130
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-mt-28 scroll-margin-top: 7rem; 112px

scroll-mr-28 scroll-margin-right: 7rem; 112px

scroll-mb-28 scroll-margin-bottom: 7rem; 112px

scroll-ml-28 scroll-margin-left: 7rem; 112px

scroll-mt-32 scroll-margin-top: 8rem; 128px

scroll-mr-32 scroll-margin-right: 8rem; 128px

scroll-mb-32 scroll-margin-bottom: 8rem; 128px

scroll-ml-32 scroll-margin-left: 8rem; 128px

scroll-mt-36 scroll-margin-top: 9rem; 144px

scroll-mr-36 scroll-margin-right: 9rem; 144px

scroll-mb-36 scroll-margin-bottom: 9rem; 144px

scroll-ml-36 scroll-margin-left: 9rem; 144px

scroll-mt-40 scroll-margin-top: 10rem; 160px

scroll-mr-40 scroll-margin-right: 10rem; 160px

scroll-mb-40 scroll-margin-bottom: 10rem; 160px

scroll-ml-40 scroll-margin-left: 10rem; 160px

scroll-mt-44 scroll-margin-top: 11rem; 176px

scroll-mr-44 scroll-margin-right: 11rem; 176px

scroll-mb-44 scroll-margin-bottom: 11rem; 176px

scroll-ml-44 scroll-margin-left: 11rem; 176px

scroll-mt-48 scroll-margin-top: 12rem; 192px

scroll-mr-48 scroll-margin-right: 12rem; 192px

131
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-mb-48 scroll-margin-bottom: 12rem; 192px

scroll-ml-48 scroll-margin-left: 12rem; 192px

scroll-mt-52 scroll-margin-top: 13rem; 208px

scroll-mr-52 scroll-margin-right: 13rem; 208px

scroll-mb-52 scroll-margin-bottom: 13rem; 208px

scroll-ml-52 scroll-margin-left: 13rem; 208px

scroll-mt-56 scroll-margin-top: 14rem; 224px

scroll-mr-56 scroll-margin-right: 14rem; 224px

scroll-mb-56 scroll-margin-bottom: 14rem; 224px

scroll-ml-56 scroll-margin-left: 14rem; 224px

scroll-mt-60 scroll-margin-top: 15rem; 240px

scroll-mr-60 scroll-margin-right: 15rem; 240px

scroll-mb-60 scroll-margin-bottom: 15rem; 240px

scroll-ml-60 scroll-margin-left: 15rem; 240px

scroll-mt-64 scroll-margin-top: 16rem; 256px

scroll-mr-64 scroll-margin-right: 16rem; 256px

scroll-mb-64 scroll-margin-bottom: 16rem; 256px

scroll-ml-64 scroll-margin-left: 16rem; 256px

scroll-mt-72 scroll-margin-top: 18rem; 288px

scroll-mr-72 scroll-margin-right: 18rem; 288px

scroll-mb-72 scroll-margin-bottom: 18rem; 288px

scroll-ml-72 scroll-margin-left: 18rem; 288px

132
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-mt-80 scroll-margin-top: 20rem; 320px

scroll-mr-80 scroll-margin-right: 20rem; 320px

scroll-mb-80 scroll-margin-bottom: 20rem; 320px

scroll-ml-80 scroll-margin-left: 20rem; 320px

scroll-mt-96 scroll-margin-top: 24rem; 384px

scroll-mr-96 scroll-margin-right: 24rem; 384px

scroll-mb-96 scroll-margin-bottom: 24rem; 384px

scroll-ml-96 scroll-margin-left: 24rem; 384px

scroll-mt-px scroll-margin-top: 1px;

scroll-mr-px scroll-margin-right: 1px;

scroll-mb-px scroll-margin-bottom: 1px;

scroll-ml-px scroll-margin-left: 1px;

133
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
Scroll Padding
Utilities for controlling an element’s scroll offset within a snap container.

scroll-p-0 scroll-padding: 0;

scroll-p-0.5 scroll-padding: 0.125rem; 2px

scroll-p-1 scroll-padding: 0.25rem; 4px

scroll-p-1.5 scroll-padding: 0.375rem; 6px

scroll-p-2 scroll-padding: 0.5rem; 8px

scroll-p-2.5 scroll-padding: 0.625rem; 10px

scroll-p-3 scroll-padding: 0.75rem; 12px

scroll-p-3.5 scroll-padding: 0.875rem; 14px

scroll-p-4 scroll-padding: 1rem; 16px

scroll-p-5 scroll-padding: 1.25rem; 20px

scroll-p-6 scroll-padding: 1.5rem; 24px

scroll-p-8 scroll-padding: 2rem; 32px

scroll-p-10 scroll-padding: 2.5rem; 40px

scroll-p-11 scroll-padding: 2.75rem; 44px

scroll-p-12 scroll-padding: 3rem; 48px

scroll-p-14 scroll-padding: 3.5rem; 56px

scroll-p-16 scroll-padding: 4rem; 64px

scroll-p-20 scroll-padding: 5rem; 80px

scroll-p-24 scroll-padding: 6rem; 96px

scroll-p-28 scroll-padding: 7rem; 112px

134
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-p-32 scroll-padding: 8rem; 128px

scroll-p-36 scroll-padding: 9rem; 144px

scroll-p-40 scroll-padding: 10rem; 160px

scroll-p-44 scroll-padding: 11rem; 176px

scroll-p-48 scroll-padding: 12rem; 192px

scroll-p-52 scroll-padding: 13rem; 208px

scroll-p-56 scroll-padding: 14rem; 224px

scroll-p-64 scroll-padding: 16rem; 256px

scroll-p-72 scroll-padding: 18rem; 288px

scroll-p-80 scroll-padding: 20rem; 320px

scroll-p-96 scroll-padding: 24rem; 384px

scroll-p-px scroll-padding: 1px;

scroll-py-0 scroll-padding-top: 0;
scroll-padding-bottom: 0;

scroll-px-0 scroll-padding-left: 0;
scroll-padding-right: 0;

scroll-py-0.5 scroll-padding-top: 0.125rem;

scroll-padding-bottom: 0.125rem; 2px

scroll-px-0.5 scroll-padding-left: 0.125rem;

scroll-padding-right: 0.125rem; 2px

scroll-py-1 scroll-padding-top: 0.25rem;

scroll-padding-bottom: 0.25rem; 4px

scroll-px-1 scroll-padding-left: 0.25rem;

scroll-padding-right: 0.25rem; 4px

scroll-py-1.5 scroll-padding-top: 0.375rem;

scroll-padding-bottom: 0.375rem; 6px

135
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-px-1.5 scroll-padding-left: 0.375rem;
scroll-padding-right: 0.375rem; 6px

scroll-py-2 scroll-padding-top: 0.5rem;

scroll-padding-bottom: 0.5rem; 8px

scroll-px-2 scroll-padding-left: 0.5rem;

scroll-padding-right: 0.5rem; 8px

scroll-py-2.5 scroll-padding-top: 0.625rem;

scroll-padding-bottom: 0.625rem; 10px

scroll-px-2.5 scroll-padding-left: 0.625rem;

scroll-padding-right: 0.625rem; 10px

scroll-py-3 scroll-padding-top: 0.75rem;

scroll-padding-bottom: 0.75rem; 12px

scroll-px-3 scroll-padding-left: 0.75rem;

scroll-padding-right: 0.75rem; 12px

scroll-py-3.5 scroll-padding-top: 0.875rem;

scroll-padding-bottom: 0.875rem; 14px

scroll-px-3.5 scroll-padding-left: 0.875rem;

scroll-padding-right: 0.875rem; 14px

scroll-py-4 scroll-padding-top: 1rem;

scroll-padding-bottom: 1rem; 16px

scroll-px-4 scroll-padding-left: 1rem;

scroll-padding-right: 1rem; 16px

scroll-py-5 scroll-padding-top: 1.25rem;

scroll-padding-bottom: 1.25rem; 20px

scroll-px-5 scroll-padding-left: 1.25rem;

scroll-padding-right: 1.25rem; 20px

scroll-py-6 scroll-padding-top: 1.5rem;

scroll-padding-bottom: 1.5rem; 24px

scroll-px-6 scroll-padding-left: 1.5rem;

scroll-padding-right: 1.5rem; 24px

136
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-py-7 scroll-padding-top: 1.75rem;
scroll-padding-bottom: 1.75rem; 24px

scroll-px-7 scroll-padding-left: 1.75rem;

scroll-padding-right: 1.75rem; 24px

scroll-py-8 scroll-padding-top: 2rem;

scroll-padding-bottom: 2rem; 32px

scroll-px-8 scroll-padding-left: 2rem;

scroll-padding-right: 2rem; 32px

scroll-py-9 scroll-padding-top: 2.25rem;

scroll-padding-bottom: 2.25rem; 36px

scroll-px-9 scroll-padding-left: 2.25rem;

scroll-padding-right: 2.25rem; 36px

scroll-py-10 scroll-padding-top: 2.5rem;

scroll-padding-bottom: 2.5rem; 40px

scroll-px-10 scroll-padding-left: 2.5rem;

scroll-padding-right: 2.5rem; 40px

scroll-py-11 scroll-padding-top: 2.75rem;

scroll-padding-bottom: 2.75rem; 44px

scroll-px-11 scroll-padding-left: 2.75rem;

scroll-padding-right: 2.75rem; 44px

scroll-py-12 scroll-padding-top: 3rem;

scroll-padding-bottom: 3rem; 48px

scroll-px-12 scroll-padding-left: 3rem;

scroll-padding-right: 3rem; 48px

scroll-py-14 scroll-padding-top: 3.5rem;

scroll-padding-bottom: 3.5rem; 56px

scroll-px-14 scroll-padding-left: 3.5rem;

scroll-padding-right: 3.5rem; 56px

scroll-py-16 scroll-padding-top: 4rem;

scroll-padding-bottom: 4rem; 64px

137
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-px-16 scroll-padding-left: 4rem;
scroll-padding-right: 4rem; 64px

scroll-py-20 scroll-padding-top: 5rem;

scroll-padding-bottom: 5rem; 80px

scroll-px-20 scroll-padding-left: 5rem;

scroll-padding-right: 5rem; 80px

scroll-py-24 scroll-padding-top: 6rem;

scroll-padding-bottom: 6rem; 96px

scroll-px-24 scroll-padding-left: 6rem;

scroll-padding-right: 6rem; 96px

scroll-py-28 scroll-padding-top: 7rem;

scroll-padding-bottom: 7rem; 112px

scroll-px-28 scroll-padding-left: 7rem;

scroll-padding-right: 7rem; 112px

scroll-py-32 scroll-padding-top: 8rem;

scroll-padding-bottom: 8rem; 128px

scroll-px-32 scroll-padding-left: 8rem;

scroll-padding-right: 8rem; 128px

scroll-py-36 scroll-padding-top: 9rem;

scroll-padding-bottom: 9rem; 144px

scroll-px-36 scroll-padding-left: 9rem;

scroll-padding-right: 9rem; 144px

scroll-py-40 scroll-padding-top: 10rem;

scroll-padding-bottom: 10rem; 160px

scroll-px-40 scroll-padding-left: 10rem;

scroll-padding-right: 10rem; 160px

scroll-py-44 scroll-padding-top: 11rem;

scroll-padding-bottom: 11rem; 176px

scroll-px-44 scroll-padding-left: 11rem;

scroll-padding-right: 11rem; 176px

138
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-py-48 scroll-padding-top: 12rem;
scroll-padding-bottom: 12rem; 192px

scroll-px-48 scroll-padding-left: 12rem;

scroll-padding-right: 12rem; 192px

scroll-py-52 scroll-padding-top: 13rem;

scroll-padding-bottom: 13rem; 208px

scroll-px-52 scroll-padding-left: 13rem;

scroll-padding-right: 13rem; 208px

scroll-py-56 scroll-padding-top: 14rem;

scroll-padding-bottom: 14rem; 224px

scroll-px-56 scroll-padding-left: 14rem;

scroll-padding-right: 14rem; 224px

scroll-py-60 scroll-padding-top: 15rem;

scroll-padding-bottom: 15rem; 240px

scroll-px-60 scroll-padding-left: 15rem;

scroll-padding-right: 15rem; 240px

scroll-py-64 scroll-padding-top: 16rem;

scroll-padding-bottom: 16rem; 256px

scroll-px-64 scroll-padding-left: 16rem;

scroll-padding-right: 16rem; 256px

scroll-py-70 scroll-padding-top: 18rem;

scroll-padding-bottom: 18rem; 280px

scroll-px-70 scroll-padding-left: 18rem;

scroll-padding-right: 18rem; 280px

scroll-py-80 scroll-padding-top: 20rem;

scroll-padding-bottom: 20rem; 320px

scroll-px-80 scroll-padding-left: 20rem;

scroll-padding-right: 20rem; 320px

scroll-py-96 scroll-padding-top: 24rem;

scroll-padding-bottom: 24rem; 384px

139
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-px-96 scroll-padding-left: 24rem;
scroll-padding-right: 24rem; 384px

scroll-py-px scroll-padding-top: 1px;

scroll-padding-bottom: 1px;

scroll-px-px scroll-padding-left: 1px;

scroll-padding-right: 1px;

scroll-pt-0 scroll-padding-top: 0;

scroll-pr-0 scroll-padding-right: 0;

scroll-pb-0 scroll-padding-bottom: 0;

scroll-pl-0 scroll-padding-left: 0;

scroll-pt-0.5 scroll-padding-top: 0.125rem; 2px

scroll-pr-0.5 scroll-padding-right: 0.125rem; 2px

scroll-pb-0.5 scroll-padding-bottom: 0.125rem; 2px

scroll-pl-0.5 scroll-padding-left: 0.125rem; 2px

scroll-pt-1 scroll-padding-top: 0.25rem; 4px

scroll-pr-1 scroll-padding-right: 0.25rem; 4px

scroll-pb-1 scroll-padding-bottom: 0.25rem; 4px

scroll-pl-1 scroll-padding-left: 0.25rem; 4px

scroll-pt-1.5 scroll-padding-top: 0.375rem; 6px

scroll-pr-1.5 scroll-padding-right: 0.375rem; 6px

scroll-pb-1.5 scroll-padding-bottom: 0.375rem; 6px

scroll-pl-1.5 scroll-padding-left: 0.375rem; 6px

scroll-pt-2 scroll-padding-top: 0.5rem; 8px

140
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-pr-2 scroll-padding-right: 0.5rem; 8px

scroll-pb-2 scroll-padding-bottom: 0.5rem; 8px

scroll-pl-2 scroll-padding-left: 0.5rem; 8px

scroll-pt-2.5 scroll-padding-top: 0.625rem; 10px

scroll-pr-2.5 scroll-padding-right: 0.625rem; 10px

scroll-pb-2.5 scroll-padding-bottom: 0.625rem; 10px

scroll-pl-2.5 scroll-padding-left: 0.625rem; 10px

scroll-pt-3 scroll-padding-top: 0.75rem; 12px

scroll-pr-3 scroll-padding-right: 0.75rem; 12px

scroll-pb-3 scroll-padding-bottom: 0.75rem; 12px

scroll-pl-3 scroll-padding-left: 0.75rem; 12px

scroll-pt-3.5 scroll-padding-top: 0.875rem; 14px

scroll-pr-3.5 scroll-padding-right: 0.875rem; 14px

scroll-pb-3.5 scroll-padding-bottom: 0.875rem; 14px

scroll-pl-3.5 scroll-padding-left: 0.875rem; 14px

scroll-pt-4 scroll-padding-top: 1rem; 16px

scroll-pr-4 scroll-padding-right: 1rem; 16px

scroll-pb-4 scroll-padding-bottom: 1rem; 16px

scroll-pl-4 scroll-padding-left: 1rem; 16px

scroll-pt-5 scroll-padding-top: 1.25rem; 20px

scroll-pr-5 scroll-padding-right: 1.25rem; 20px

scroll-pb-5 scroll-padding-bottom: 1.25rem; 20px

141
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-pl-5 scroll-padding-left: 1.25rem; 20px

scroll-pt-6 scroll-padding-top: 1.5rem; 24px

scroll-pr-6 scroll-padding-right: 1.5rem; 24px

scroll-pb-6 scroll-padding-bottom: 1.5rem; 24px

scroll-pl-6 scroll-padding-left: 1.5rem; 24px

scroll-pt-7 scroll-padding-top: 1.75rem; 28px

scroll-pr-7 scroll-padding-right: 1.75rem; 28px

scroll-pb-7 scroll-padding-bottom: 1.75rem; 28px

scroll-pl-7 scroll-padding-left: 1.75rem; 28px

scroll-pt-8 scroll-padding-top: 2rem; 32px

scroll-pr-8 scroll-padding-right: 2rem; 32px

scroll-pb-8 scroll-padding-bottom: 2rem; 32px

scroll-pl-8 scroll-padding-left: 2rem; 32px

scroll-pt-9 scroll-padding-top: 2.25rem; 36px

scroll-pr-9 scroll-padding-right: 2.25rem; 36px

scroll-pb-9 scroll-padding-bottom: 2.25rem; 36px

scroll-pl-9 scroll-padding-left: 2.25rem; 36px

scroll-pt-10 scroll-padding-top: 2.5rem; 40px

scroll-pr-10 scroll-padding-right: 2.5rem; 40px

scroll-pb-10 scroll-padding-bottom: 2.5rem; 40px

scroll-pl-10 scroll-padding-left: 2.5rem; 40px

scroll-pt-11 scroll-padding-top: 2.75rem; 44px

142
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-pr-11 scroll-padding-right: 2.75rem; 44px

scroll-pb-11 scroll-padding-bottom: 2.75rem; 44px

scroll-pl-11 scroll-padding-left: 2.75rem; 44px

scroll-pt-12 scroll-padding-top: 3rem; 48px

scroll-pr-12 scroll-padding-right: 3rem; 48px

scroll-pb-12 scroll-padding-bottom: 3rem; 48px

scroll-pl-12 scroll-padding-left: 3rem; 48px

scroll-pt-14 scroll-padding-top: 3.5rem; 56px

scroll-pr-14 scroll-padding-right: 3.5rem; 56px

scroll-pb-14 scroll-padding-bottom: 3.5rem; 56px

scroll-pl-14 scroll-padding-left: 3.5rem; 56px

scroll-pt-16 scroll-padding-top: 4rem; 64px

scroll-pr-16 scroll-padding-right: 4rem; 64px

scroll-pb-16 scroll-padding-bottom: 4rem; 64px

scroll-pl-16 scroll-padding-left: 4rem; 64px

scroll-pt-20 scroll-padding-top: 5rem; 80px

scroll-pr-20 scroll-padding-right: 5rem; 80px

scroll-pb-20 scroll-padding-bottom: 5rem; 80px

scroll-pl-20 scroll-padding-left: 5rem; 80px

scroll-pt-24 scroll-padding-top: 6rem; 96px

scroll-pr-24 scroll-padding-right: 6rem; 96px

scroll-pb-24 scroll-padding-bottom: 6rem; 96px

143
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-pl-24 scroll-padding-left: 6rem; 96px

scroll-pt-28 scroll-padding-top: 7rem; 112px

scroll-pr-28 scroll-padding-right: 7rem; 112px

scroll-pb-28 scroll-padding-bottom: 7rem; 112px

scroll-pl-28 scroll-padding-left: 7rem; 112px

scroll-pt-32 scroll-padding-top: 8rem; 128px

scroll-pr-32 scroll-padding-right: 8rem; 128px

scroll-pb-32 scroll-padding-bottom: 8rem; 128px

scroll-pl-32 scroll-padding-left: 8rem; 128px

scroll-pt-36 scroll-padding-top: 9rem; 144px

scroll-pr-36 scroll-padding-right: 9rem; 144px

scroll-pb-36 scroll-padding-bottom: 9rem; 144px

scroll-pl-36 scroll-padding-left: 9rem; 144px

scroll-pt-40 scroll-padding-top: 10rem; 160px

scroll-pr-40 scroll-padding-right: 10rem; 160px

scroll-pb-40 scroll-padding-bottom: 10rem; 160px

scroll-pl-40 scroll-padding-left: 10rem; 160px

scroll-pt-44 scroll-padding-top: 11rem; 176px

scroll-pr-44 scroll-padding-right: 11rem; 176px

scroll-pb-44 scroll-padding-bottom: 11rem; 176px

scroll-pl-44 scroll-padding-left: 11rem; 176px

scroll-pt-48 scroll-padding-top: 12rem; 192px

144
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-pr-48 scroll-padding-right: 12rem; 192px

scroll-pb-48 scroll-padding-bottom: 12rem; 192px

scroll-pl-48 scroll-padding-left: 12rem; 192px

scroll-pt-52 scroll-padding-top: 13rem; 208px

scroll-pr-52 scroll-padding-right: 13rem; 208px

scroll-pb-52 scroll-padding-bottom: 13rem; 208px

scroll-pl-52 scroll-padding-left: 13rem; 208px

scroll-pt-56 scroll-padding-top: 14rem; 224px

scroll-pr-56 scroll-padding-right: 14rem; 224px

scroll-pb-56 scroll-padding-bottom: 14rem; 224px

scroll-pl-56 scroll-padding-left: 14rem; 224px

scroll-pt-60 scroll-padding-top: 15rem; 240px

scroll-pr-60 scroll-padding-right: 15rem; 240px

scroll-pb-60 scroll-padding-bottom: 15rem; 240px

scroll-pl-60 scroll-padding-left: 15rem; 240px

scroll-pt-64 scroll-padding-top: 16rem; 256px

scroll-pr-64 scroll-padding-right: 16rem; 256px

scroll-pb-64 scroll-padding-bottom: 16rem; 256px

scroll-pl-64 scroll-padding-left: 16rem; 256px

scroll-pt-72 scroll-padding-top: 18rem; 288px

scroll-pr-72 scroll-padding-right: 18rem; 288px

scroll-pb-72 scroll-padding-bottom: 18rem; 288px

145
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
scroll-pl-72 scroll-padding-left: 18rem; 288px

scroll-pt-80 scroll-padding-top: 20rem; 320px

scroll-pr-80 scroll-padding-right: 20rem; 320px

scroll-pb-80 scroll-padding-bottom: 20rem; 320px

scroll-pl-80 scroll-padding-left: 20rem; 320px

scroll-pt-96 scroll-padding-top: 24rem; 384px

scroll-pr-96 scroll-padding-right: 24rem; 384px

scroll-pb-96 scroll-padding-bottom: 24rem; 384px

scroll-pl-96 scroll-padding-left: 24rem; 384px

scroll-pt-px scroll-padding-top: 1px;

scroll-pr-px scroll-padding-right: 1px;

scroll-pb-px scroll-padding-bottom: 1px;

scroll-pl-px scroll-padding-left: 1px;

146
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
Scroll Snap Align
Utilities for controlling the scroll snap alignment of an element.

snap-start scroll-snap-align: start;

snap-end scroll-snap-align: end;

snap-center scroll-snap-align: center;

snap-align-none scroll-snap-align: align-none;

Scroll Snap Stop

Utilities for controlling whether you can skip past possible snap positions..

snap-normal scroll-snap-stop: normal;

snap-always scroll-snap-stop: always;

Scroll Snap Type

Utilities for controlling how strictly snap points are enforced in a snap container.

snap-none scroll-snap-type: none;

snap-x scroll-snap-type: x var

(--tw-scroll-snap-strictness);

snap-y scroll-snap-type: y var

(--tw-scroll-snap-strictness);

snap-both scroll-snap-type: both var

(--tw-scroll-snap-strictness);

snap-mandatory --tw-scroll-snap-strictness: mandatory;

snap-proximity --tw-scroll-snap-strictness: proximity;

147
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
Touch Action
Utilities for controlling how an element can be scrolled and zoomed on touchscreens.

touch-auto touch-action: auto;

touch-none touch-action: none;

touch-pan-x touch-action: pan-x;

touch-pan-left touch-action: pan-left;

touch-pan-right touch-action: pan-right;

touch-pan-y touch-action: pan-y;

touch-pan-up touch-action: pan-up;

touch-pan-down touch-action: pan-down;

touch-pinch-zoom touch-action: pinch-zoom;

touch-manipulation touch-action: manipulation;

User Select
Controls whether the user can select text.

select-none user-select: none;

select-text user-select: text;

select-all user-select: all;

select-auto user-select: auto;

148
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Interactivity
Will Change
Utilities for optimizing upcoming animations of elements that are expected to change.

will-change-auto will-change: auto;

will-change-scroll will-change: scroll-position;

will-change-contents will-change: contents;

will-change-transform will-change: transform;

149
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Filters
Filters
Blur
Utilities for applying blur filters to an element.

blur-none blur: blur(0);

blur-sm blur: blur(4px);

blur blur: blur(8px);

blur-md blur: blur(12px);

blur-lg blur: blur(16px);

blur-xl blur: blur(24px);

blur-2xl blur: blur(40px);

blur-3xl blur: blur(64px);

150
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Filters
Brightness
Utilities for applying brightness filters to an element.

brightness-0 brightness: brightness(0);

brightness-50 brightness: brightness(.5);

brightness-75 brightness: brightness(.75);

brightness-90 brightness: brightness(.9);

brightness-95 brightness: brightness(.95);

brightness-100 brightness: brightness(1);

brightness-105 brightness: brightness(1.05);

brightness-110 brightness: brightness(1.1);

brightness-125 brightness: brightness(1.25);

brightness-150 brightness: brightness(1.5);

brightness-200 brightness: brightness(2);

151
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Filters
Contrast
Utilities for applying contrast filters to an element.

contrast-0 contrast: contrast(0);

contrast-50 contrast: contrast(.5);

contrast-75 contrast: contrast(.75);

contrast-100 contrast: contrast(1);

contrast-125 contrast: contrast(1.25);

contrast-150 contrast: contrast(1.5);

contrast-200 contrast: contrast(2);

Drop Shadow
Utilities for applying drop-shadow filters to an element.

drop-shadow-sm drop-shadow: drop-shadow

(0 1px 1px rgba(0,0,0,0.05));

drop-shadow drop-shadow: drop-shadow

(0 1px 2px rgba(0, 0, 0, 0.1))
drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));

drop-shadow-md drop-shadow: drop-shadow

(0 4px 3px rgba(0, 0, 0, 0.07))
drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));

drop-shadow-lg drop-shadow: drop-shadow

(0 10px 8px rgba(0, 0, 0, 0.04))
drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));

drop-shadow-xl drop-shadow: drop-shadow

(0 20px 13px rgba(0, 0, 0, 0.03))
drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));

152
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Filters
drop-shadow-2xl drop-shadow: drop-shadow: drop-shadow
(0 25px 25px rgba(0, 0, 0, 0.15));

drop-shadow-none drop-shadow: drop-shadow: drop-shadow

(0 0 #0000);

Grayscale
Utilities for applying grayscale filters to an element.

grayscale-0 grayscale: grayscale(0);

grayscale grayscale: grayscale(1);

Hue Rotate
Utilities for applying hue-rotate filters to an element.

hue-rotate-0 hue-rotate: hue-rotate(0deg);

hue-rotate-15 hue-rotate: hue-rotate(15deg);

hue-rotate-30 hue-rotate: hue-rotate(30deg);

hue-rotate-60 hue-rotate: hue-rotate(60deg);

hue-rotate-90 hue-rotate: hue-rotate(90deg);

hue-rotate-180 hue-rotate: hue-rotate(180deg);

153
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Filters
Invert
Utilities for applying invert filters to an element.

invert-0 invert: invert(0);

invert invert: invert(1);

Saturate
Utilities for applying saturation filters to an element.

saturate-0 saturate: saturate(0);

saturate-50 saturate: saturate(.5);

saturate-100 saturate: saturate(1);

saturate-150 saturate: saturate(1.50);

saturate-200 saturate: saturate(2);

Sepia
Utilities for applying sepia filters to an element.

sepia-0 sepia: sepia(0);

sepia sepia: sepia(1);

154
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Filters
Backdrop Blur
Utilities for applying backdrop blur filters to an element.

backdrop-blur-none backdrop-blur: blur(0);

backdrop-blur-sm backdrop-blur: blur(4px);

backdrop-blur backdrop-blur: blur(8px);

backdrop-blur-md backdrop-blur: blur(12px);

backdrop-blur-lg backdrop-blur: blur(16px);

backdrop-blur-xl backdrop-blur: blur(24px);

backdrop-blur-2xl backdrop-blur: blur(40px);

backdrop-blur-3xl backdrop-blur: blur(64px);

Backdrop Brightness
Utilities for applying Backdrop Brightness filters to an element.

backdrop-brightness-0 backdrop-brightness: brightness(0);

backdrop-brightness-sm backdrop-brightness: brightness(4px);

backdrop-brightness backdrop-brightness: brightness(8px);

backdrop-brightness-md backdrop-brightness: brightness(12px);

backdrop-brightness-lg backdrop-brightness: brightness(16px);

backdrop-brightness-xl backdrop-brightness: brightness(24px);

backdrop-brightness-2xl backdrop-brightness: brightness(40px);

backdrop-brightness-3xl backdrop-brightness: brightness(64px);

155
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Filters
Backdrop Contrast
Utilities for applying backdrop contrast filters to an element.

backdrop-contrast-0 backdrop-contrast: contrast(0);

backdrop-contrast-50 backdrop-contrast: contrast(.5);

backdrop-contrast-75 backdrop-contrast: contrast(.75);

backdrop-contrast-100 backdrop-contrast: contrast(1);

backdrop-contrast-125 backdrop-contrast: contrast(1.25);

backdrop-contrast-150 backdrop-contrast: contrast(1.5);

backdrop-contrast-200 backdrop-contrast: contrast(2);

Backdrop Grayscale
Utilities for applying backdrop grayscale filters to an element.

backdrop-grayscale-0 backdrop-grayscale: grayscale(0);

backdrop-grayscale backdrop-grayscale: grayscale(1);

156
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Filters
Backdrop Hue Rotate
Utilities for applying backdrop hue-rotate filters to an element.

backdrop-hue-rotate-0 backdrop-hue-rotate: hue-rotate(0deg);

backdrop-hue-rotate-15 backdrop-hue-rotate: hue-rotate(15deg);

backdrop-hue-rotate-30 backdrop-hue-rotate: hue-rotate(30deg);

backdrop-hue-rotate-60 backdrop-hue-rotate: hue-rotate(60deg);

backdrop-hue-rotate-90 backdrop-hue-rotate: hue-rotate(90deg);

backdrop-hue-rotate-180 backdrop-hue-rotate: hue-rotate(180deg);

Backdrop Invert
Utilities for applying backdrop invert filters to an element.

backdrop-invert-0 backdrop-invert: invert(0);

backdrop-invert backdrop-invert: invert(1);

157
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Filters
Backdrop Opacity
Utilities for applying backdrop opacity filters to an element.

backdrop-opacity-0 backdrop-opacity: opacity(0);

backdrop-opacity-5 backdrop-opacity: opacity(0.05);

backdrop-opacity-10 backdrop-opacity: opacity(0.1);

backdrop-opacity-20 backdrop-opacity: opacity(0.2);

backdrop-opacity-25 backdrop-opacity: opacity(0.25);

backdrop-opacity-30 backdrop-opacity: opacity(0.3);

backdrop-opacity-40 backdrop-opacity: opacity(0.4);

backdrop-opacity-50 backdrop-opacity: opacity(0.5);

backdrop-opacity-60 backdrop-opacity: opacity(0.6);

backdrop-opacity-70 backdrop-opacity: opacity(0.7);

backdrop-opacity-75 backdrop-opacity: opacity(0.75);

backdrop-opacity-80 backdrop-opacity: opacity(0.8);

backdrop-opacity-90 backdrop-opacity: opacity(0.9);

backdrop-opacity-95 backdrop-opacity: opacity(0.95);

backdrop-opacity-100 backdrop-opacity: opacity(1);

158
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Filters
Backdrop Saturate
Utilities for applying backdrop saturation filters to an element.

backdrop-saturate-0 backdrop-saturate: saturate(0);

backdrop-saturate-50 backdrop-saturate: saturate(.5);

backdrop-saturate-100 backdrop-saturate: saturate(1);

backdrop-saturate-150 backdrop-saturate: saturate(1.50);

backdrop-saturate-200 backdrop-saturate: saturate(2);

Backdrop Sepia
Utilities for applying backdrop sepia filters to an element.

backdrop-sepia-0 backdrop-sepia: sepia(0);

backdrop-sepia backdrop-sepia: sepia(1);

159
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

Flexbox & Grid
Flex basis
Utilities for controlling the initial size of flex items.

basis-0 flex-basis: 0px;

basis-0.5 flex-basis: 0.125rem; 2px

basis-1 flex-basis: 0.25rem; 4px

basis-1.5 flex-basis: 0.375rem; 6px

basis-2 flex-basis: 0.5rem; 8px

basis-2.5 flex-basis: 0.625rem; 10px

basis-3 flex-basis: 0.75rem; 12px

basis-3.5 flex-basis: 0.875rem; 14px

basis-4 flex-basis: 1rem; 16px

basis-5 flex-basis: 1.25rem; 20px

basis-6 flex-basis: 1.5rem; 24px

basis-7 flex-basis: 1.75rem; 28px

basis-8 flex-basis: 2rem; 32px

basis-9 flex-basis: 2.25rem; 36px

basis-10 flex-basis: 2.5rem; 40px

basis-11 flex-basis: 2.75rem; 44px

basis-12 flex-basis: 3rem; 48px

basis-14 flex-basis: 3.5rem; 56px

160
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

basis-16 flex-basis: 4rem; 64px

basis-20 flex-basis: 5rem; 80px

basis-24 flex-basis: 6rem; 96px

basis-28 flex-basis: 7rem; 112px

basis-32 flex-basis: 8rem; 128px

basis-36 flex-basis: 9rem; 144px

basis-40 flex-basis: 10rem; 160px

basis-44 flex-basis: 11rem; 176px

basis-48 flex-basis: 12rem; 192px

basis-52 flex-basis: 13rem; 208px

basis-56 flex-basis: 14rem; 224px

basis-60 flex-basis: 15rem; 240px

basis-64 flex-basis: 16rem; 256px

basis-72 flex-basis: 18rem; 288px

basis-80 flex-basis: 20rem; 320px

basis-96 flex-basis: 24rem; 384px

basis-auto flex-basis: auto;

basis-px flex-basis: 1px;

basis-1/2 flex-basis: 50%;

basis-1/3 flex-basis: 33.333333%;

basis-2/3 flex-basis: 66.666667%;

basis-1/4 flex-basis: 25%;

161
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

basis-2/4 flex-basis: 50%;

basis-3/4 flex-basis: 75%;

basis-1/5 flex-basis: 20%;

basis-2/5 flex-basis: 40%;

basis-3/5 flex-basis: 60%;

basis-4/5 flex-basis: 80%;

basis-1/6 flex-basis: 16.666667%;

basis-2/6 flex-basis: 33.333333%;

basis-3/6 flex-basis: 50%;

basis-4/6 flex-basis: 66.666667%;

basis-5/6 flex-basis: 83.333333%;

basis-1/12 flex-basis: 8.333333%;

basis-2/12 flex-basis: 16.666667%;

basis-3/12 flex-basis: 25%;

basis-4/12 flex-basis: 33.333333%;

basis-5/12 flex-basis: 41.666667%;

basis-6/12 flex-basis: 50%;

basis-7/12 flex-basis: 58.333333%;

basis-8/12 flex-basis: 66.666667%;

basis-9/12 flex-basis: 75%;

basis-10/12 flex-basis: 83.333333%;

basis-11/12 flex-basis: 91.666667%;

basis-full flex-basis: 100%;

162
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

Flex Direction
Sets direction of flex items.

flex-row flex-direction: row;

flex-row-reverse flex-direction: row-reverse;

flex-col flex-direction: column;

flex-col-reverse flex-direction: column-reverse;

Flex Wrap
Creates how flex items wrap.

flex-nowrap flex-wrap: nowrap;

flex-wrap flex-wrap: wrap;

flex-wrap-reverse flex-wrap: wrap-reverse;

Flex
Controls how flex items grow and shrink.

flex-1 flex: 1 1 0%;

flex-auto flex: 1 1 auto;

flex-initial flex: 0 1 auto;

flex-none flex: none;

163
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

Flex Grow
Controls how flex items grow.

flex-grow flex-grow: 1;

grow-0 flex-grow: 0;

Flex Shrink
Controls how flex items shrink.

shrink shrink: 1;

shrink-0 shrink: 0;

164
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

Order
Controls how flex items are ordered.

order-first order: -9999;

order-last order: 9999;

order-none order: 0;

order-1 order: 1;

order-2 order: 2;

order-3 order: 3;

order-4 order: 4;

order-5 order: 5;

order-6 order: 6;

order-7 order: 7;

order-8 order: 8;

order-9 order: 9;

order-10 order: 10;

order-11 order: 11;

order-12 order: 12;

165
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

Grid Template Columns
Defines columns for grid layout.

grid-cols-1 grid-template-columns: repeat(1, minmax(0, 1fr));

grid-cols-2 grid-template-columns: repeat(2, minmax(0, 1fr));

grid-cols-3 grid-template-columns: repeat(3, minmax(0, 1fr));

grid-cols-4 grid-template-columns: repeat(4, minmax(0, 1fr));

grid-cols-5 grid-template-columns: repeat(5, minmax(0, 1fr));

grid-cols-6 grid-template-columns: repeat(6, minmax(0, 1fr));

grid-cols-7 grid-template-columns: repeat(7, minmax(0, 1fr));

grid-cols-8 grid-template-columns: repeat(8, minmax(0, 1fr));

grid-cols-9 grid-template-columns: repeat(9, minmax(0, 1fr));

grid-cols-10 grid-template-columns: repeat(10, minmax(0, 1fr));

grid-cols-11 grid-template-columns: repeat(11, minmax(0, 1fr));

grid-cols-12 grid-template-columns: repeat(12, minmax(0, 1fr));

grid-cols-none grid-template-columns: none;

166
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

Grid Column, start/end
Sets a grid item size and location within the grid column.

col-auto grid-column: auto;

col-span-1 grid-column: span 1 / span 1;

col-span-2 grid-column: span 2 / span 2;

col-span-3 grid-column: span 3 / span 3;

col-span-4 grid-column: span 4 / span 4;

col-span-5 grid-column: span 5 / span 5;

col-span-6 grid-column: span 6 / span 6;

col-span-7 grid-column: span 7 / span 7;

col-span-8 grid-column: span 8 / span 8;

col-span-9 grid-column: span 9 / span 9;

col-span-10 grid-column: span 10 / span 10;

col-span-11 grid-column: span 11 / span 11;

col-span-12 grid-column: span 12 / span 12;

col-start-1 grid-column-start: 1;

col-start-2 grid-column-start: 2;

col-start-3 grid-column-start: 3;

col-start-4 grid-column-start: 4;

col-start-5 grid-column-start: 5;

col-start-6 grid-column-start: 6;

col-start-7 grid-column-start: 7;

167
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

col-start-8 grid-column-start: 8;

col-start-9 grid-column-start: 9;

col-start-10 grid-column-start: 10;

col-start-11 grid-column-start: 11;

col-start-12 grid-column-start: 12;

col-start-13 grid-column-start: 13;

col-start-auto grid-column-start: auto;

col-end-1 grid-column-end: 1;

col-end-2 grid-column-end: 2;

col-end-3 grid-column-end: 3;

col-end-4 grid-column-end: 4;

col-end-5 grid-column-end: 5;

col-end-6 grid-column-end: 6;

col-end-7 grid-column-end: 7;

col-end-8 grid-column-end: 8;

col-end-9 grid-column-end: 9;

col-end-10 grid-column-end: 10;

col-end-11 grid-column-end: 11;

col-end-12 grid-column-end: 12;

col-end-13 grid-column-end: 13;

col-end-auto grid-column-end: auto;

168
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

Grid Template Rows
Defines rows for grid layout.

grid-rows-1 grid-template-rows: repeat(1, minmax(0, 1fr));

grid-rows-2 grid-template-rows: repeat(2, minmax(0, 1fr));

grid-rows-3 grid-template-rows: repeat(3, minmax(0, 1fr));

grid-rows-4 grid-template-rows: repeat(4, minmax(0, 1fr));

grid-rows-5 grid-template-rows: repeat(5, minmax(0, 1fr));

grid-rows-6 grid-template-rows: repeat(6, minmax(0, 1fr));

grid-rows-none grid-template-rows: none;

169
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

Grid Row, start/end
Sets a grid item size and location within the grid row.

row-auto grid-row: auto;

row-span-1 grid-row: span 1 / span 1;

row-span-2 grid-row: span 2 / span 2;

row-span-3 grid-row: span 3 / span 3;

row-span-4 grid-row: span 4 / span 4;

row-span-5 grid-row: span 5 / span 5;

row-span-6 grid-row: span 6 / span 6;

row-start-1 grid-row-start: 1;

row-start-2 grid-row-start: 2;

row-start-3 grid-row-start: 3;

row-start-4 grid-row-start: 4;

row-start-5 grid-row-start: 5;

row-start-6 grid-row-start: 6;

row-start-7 grid-row-start: 7;

row-start-auto grid-row-start: auto;

row-end-1 grid-row-end: 1;

row-end-2 grid-row-end: 2;

row-end-3 grid-row-end: 3;

row-end-4 grid-row-end: 4;

row-end-5 grid-row-end: 5;

170
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

row-end-6 grid-row-end: 6;

row-end-7 grid-row-end: 7;

row-end-auto grid-row-end: auto;

Grid Auto Flow

Controls the auto placement of grid elements.

grid-flow-row grid-auto-flow: row;

grid-flow-col grid-auto-flow: column;

grid-flow-row-dense grid-auto-flow: row dense;

grid-flow-col-dense grid-auto-flow: column dense;

Grid Auto Columns

Utilities for controlling the size of implicitly-created grid columns.

auto-cols-auto grid-auto-columns: auto;

auto-cols-min grid-auto-columns: min;

auto-cols-max grid-auto-columns: max;

auto-cols-fr grid-auto-columns: minmax(0, 1fr);

171
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

Grid Auto Rows
Utilities for controlling the size of implicitly-created grid rows.

auto-rows-auto grid-auto-rows: auto;

auto-rows-min grid-auto-rows: min;

auto-rows-max grid-auto-rows: max;

auto-rows-fr grid-auto-rows: minmax(0, 1fr);

172
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

Gap
Sets the gaps (gutters) between rows and columns.

gap-0 gap: 0;

gap-0.5 gap: 0.125rem; 2px

gap-1 gap: 0.25rem; 4px

gap-1.5 gap: 0.375rem; 6px

gap-2 gap: 0.5rem; 8px

gap-2.5 gap: 0.625rem; 10px

gap-3 gap: 0.75rem; 12px

gap-3.5 gap: 0.875rem; 14px

gap-4 gap: 1rem; 16px

gap-5 gap: 1.25rem; 20px

gap-6 gap: 1.5rem; 24px

gap-8 gap: 2rem; 32px

gap-10 gap: 2.5rem; 40px

gap-11 gap: 2.75rem; 44px

gap-12 gap: 3rem; 48px

gap-14 gap: 3.5rem; 56px

gap-16 gap: 4rem; 64px

gap-20 gap: 5rem; 80px

gap-24 gap: 6rem; 96px

gap-28 gap: 7rem; 112px

173
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

gap-32 gap: 8rem; 128px

gap-36 gap: 9rem; 144px

gap-40 gap: 10rem; 160px

gap-44 gap: 11rem; 176px

gap-48 gap: 12rem; 192px

gap-52 gap: 13rem; 208px

gap-56 gap: 14rem; 224px

gap-64 gap: 16rem; 256px

gap-72 gap: 18rem; 288px

gap-80 gap: 20rem; 320px

gap-96 gap: 24rem; 384px

gap-px gap: 1px;

gap-x-0 column-gap: 0;

gap-x-0.5 column-gap: 0.125rem; 2px

gap-x-1 column-gap: 0.25rem; 4px

gap-x-1.5 column-gap: 0.375rem; 6px

gap-x-2 column-gap: 0.5rem; 8px

gap-x-2.5 column-gap: 0.625rem; 10px

gap-x-3 column-gap: 0.75rem; 12px

gap-x-3.5 column-gap: 0.875rem; 14px

gap-x-4 column-gap: 1rem; 16px

gap-x-5 column-gap: 1.25rem; 20px

174
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

gap-x-6 column-gap: 1.5rem; 24px

gap-x-8 column-gap: 2rem; 32px

gap-x-10 column-gap: 2.5rem; 40px

gap-x-11 column-gap: 2.75rem; 44px

gap-x-12 column-gap: 3rem; 48px

gap-x-14 column-gap: 3.5rem; 56px

gap-x-16 column-gap: 4rem; 64px

gap-x-20 column-gap: 5rem; 80px

gap-x-24 column-gap: 6rem; 96px

gap-x-28 column-gap: 7rem; 112px

gap-x-32 column-gap: 8rem; 128px

gap-x-36 column-gap: 9rem; 144px

gap-x-40 column-gap: 10rem; 160px

gap-x-44 column-gap: 11rem; 176px

gap-x-48 column-gap: 12rem; 192px

gap-x-52 column-gap: 13rem; 208px

gap-x-56 column-gap: 14rem; 224px

gap-x-64 column-gap: 16rem; 256px

gap-x-72 column-gap: 18rem; 288px

gap-x-80 column-gap: 20rem; 320px

gap-x-96 column-gap: 24rem; 384px

gap-x-px column-gap: 1px;

175
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

gap-y-0 row-gap: 0;

gap-y-0.5 row-gap: 0.125rem; 2px

gap-y-1 row-gap: 0.25rem; 4px

gap-y-1.5 row-gap: 0.375rem; 6px

gap-y-2 row-gap: 0.5rem; 8px

gap-y-2.5 row-gap: 0.625rem; 10px

gap-y-3 row-gap: 0.75rem; 12px

gap-y-3.5 row-gap: 0.875rem; 14px

gap-y-4 row-gap: 1rem; 16px

gap-y-5 row-gap: 1.25rem; 20px

gap-y-6 row-gap: 1.5rem; 24px

gap-y-8 row-gap: 2rem; 32px

gap-y-10 row-gap: 2.5rem; 40px

gap-y-11 row-gap: 2.75rem; 44px

gap-y-12 row-gap: 3rem; 48px

gap-y-14 row-gap: 3.5rem; 56px

gap-y-16 row-gap: 4rem; 64px

gap-y-20 row-gap: 5rem; 80px

gap-y-24 row-gap: 6rem; 96px

gap-y-28 row-gap: 7rem; 112px

gap-y-32 row-gap: 8rem; 128px

gap-y-36 row-gap: 9rem; 144px

176
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

gap-y-40 row-gap: 10rem; 160px

gap-y-44 row-gap: 11rem; 176px

gap-y-48 row-gap: 12rem; 192px

gap-y-52 row-gap: 13rem; 208px

gap-y-56 row-gap: 14rem; 224px

gap-y-64 row-gap: 16rem; 256px

gap-y-72 row-gap: 18rem; 288px

gap-y-80 row-gap: 20rem; 320px

gap-y-96 row-gap: 24rem; 384px

gap-y-px row-gap: 1px;

Justify Content
Utilities for controlling how flex and grid items are positioned along a container’s main axis.

justify-start justify-content: flex-start;

justify-center justify-content: center;

justify-end justify-content: flex-end;

justify-between justify-content: space-between;

justify-around justify-content: space-around;

justify-evenly justify-content: space-evenly;

177
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

Justify Items
Utilities for controlling how grid items are aligned along their inline axis.

justify-items-stretch justify-items: stretch;

justify-items-start justify-items: start;

justify-items-center justify-items: center;

justify-items-end justify-items: end;

Justify Self
Utilities for controlling how an individual grid item is aligned along its inline axis.

justify-self-stretch justify-self: stretch;

justify-self-start justify-self: start;

justify-self-center justify-self: center;

justify-self-end justify-self: end;

justify-self-auto justify-self: auto;

178
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

Align Content
Utilities for controlling how rows are positioned in multi-row flex and grid containers.

content-start align-content: flex-start;

content-center align-content: center;

content-end align-content: flex-end;

content-between align-content: space-between;

content-around align-content: space-around;

content-evenly align-content: space-evenly;

Align Items
Sets flex items position along a contrainer’s cross axis.

items-stretch align-items: stretch;

items-start align-items: flex-start;

items-center align-items: center;

items-end align-items: flex-end;

items-baseline align-items: baseline;

179
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

Align Self
Controls how an individual flex item is positioned along container’s cross axis.

self-auto align-self: auto;

self-start align-self: flex-start;

self-center align-self: center;

self-end align-self: flex-end;

self-stretch align-self: stretch;

self-baseline align-self: baseline;

180
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

Place Content
Utilities for controlling how content is justified and aligned at the same time.

place-content-start place-content: start;

place-content-center place-content: center;

place-content-end place-content: end;

place-content-between place-content: space-between;

place-content-around place-content: space-around;

place-content-evenly place-content: space-evenly;

place-content-stretch place-content: space-stretch;

Place Items
Utilities for controlling how items are justified and aligned at the same time.

place-items-stretch place-items: stretch;

place-items-start place-items: start;

place-items-center place-items: center;

place-items-end place-items: end;

181
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Flexbox & Grid

Place Self
Utilities for controlling how an individual item is justified and aligned at the same time.

place-self-auto place-self: auto;

place-self-start place-self: start;

place-self-center place-self: center;

place-self-end place-self: end;

place-self-stretch place-self: stretch;

182
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
Backgrounds
Background Attachment
Sets behavior of background images when scrolling.

bg-fixed background-attachment: fixed;

bg-local background-attachment: local;

bg-scroll background-attachment: scroll;

Background Clip
Sets behavior of Utilities for controlling the bounding box of an element’s background.

bg-clip-border background-clip: border-box;

bg-clip-padding background-clip: padding-box;

bg-clip-content background-clip: content-box;

bg-clip-text background-clip: text;

183
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
Background Color
Sets background color.

bg-transparent background-color: transparent;

bg-current background-color: currentColor;

bg-black background-color: #000000;

bg-white background-color: #ffffff;

bg-gray-50 background-color: #F9FAFB;

bg-gray-100 background-color: #F3F4F6;

bg-gray-200 background-color: #E5E7EB;

bg-gray-300 background-color: #D1D5DB;

bg-gray-400 background-color: #9CA3AF;

bg-gray-500 background-color: #6B7280;

bg-gray-600 background-color: #6B7280;

bg-gray-700 background-color: #374151;

bg-gray-800 background-color: #1F2937;

bg-gray-900 background-color: #111827;

bg-red-50 background-color: #FEF2F2;

bg-red-100 background-color: #FEE2E2;

bg-red-200 background-color: #FECACA;

bg-red-300 background-color: #FCA5A5;

bg-red-400 background-color: #F87171;

bg-red-500 background-color: #EF4444;

184
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
bg-red-600 background-color: #DC2626;

bg-red-700 background-color: #B91C1C;

bg-red-800 background-color: #991B1B;

bg-red-900 background-color: #7F1D1D;

bg-yellow-50 background-color: #FFFBEB;

bg-yellow-100 background-color: #FEF3C7;

bg-yellow-200 background-color: #FDE68A;

bg-yellow-300 background-color: #FCD34D;

bg-yellow-400 background-color: #FBBF24;

bg-yellow-500 background-color: #F59E0B;

bg-yellow-600 background-color: #D97706;

bg-yellow-700 background-color: #B45309;

bg-yellow-800 background-color: #92400E;

bg-yellow-900 background-color: #78350F;

bg-green-50 background-color: #ECFDF5;

bg-green-100 background-color: #D1FAE5;

bg-green-200 background-color: #A7F3D0;

bg-green-300 background-color: #6EE7B7;

bg-green-400 background-color: #34D399;

bg-green-500 background-color: #10B981;

bg-green-600 background-color: #059669;

bg-green-700 background-color: #047857;

185
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
bg-green-800 background-color: #065F46;

bg-green-900 background-color: #064E3B;

bg-blue-50 background-color: #EFF6FF;

bg-blue-100 background-color: #DBEAFE;

bg-blue-200 background-color: #BFDBFE;

bg-blue-300 background-color: #93C5FD;

bg-blue-400 background-color: #60A5FA;

bg-blue-500 background-color: #3B82F6;

bg-blue-600 background-color: #2563EB;

bg-blue-700 background-color: #1D4ED8;

bg-blue-800 background-color: #1E40AF;

bg-blue-900 background-color: #1E3A8A;

bg-indigo-50 background-color: #EEF2FF;

bg-indigo-100 background-color: #E0E7FF;

bg-indigo-200 background-color: #C7D2FE;

bg-indigo-300 background-color: #A5B4FC;

bg-indigo-400 background-color: #818CF8;

bg-indigo-500 background-color: #6366F1;

bg-indigo-600 background-color: #4F46E5;

bg-indigo-700 background-color: #4338CA;

bg-indigo-800 background-color: #3730A3;

bg-indigo-900 background-color: #312E81;

186
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
bg-purple-50 background-color: #F5F3FF;

bg-purple-100 background-color: #EDE9FE;

bg-purple-200 background-color: #DDD6FE;

bg-purple-300 background-color: #C4B5FD;

bg-purple-400 background-color: #A78BFA;

bg-purple-500 background-color: #8B5CF6;

bg-purple-600 background-color: #7C3AED;

bg-purple-700 background-color: #6D28D9;

bg-purple-800 background-color: #5B21B6;

bg-purple-900 background-color: #4C1D95;

bg-pink-50 background-color: #FDF2F8;

bg-pink-100 background-color: #FCE7F3;

bg-pink-200 background-color: #FBCFE8;

bg-pink-300 background-color: #F9A8D4;

bg-pink-400 background-color: #F472B6;

bg-pink-500 background-color: #EC4899;

bg-pink-600 background-color: #DB2777;

bg-pink-700 background-color: #BE185D;

bg-pink-800 background-color: #9D174D;

bg-pink-900 background-color: #831843;

187
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
Background Opacity
Sets background opacity.

bg-opacity-0 --bg-opacity: 0;

bg-opacity-5 --bg-opacity: 0.5;

bg-opacity-10 --bg-opacity: 0.1;

bg-opacity-20 --bg-opacity: 0.2;

bg-opacity-25 --bg-opacity: 0.25;

bg-opacity-30 --bg-opacity: 0.3;

bg-opacity-40 --bg-opacity: 0.4;

bg-opacity-50 --bg-opacity: 0.5;

bg-opacity-60 --bg-opacity: 0.6;

bg-opacity-70 --bg-opacity: 0.7;

bg-opacity-75 --bg-opacity: 0.75;

bg-opacity-80 --bg-opacity: 0.8;

bg-opacity-90 --bg-opacity: 0.9;

bg-opacity-95 --bg-opacity: 0.95;

bg-opacity-100 --bg-opacity: 1;

188
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
Background Origin
Utilities for controlling how an element’s background is positioned relative to borders,
padding, and content.

bg-origin-border background-origin: border-box;

bg-origin-padding background-origin: padding-box;

bg-origin-content background-origin: content-box;

Background Position
Sets position of a background image.

bg-bottom background-position: bottom;

bg-center background-position: center;

bg-left background-position: left;

bg-left-bottom background-position: left bottom;

bg-left-top background-position: left top;

bg-right background-position: right;

bg-right-bottom background-position: right bottom;

bg-right-top background-position: right top;

bg-top background-position: top;

189
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
Background Repeat
Sets repetition of a background image.

bg-repeat background-repeat: repeat;

bg-no-repeat background-repeat: no-repeat;

bg-repeat-x background-repeat: repeat-x;

bg-repeat-y background-repeat: repeat-y;

bg-repeat-round background-repeat: round;

bg-repeat-space background-repeat: space;

Background Size
Sets background size of a background image.

bg-auto background-size: auto;

bg-cover background-size: cover;

bg-contain background-size: contain;

190
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
Background Image
Utilities for controlling an element’s background image.

bg-none background-image: none;

bg-gradient-to-t background-image:background-image:
background-image: linear-gradient
(to top, var(--tw-gradient-stops));

bg-gradient-to-tr background-image: background-image:

linear-gradient(to top right, var
(--tw-gradient-stops));

bg-gradient-to-r background-image: background-image:

linear-gradient(to right, var
(--tw-gradient-stops));

bg-gradient-to-br background-image: background-image:

linear-gradient(to bottom right, var
(--tw-gradient-stops));

bg-gradient-to-b background-image: background-image:

linear-gradient(to bottom, var
(--tw-gradient-stops));

bg-gradient-to-bl background-image: background-image:

linear-gradient(to bottom left, var
(--tw-gradient-stops));

bg-gradient-to-l background-image: background-image:

linear-gradient(to left, var
(--tw-gradient-stops));

bg-gradient-to-tl background-image: background-image:

linear-gradient(to top left, var
(--tw-gradient-stops));

191
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
Gradient Color Stops
Utilities for controlling the color stops in background gradients.

from-transparent background-color: transparent;

from-current background-color: currentColor;

from-black background-color: #000000;

from-white background-color: #ffffff;

from-gray-50 background-color: #F9FAFB;

from-gray-100 background-color: #F3F4F6;

from-gray-200 background-color: #E5E7EB;

from-gray-300 background-color: #D1D5DB;

from-gray-400 background-color: #9CA3AF;

from-gray-500 background-color: #6B7280;

from-gray-600 background-color: #6B7280;

from-gray-700 background-color: #374151;

from-gray-800 background-color: #1F2937;

from-gray-900 background-color: #111827;

from-red-50 background-color: #FEF2F2;

from-red-100 background-color: #FEE2E2;

from-red-200 background-color: #FECACA;

from-red-300 background-color: #FCA5A5;

from-red-400 background-color: #F87171;

from-red-500 background-color: #EF4444;

192
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
from-red-600 background-color: #DC2626;

from-red-700 background-color: #B91C1C;

from-red-800 background-color: #991B1B;

from-red-900 background-color: #7F1D1D;

from-yellow-50 background-color: #FFFBEB;

from-yellow-100 background-color: #FEF3C7;

from-yellow-200 background-color: #FDE68A;

from-yellow-300 background-color: #FCD34D;

from-yellow-400 background-color: #FBBF24;

from-yellow-500 background-color: #F59E0B;

from-yellow-600 background-color: #D97706;

from-yellow-700 background-color: #B45309;

from-yellow-800 background-color: #92400E;

from-yellow-900 background-color: #78350F;

from-green-50 background-color: #ECFDF5;

from-green-100 background-color: #D1FAE5;

from-green-200 background-color: #A7F3D0;

from-green-300 background-color: #6EE7B7;

from-green-400 background-color: #34D399;

from-green-500 background-color: #10B981;

from-green-600 background-color: #059669;

from-green-700 background-color: #047857;

193
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
from-green-800 background-color: #065F46;

from-green-900 background-color: #064E3B;

from-blue-50 background-color: #EFF6FF;

from-blue-100 background-color: #DBEAFE;

from-blue-200 background-color: #BFDBFE;

from-blue-300 background-color: #93C5FD;

from-blue-400 background-color: #60A5FA;

from-blue-500 background-color: #3B82F6;

from-blue-600 background-color: #2563EB;

from-blue-700 background-color: #1D4ED8;

from-blue-800 background-color: #1E40AF;

from-blue-900 background-color: #1E3A8A;

from-indigo-50 background-color: #EEF2FF;

from-indigo-100 background-color: #E0E7FF;

from-indigo-200 background-color: #C7D2FE;

from-indigo-300 background-color: #A5B4FC;

from-indigo-400 background-color: #818CF8;

from-indigo-500 background-color: #6366F1;

from-indigo-600 background-color: #4F46E5;

from-indigo-700 background-color: #4338CA;

from-indigo-800 background-color: #3730A3;

from-indigo-900 background-color: #312E81;

194
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
from-purple-50 background-color: #F5F3FF;

from-purple-100 background-color: #EDE9FE;

from-purple-200 background-color: #DDD6FE;

from-purple-300 background-color: #C4B5FD;

from-purple-400 background-color: #A78BFA;

from-purple-500 background-color: #8B5CF6;

from-purple-600 background-color: #7C3AED;

from-purple-700 background-color: #6D28D9;

from-purple-800 background-color: #5B21B6;

from-purple-900 background-color: #4C1D95;

from-pink-50 background-color: #FDF2F8;

from-pink-100 background-color: #FCE7F3;

from-pink-200 background-color: #FBCFE8;

from-pink-300 background-color: #F9A8D4;

from-pink-400 background-color: #F472B6;

from-pink-500 background-color: #EC4899;

from-pink-600 background-color: #DB2777;

from-pink-700 background-color: #BE185D;

from-pink-800 background-color: #9D174D;

from-pink-900 background-color: #831843;

via-transparent background-color: transparent;

via-current background-color: currentColor;

195
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
via-black background-color: #000000;

via-white background-color: #ffffff;

via-gray-50 background-color: #F9FAFB;

via-gray-100 background-color: #F3F4F6;

via-gray-200 background-color: #E5E7EB;

via-gray-300 background-color: #D1D5DB;

via-gray-400 background-color: #9CA3AF;

via-gray-500 background-color: #6B7280;

via-gray-600 background-color: #6B7280;

via-gray-700 background-color: #374151;

via-gray-800 background-color: #1F2937;

via-gray-900 background-color: #111827;

via-red-50 background-color: #FEF2F2;

via-red-100 background-color: #FEE2E2;

via-red-200 background-color: #FECACA;

via-red-300 background-color: #FCA5A5;

via-red-400 background-color: #F87171;

via-red-500 background-color: #EF4444;

via-red-600 background-color: #DC2626;

via-red-700 background-color: #B91C1C;

via-red-800 background-color: #991B1B;

via-red-900 background-color: #7F1D1D;

196
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
via-yellow-50 background-color: #FFFBEB;

via-yellow-100 background-color: #FEF3C7;

via-yellow-200 background-color: #FDE68A;

via-yellow-300 background-color: #FCD34D;

via-yellow-400 background-color: #FBBF24;

via-yellow-500 background-color: #F59E0B;

via-yellow-600 background-color: #D97706;

via-yellow-700 background-color: #B45309;

via-yellow-800 background-color: #92400E;

via-yellow-900 background-color: #78350F;

via-green-50 background-color: #ECFDF5;

via-green-100 background-color: #D1FAE5;

via-green-200 background-color: #A7F3D0;

via-green-300 background-color: #6EE7B7;

via-green-400 background-color: #34D399;

via-green-500 background-color: #10B981;

via-green-600 background-color: #059669;

via-green-700 background-color: #047857;

via-green-800 background-color: #065F46;

via-green-900 background-color: #064E3B;

via-blue-50 background-color: #EFF6FF;

via-blue-100 background-color: #DBEAFE;

197
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
via-blue-200 background-color: #BFDBFE;

via-blue-300 background-color: #93C5FD;

via-blue-400 background-color: #60A5FA;

via-blue-500 background-color: #3B82F6;

via-blue-600 background-color: #2563EB;

via-blue-700 background-color: #1D4ED8;

via-blue-800 background-color: #1E40AF;

via-blue-900 background-color: #1E3A8A;

via-indigo-50 background-color: #EEF2FF;

via-indigo-100 background-color: #E0E7FF;

via-indigo-200 background-color: #C7D2FE;

via-indigo-300 background-color: #A5B4FC;

via-indigo-400 background-color: #818CF8;

via-indigo-500 background-color: #6366F1;

via-indigo-600 background-color: #4F46E5;

via-indigo-700 background-color: #4338CA;

via-indigo-800 background-color: #3730A3;

via-indigo-900 background-color: #312E81;

via-purple-50 background-color: #F5F3FF;

via-purple-100 background-color: #EDE9FE;

via-purple-200 background-color: #DDD6FE;

via-purple-300 background-color: #C4B5FD;

198
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
via-purple-400 background-color: #A78BFA;

via-purple-500 background-color: #8B5CF6;

via-purple-600 background-color: #7C3AED;

via-purple-700 background-color: #6D28D9;

via-purple-800 background-color: #5B21B6;

via-purple-900 background-color: #4C1D95;

via-pink-50 background-color: #FDF2F8;

via-pink-100 background-color: #FCE7F3;

via-pink-200 background-color: #FBCFE8;

via-pink-300 background-color: #F9A8D4;

via-pink-400 background-color: #F472B6;

via-pink-500 background-color: #EC4899;

via-pink-600 background-color: #DB2777;

via-pink-700 background-color: #BE185D;

via-pink-800 background-color: #9D174D;

via-pink-900 background-color: #831843;

to-transparent background-color: transparent;

to-current background-color: currentColor;

to-black background-color: #000000;

to-white background-color: #ffffff;

to-gray-50 background-color: #F9FAFB;

to-gray-100 background-color: #F3F4F6;

199
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
to-gray-200 background-color: #E5E7EB;

to-gray-300 background-color: #D1D5DB;

to-gray-400 background-color: #9CA3AF;

to-gray-500 background-color: #6B7280;

to-gray-600 background-color: #6B7280;

to-gray-700 background-color: #374151;

to-gray-800 background-color: #1F2937;

to-gray-900 background-color: #111827;

to-red-50 background-color: #FEF2F2;

to-red-100 background-color: #FEE2E2;

to-red-200 background-color: #FECACA;

to-red-300 background-color: #FCA5A5;

to-red-400 background-color: #F87171;

to-red-500 background-color: #EF4444;

to-red-600 background-color: #DC2626;

to-red-700 background-color: #B91C1C;

to-red-800 background-color: #991B1B;

to-red-900 background-color: #7F1D1D;

to-yellow-50 background-color: #FFFBEB;

to-yellow-100 background-color: #FEF3C7;

to-yellow-200 background-color: #FDE68A;

to-yellow-300 background-color: #FCD34D;

200
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
to-yellow-400 background-color: #FBBF24;

to-yellow-500 background-color: #F59E0B;

to-yellow-600 background-color: #D97706;

to-yellow-700 background-color: #B45309;

to-yellow-800 background-color: #92400E;

to-yellow-900 background-color: #78350F;

to-green-50 background-color: #ECFDF5;

to-green-100 background-color: #D1FAE5;

to-green-200 background-color: #A7F3D0;

to-green-300 background-color: #6EE7B7;

to-green-400 background-color: #34D399;

to-green-500 background-color: #10B981;

to-green-600 background-color: #059669;

to-green-700 background-color: #047857;

to-green-800 background-color: #065F46;

to-green-900 background-color: #064E3B;

to-blue-50 background-color: #EFF6FF;

to-blue-100 background-color: #DBEAFE;

to-blue-200 background-color: #BFDBFE;

to-blue-300 background-color: #93C5FD;

to-blue-400 background-color: #60A5FA;

to-blue-500 background-color: #3B82F6;

201
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
to-blue-600 background-color: #2563EB;

to-blue-700 background-color: #1D4ED8;

to-blue-800 background-color: #1E40AF;

to-blue-900 background-color: #1E3A8A;

to-indigo-50 background-color: #EEF2FF;

to-indigo-100 background-color: #E0E7FF;

to-indigo-200 background-color: #C7D2FE;

to-indigo-300 background-color: #A5B4FC;

to-indigo-400 background-color: #818CF8;

to-indigo-500 background-color: #6366F1;

to-indigo-600 background-color: #4F46E5;

to-indigo-700 background-color: #4338CA;

to-indigo-800 background-color: #3730A3;

to-indigo-900 background-color: #312E81;

to-purple-50 background-color: #F5F3FF;

to-purple-100 background-color: #EDE9FE;

to-purple-200 background-color: #DDD6FE;

to-purple-300 background-color: #C4B5FD;

to-purple-400 background-color: #A78BFA;

to-purple-500 background-color: #8B5CF6;

to-purple-600 background-color: #7C3AED;

to-purple-700 background-color: #6D28D9;

202
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Backgrounds
to-purple-800 background-color: #5B21B6;

to-purple-900 background-color: #4C1D95;

to-pink-50 background-color: #FDF2F8;

to-pink-100 background-color: #FCE7F3;

to-pink-200 background-color: #FBCFE8;

to-pink-300 background-color: #F9A8D4;

to-pink-400 background-color: #F472B6;

to-pink-500 background-color: #EC4899;

to-pink-600 background-color: #DB2777;

to-pink-700 background-color: #BE185D;

to-pink-800 background-color: #9D174D;

to-pink-900 background-color: #831843;

203
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

SVG
SVG
Fill
Utilities for styling the fill of SVG elements.

fill-current fill: currentColor;

Stroke
Utilities for styling the stroke of SVG elements.

stroke-current stroke: currentColor;

Stroke Width
Utilities for styling the stroke width of SVG elements.

stroke-0 stroke-width: 0;

stroke-1 stroke-width: 1;

stroke-2 stroke-width: 2;

204
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Accessibility
Accessibility
Screen Readers
Utilities for improving accessibility with screen readers.

sr-only position: absolute; width: 1px; height: 1px; padding:

0; margin: -1px; overflow: hidden; clip: rect
(0, 0, 0, 0); white-space: nowrap; border-width: 0;

not-sr-only position: static; width: auto; height: auto; padding:

0; margin: 0; overflow: visible; clip: auto;
white-space: normal;

205
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
Borders
Border Radius
Sets border radius.

rounded-none border-radius: 0;

rounded-sm border-radius: 0.125rem; 2px

rounded border-radius: 0.25rem; 4px

rounded-md border-radius: 0.375rem; 6px

rounded-lg border-radius: 0.5rem; 8px

rounded-xl border-radius: 0.75rem; 10px

rounded-2xl border-radius: 1rem; 12px

rounded-3xl border-radius: 1.5rem; 16px

rounded-full border-radius: 9999px;

rounded-t-none border-top-left-radius: 0;
border-top-right-radius: 0;

rounded-r-none border-top-right-radius: 0;
border-bottom-right-radius: 0;

rounded-b-none border-bottom-right-radius: 0;
border-bottom-left-radius: 0;

rounded-l-none border-top-left-radius: 0;
border-bottom-left-radius: 0;

rounded-t-sm border-top-left-radius: 0.125rem;

border-top-right-radius: 0.125rem; 2px

rounded-r-sm border-top-right-radius: 0.125rem;

border-bottom-right-radius: 0.125rem; 2px

206
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
rounded-b-sm border-bottom-right-radius: 0.125rem;
border-bottom-left-radius: 0.125rem; 2px

rounded-l-sm border-top-left-radius: 0.125rem;

border-bottom-left-radius: 0.125rem; 2px

rounded-t border-top-left-radius: 0.25rem;

border-top-right-radius: 0.25rem; 4px

rounded-r border-top-right-radius: 0.25rem;

border-bottom-right-radius: 0.25rem; 4px

rounded-b border-bottom-right-radius: 0.25rem;

border-bottom-left-radius: 0.25rem; 4px

rounded-l border-top-left-radius: 0.25rem;

border-bottom-left-radius: 0.25rem; 4px

rounded-t-md border-top-left-radius: 0.375rem;

border-top-right-radius: 0.375rem; 6px

rounded-r-md border-top-right-radius: 0.375rem;

border-bottom-right-radius: 0.375rem; 6px

rounded-b-md border-bottom-right-radius: 0.375rem;

border-bottom-left-radius: 0.375rem; 6px

rounded-l-md border-top-left-radius: 0.375rem;

border-bottom-left-radius: 0.375rem; 6px

rounded-t-lg border-top-left-radius: 0.5rem;

border-top-right-radius: 0.5rem; 8px

rounded-r-lg border-top-right-radius: 0.5rem;

border-bottom-right-radius: 0.5rem; 8px

rounded-b-lg border-bottom-right-radius: 0.5rem;

border-bottom-left-radius: 0.5rem; 8px

rounded-l-lg border-top-left-radius: 0.5rem;

border-bottom-left-radius: 0.5rem; 8px

rounded-t-xl border-top-left-radius: 0.75rem;

border-top-right-radius: 0.75rem; 10px

207
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
rounded-r-xl border-top-right-radius: 0.75rem;
border-bottom-right-radius: 0.75rem; 10px

rounded-b-xl border-bottom-right-radius: 0.75rem;

border-bottom-left-radius: 0.75rem; 10px

rounded-l-xl border-top-left-radius: 0.75rem;

border-bottom-left-radius: 0.75rem; 10px

rounded-t-2xl border-top-left-radius: 1rem;

border-top-right-radius: 1rem; 12px

rounded-r-2xl border-top-right-radius: 1rem;

border-bottom-right-radius: 1rem; 12px

rounded-b-2xl border-bottom-right-radius: 1rem;

border-bottom-left-radius: 1rem; 12px

rounded-l-2xl border-top-left-radius: 1rem;

border-bottom-left-radius: 1rem; 12px

rounded-t-3xl border-top-left-radius: 1.5rem;

border-top-right-radius: 1.5rem; 16px

rounded-r-3xl border-top-right-radius: 1.5rem;

border-bottom-right-radius: 1.5rem; 16px

rounded-b-3xl border-bottom-right-radius: 1.5rem;

border-bottom-left-radius: 1.5rem; 16px

rounded-l-3xl border-top-left-radius: 1.5rem;

border-bottom-left-radius: 1.5rem; 16px

rounded-t-full border-top-left-radius: 9999px;

border-top-right-radius: 9999px;

rounded-r-full border-top-right-radius: 9999px;

border-bottom-right-radius: 9999px;

rounded-b-full border-bottom-right-radius: 9999px;

border-bottom-left-radius: 9999px;

rounded-l-full border-top-left-radius: 9999px;

border-bottom-left-radius: 9999px;

208
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
rounded-tl-none border-top-left-radius: 0;

rounded-tr-none border-top-right-radius: 0;

rounded-br-none border-bottom-right-radius: 0;

rounded-bl-none border-bottom-left-radius: 0;

rounded-tl-sm border-top-left-radius: 0.125rem; 2px

rounded-tr-sm border-top-right-radius: 0.125rem; 2px

rounded-br-sm border-bottom-right-radius: 0.125rem; 2px

rounded-bl-sm border-bottom-left-radius: 0.125rem; 2px

rounded-tl border-top-left-radius: 0.25rem; 4px

rounded-tr border-top-right-radius: 0.25rem; 4px

rounded-br border-bottom-right-radius: 0.25rem; 4px

rounded-bl border-bottom-left-radius: 0.25rem; 4px

rounded-tl-md border-top-left-radius: 0.375rem; 6px

rounded-tr-md border-top-right-radius: 0.375rem; 6px

rounded-br-md border-bottom-right-radius: 0.375rem; 6px

rounded-bl-md border-bottom-left-radius: 0.375rem; 6px

rounded-tl-lg border-top-left-radius: 0.5rem; 8px

rounded-tr-lg border-top-right-radius: 0.5rem; 8px

rounded-br-lg border-bottom-right-radius: 0.5rem; 8px

rounded-bl-lg border-bottom-left-radius: 0.5rem; 8px

rounded-tl-xl border-top-left-radius: 0.75rem; 10px

rounded-tr-xl border-top-right-radius: 0.75rem; 10px

209
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
rounded-br-xl border-bottom-right-radius: 0.75rem; 10px

rounded-bl-xl border-bottom-left-radius: 0.75rem; 10px

rounded-tl-2xl border-top-left-radius: 1rem; 12px

rounded-tr-2xl border-top-right-radius: 1rem; 12px

rounded-br-2xl border-bottom-right-radius: 1rem; 12px

rounded-bl-2xl border-bottom-left-radius: 1rem; 12px

rounded-tl-3xl border-top-left-radius: 1.5rem; 16px

rounded-tr-3xl border-top-right-radius: 1.5rem; 16px

rounded-br-3xl border-bottom-right-radius: 1.5rem; 16px

rounded-bl-3xl border-bottom-left-radius: 1.5rem; 16px

rounded-tl-full border-top-left-radius: 9999px;

rounded-tr-full border-top-right-radius: 9999px;

rounded-br-full border-bottom-right-radius: 9999px;

rounded-bl-full border-bottom-left-radius: 9999px;

210
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
Border Width
Sets width for borders in increments of 1px.

border border-width: 1px;

border-0 border-width: 0;

border-2 border-width: 2px;

border-4 border-width: 4px;

border-8 border-width: 8px;

border-t border-top-width: 1px;

border-t-0 border-top-width: 0;

border-t-2 border-top-width: 2px;

border-t-4 border-top-width: 4px;

border-t-8 border-top-width: 8px;

border-r border-right-width: 1px;

border-r-0 border-right-width: 0;

border-r-2 border-right-width: 2px;

border-r-4 border-right-width: 4px;

border-r-8 border-right-width: 8px;

border-b border-bottom-width: 1px;

border-b-0 border-bottom-width: 0;

border-b-2 border-bottom-width: 2px;

border-b-4 border-bottom-width: 4px;

border-b-8 border-bottom-width: 8px;

211
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
border-l border-left-width: 1px;

border-l-0 border-left-width: 0;

border-l-2 border-left-width: 2px;

border-l-4 border-left-width: 4px;

border-l-8 border-left-width: 8px;

212
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
Border Color
Sets color for borders.

border-transparent border-color: transparent;

border-current border-color: currentColor;

border-black border-color: #000000;

border-white border-color: #ffffff;

border-gray-50 border-color: #F9FAFB;

border-gray-100 border-color: #F3F4F6;

border-gray-200 border-color: #E5E7EB;

border-gray-300 border-color: #D1D5DB;

border-gray-400 border-color: #9CA3AF;

border-gray-500 border-color: #6B7280;

border-gray-600 border-color: #4B5563;

border-gray-700 border-color: #374151;

border-gray-800 border-color: #1F2937;

border-gray-900 border-color: #111827;

border-red-50 border-color: #FEF2F2;

border-red-100 border-color: #FEE2E2;

border-red-200 border-color: #FECACA;

border-red-300 border-color: #FCA5A5;

border-red-400 border-color: #F87171;

border-red-500 border-color: #EF4444;

213
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
border-red-600 border-color: #DC2626;

border-red-700 border-color: #B91C1C;

border-red-800 border-color: #991B1B;

border-red-900 border-color: #7F1D1D;

border-yellow-50 border-color: #FFFBEB;

border-yellow-100 border-color: #FEF3C7;

border-yellow-200 border-color: #FDE68A;

border-yellow-300 border-color: #FCD34D;

border-yellow-400 border-color: #FBBF24;

border-yellow-500 border-color: #F59E0B;

border-yellow-600 border-color: #D97706;

border-yellow-700 border-color: #B45309;

border-yellow-800 border-color: #92400E;

border-yellow-900 border-color: #78350F;

border-green-50 border-color: #ECFDF5;

border-green-100 border-color: #D1FAE5;

border-green-200 border-color: #A7F3D0;

border-green-300 border-color: #6EE7B7;

border-green-400 border-color: #34D399;

border-green-500 border-color: #10B981;

border-green-600 border-color: #059669;

border-green-700 border-color: #047857;

214
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
border-green-800 border-color: #065F46;

border-green-900 border-color: #064E3B;

border-blue-50 border-color: #EFF6FF;

border-blue-100 border-color: #DBEAFE;

border-blue-200 border-color: #BFDBFE;

border-blue-300 border-color: #93C5FD;

border-blue-400 border-color: #60A5FA;

border-blue-500 border-color: #3B82F6;

border-blue-600 border-color: #2563EB;

border-blue-700 border-color: #1D4ED8;

border-blue-800 border-color: #1E40AF;

border-blue-900 border-color: #1E3A8A;

border-indigo-50 border-color: #EEF2FF;

border-indigo-100 border-color: #E0E7FF;

border-indigo-200 border-color: #C7D2FE;

border-indigo-300 border-color: #A5B4FC;

border-indigo-400 border-color: #818CF8;

border-indigo-500 border-color: #6366F1;

border-indigo-600 border-color: #4F46E5;

border-indigo-700 border-color: #4338CA;

border-indigo-800 border-color: #3730A3;

border-indigo-900 border-color: #312E81;

215
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
border-purple-50 border-color: #F5F3FF;

border-purple-100 border-color: #EDE9FE;

border-purple-200 border-color: #DDD6FE;

border-purple-300 border-color: #C4B5FD;

border-purple-400 border-color: #A78BFA;

border-purple-500 border-color: #8B5CF6;

border-purple-600 border-color: #7C3AED;

border-purple-700 border-color: #6D28D9;

border-purple-800 border-color: #5B21B6;

border-purple-900 border-color: #4C1D95;

border-pink-50 border-color: #FDF2F8;

border-pink-100 border-color: #FCE7F3;

border-pink-200 border-color: #FBCFE8;

border-pink-300 border-color: #F9A8D4;

border-pink-400 border-color: #F472B6;

border-pink-500 border-color: #EC4899;

border-pink-600 border-color: #DB2777;

border-pink-700 border-color: #BE185D;

border-pink-800 border-color: #9D174D;

border-pink-900 border-color: #831843;

216
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
Border Opacity
Sets opacity for borders.

border-opacity-0 border-opacity: 0;

border-opacity-5 border-opacity: 0.05;

border-opacity-10 border-opacity: 0.1;

border-opacity-20 border-opacity: 0.2;

border-opacity-25 border-opacity: 0.25;

border-opacity-30 border-opacity: 0.3;

border-opacity-40 border-opacity: 0.4;

border-opacity-50 border-opacity: 0.5;

border-opacity-60 border-opacity: 0.6;

border-opacity-70 border-opacity: 0.7;

border-opacity-75 border-opacity: 0.75;

border-opacity-80 border-opacity: 0.8;

border-opacity-90 border-opacity: 0.9;

border-opacity-100 border-opacity: 1;

217
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
Border Style
Sets style for borders.

border-solid border-style: solid;

border-dashed border-style: dashed;

border-dotted border-style: dotted;

border-double border-style: double;

border-hidden border-style: hidden;

border-none border-style: none;

218
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
Divide Width
Controls the border width between elements.

divide-x-0 border-left-width: 0;

divide-x-2 border-left-width: 2px;

divide-x-4 border-left-width: 4px;

divide-x-8 border-left-width: 8px;

divide-x border-left-width: 1px;

divide-y-0 border-top-width: 0;

divide-y-2 border-top-width: 2px;

divide-y-4 border-top-width: 4px;

divide-y-8 border-top-width: 8px;

divide-y border-top-width: 1px;

divide-x-reverse --divide-x-reverse: 1

divide-y-reverse --divide-y-reverse: 1

219
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
Divide Color
Controls the border color between elements.

divide-transparent border-color: transparent;

divide-current border-color: currentColor;

divide-black border-color: #000000;

divide-white border-color: #ffffff;

divide-gray-50 border-color: #F9FAFB;

divide-gray-100 border-color: #F3F4F6;

divide-gray-200 border-color: #E5E7EB;

divide-gray-300 border-color: #D1D5DB;

divide-gray-400 border-color: #9CA3AF;

divide-gray-500 border-color: #6B7280;

divide-gray-600 border-color: #4B5563;

divide-gray-700 border-color: #374151;

divide-gray-800 border-color: #1F2937;

divide-gray-900 border-color: #111827;

divide-red-50 border-color: #FEF2F2;

divide-red-100 border-color: #FEE2E2;

divide-red-200 border-color: #FECACA;

divide-red-300 border-color: #FCA5A5;

divide-red-400 border-color: #F87171;

divide-red-500 border-color: #EF4444;

220
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
divide-red-600 border-color: #DC2626;

divide-red-700 border-color: #B91C1C;

divide-red-800 border-color: #991B1B;

divide-red-900 border-color: #7F1D1D;

divide-yellow-50 border-color: #FFFBEB;

divide-yellow-100 border-color: #FEF3C7;

divide-yellow-200 border-color: #FDE68A;

divide-yellow-300 border-color: #FCD34D;

divide-yellow-400 border-color: #FBBF24;

divide-yellow-500 border-color: #F59E0B;

divide-yellow-600 border-color: #D97706;

divide-yellow-700 border-color: #B45309;

divide-yellow-800 border-color: #92400E;

divide-yellow-900 border-color: #78350F;

divide-green-50 border-color: #ECFDF5;

divide-green-100 border-color: #D1FAE5;

divide-green-200 border-color: #A7F3D0;

divide-green-300 border-color: #6EE7B7;

divide-green-400 border-color: #34D399;

divide-green-500 border-color: #10B981;

divide-green-600 border-color: #059669;

divide-green-700 border-color: #047857;

221
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
divide-green-800 border-color: #065F46;

divide-green-900 border-color: #064E3B;

divide-blue-50 border-color: #EFF6FF;

divide-blue-100 border-color: #DBEAFE;

divide-blue-200 border-color: #BFDBFE;

divide-blue-300 border-color: #93C5FD;

divide-blue-400 border-color: #60A5FA;

divide-blue-500 border-color: #3B82F6;

divide-blue-600 border-color: #2563EB;

divide-blue-700 border-color: #1D4ED8;

divide-blue-800 border-color: #1E40AF;

divide-blue-900 border-color: #1E3A8A;

divide-indigo-50 border-color: #EEF2FF;

divide-indigo-100 border-color: #E0E7FF;

divide-indigo-200 border-color: #C7D2FE;

divide-indigo-300 border-color: #A5B4FC;

divide-indigo-400 border-color: #818CF8;

divide-indigo-500 border-color: #6366F1;

divide-indigo-600 border-color: #4F46E5;

divide-indigo-700 border-color: #4338CA;

divide-indigo-800 border-color: #3730A3;

divide-indigo-900 border-color: #312E81;

222
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
divide-purple-50 border-color: #F5F3FF;

divide-purple-100 border-color: #EDE9FE;

divide-purple-200 border-color: #DDD6FE;

divide-purple-300 border-color: #C4B5FD;

divide-purple-400 border-color: #A78BFA;

divide-purple-500 border-color: #8B5CF6;

divide-purple-600 border-color: #7C3AED;

divide-purple-700 border-color: #6D28D9;

divide-purple-800 border-color: #5B21B6;

divide-purple-900 border-color: #4C1D95;

divide-pink-50 border-color: #FDF2F8;

divide-pink-100 border-color: #FCE7F3;

divide-pink-200 border-color: #FBCFE8;

divide-pink-300 border-color: #F9A8D4;

divide-pink-400 border-color: #F472B6;

divide-pink-500 border-color: #EC4899;

divide-pink-600 border-color: #DB2777;

divide-pink-700 border-color: #BE185D;

divide-pink-800 border-color: #9D174D;

divide-pink-900 border-color: #831843;

223
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
Divide Opacity
Controls the border opacity between elements.

divide-opacity-0 --divide-opacity: 0;

divide-opacity-5 --divide-opacity: 0.05;

divide-opacity-10 --divide-opacity: 0.1;

divide-opacity-20 --divide-opacity: 0.2;

divide-opacity-25 --divide-opacity: 0.25;

divide-opacity-30 --divide-opacity: 0.3;

divide-opacity-40 --divide-opacity: 0.4;

divide-opacity-50 --divide-opacity: 0.5;

divide-opacity-60 --divide-opacity: 0.6;

divide-opacity-70 --divide-opacity: 0.7;

divide-opacity-75 --divide-opacity: 0.75;

divide-opacity-80 --divide-opacity: 0.8;

divide-opacity-90 --divide-opacity: 0.9;

divide-opacity-100 --divide-opacity: 1;

224
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
Divide Style
Sets style for divides.

divide-solid border-style: solid;

divide-dashed border-style: dashed;

divide-dotted border-style: dotted;

divide-double border-style: double;

divide-none border-style: none;

Outline Width
Utilities for controlling the width of an element’s outline.

outline-0 outline-width: 0px;

outline-1 outline-width: 1px;

outline-2 outline-width: 2px;

outline-4 outline-width: 4px;

outline-8 outline-width: 8px;

225
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
Outline Style
Utilities for controlling the style of an element’s outline.

outline-solid outline-style: solid;

outline-dashed outline-style: dashed;

outline-dotted outline-style: dotted;

outline-double outline-style: double;

outline-hidden outline-style: hidden;

outline-none outline-style: none;

Outline Offset
Utilities for controlling the Offset of an element’s outline.

outline-offset-0 outline-offset: 0px;

outline-offset-1 outline-offset: 1px;

outline-offset-2 outline-offset: 2px;

outline-offset-4 outline-offset: 4px;

outline-offset-8 outline-offset: 8px;

226
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
Ring Width
Utilities for creating outline rings with box-shadows.

ring-0 box-shadow: var(--tw-ring-inset) 0 0 0 calc

(0px + var(--tw-ring-offset-width)) var
(--tw-ring-color);

ring-1 box-shadow: var(--tw-ring-inset) 0 0 0 calc

(1px + var(--tw-ring-offset-width)) var
(--tw-ring-color);

ring-2 box-shadow: var(--tw-ring-inset) 0 0 0 calc

(2px + var(--tw-ring-offset-width)) var
(--tw-ring-color);

ring-4 box-shadow: var(--tw-ring-inset) 0 0 0 calc

(4px + var(--tw-ring-offset-width)) var
(--tw-ring-color);

ring-8 box-shadow: var(--tw-ring-inset) 0 0 0 calc

(8px + var(--tw-ring-offset-width)) var
(--tw-ring-color);

ring box-shadow: var(--tw-ring-inset) 0 0 0 calc

(3px + var(--tw-ring-offset-width)) var
(--tw-ring-color);

ring-inset --tw-ring-inset: inset;

227
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
Ring Color
Utilities for setting the color of outline rings.

ring-transparent --ring-color: transparent;

ring-current --ring-color: currentColor;

ring-black --ring-color: #000000;

ring-white --ring-color: #ffffff;

ring-gray-50 --ring-color: #F9FAFB;

ring-gray-100 --ring-color: #F3F4F6;

ring-gray-200 --ring-color: #E5E7EB;

ring-gray-300 --ring-color: #D1D5DB;

ring-gray-400 --ring-color: #9CA3AF;

ring-gray-500 --ring-color: #6B7280;

ring-gray-600 --ring-color: #4B5563;

ring-gray-700 --ring-color: #374151;

ring-gray-800 --ring-color: #1F2937;

ring-gray-900 --ring-color: #111827;

ring-red-50 --ring-color: #FEF2F2;

ring-red-100 --ring-color: #FEE2E2;

ring-red-200 --ring-color: #FECACA;

ring-red-300 --ring-color: #FCA5A5;

ring-red-400 --ring-color: #F87171;

ring-red-500 --ring-color: #EF4444;

228
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
ring-red-600 --ring-color: #DC2626;

ring-red-700 --ring-color: #B91C1C;

ring-red-800 --ring-color: #991B1B;

ring-red-900 --ring-color: #7F1D1D;

ring-yellow-50 --ring-color: #FFFBEB;

ring-yellow-100 --ring-color: #FEF3C7;

ring-yellow-200 --ring-color: #FDE68A;

ring-yellow-300 --ring-color: #FCD34D;

ring-yellow-400 --ring-color: #FBBF24;

ring-yellow-500 --ring-color: #F59E0B;

ring-yellow-600 --ring-color: #D97706;

ring-yellow-700 --ring-color: #B45309;

ring-yellow-800 --ring-color: #92400E;

ring-yellow-900 --ring-color: #78350F;

ring-green-50 --ring-color: #ECFDF5;

ring-green-100 --ring-color: #D1FAE5;

ring-green-200 --ring-color: #A7F3D0;

ring-green-300 --ring-color: #6EE7B7;

ring-green-400 --ring-color: #34D399;

ring-green-500 --ring-color: #10B981;

ring-green-600 --ring-color: #059669;

ring-green-700 --ring-color: #047857;

229
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
ring-green-800 --ring-color: #065F46;

ring-green-900 --ring-color: #064E3B;

ring-blue-50 --ring-color: #EFF6FF;

ring-blue-100 --ring-color: #DBEAFE;

ring-blue-200 --ring-color: #BFDBFE;

ring-blue-300 --ring-color: #93C5FD;

ring-blue-400 --ring-color: #60A5FA;

ring-blue-500 --ring-color: #3B82F6;

ring-blue-600 --ring-color: #2563EB;

ring-blue-700 --ring-color: #1D4ED8;

ring-blue-800 --ring-color: #1E40AF;

ring-blue-900 --ring-color: #1E3A8A;

ring-indigo-50 --ring-color: #EEF2FF;

ring-indigo-100 --ring-color: #E0E7FF;

ring-indigo-200 --ring-color: #C7D2FE;

ring-indigo-300 --ring-color: #A5B4FC;

ring-indigo-400 --ring-color: #818CF8;

ring-indigo-500 --ring-color: #6366F1;

ring-indigo-600 --ring-color: #4F46E5;

ring-indigo-700 --ring-color: #4338CA;

ring-indigo-800 --ring-color: #3730A3;

ring-indigo-900 --ring-color: #312E81;

230
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
ring-purple-50 --ring-color: #F5F3FF;

ring-purple-100 --ring-color: #EDE9FE;

ring-purple-200 --ring-color: #DDD6FE;

ring-purple-300 --ring-color: #C4B5FD;

ring-purple-400 --ring-color: #A78BFA;

ring-purple-500 --ring-color: #8B5CF6;

ring-purple-600 --ring-color: #7C3AED;

ring-purple-700 --ring-color: #6D28D9;

ring-purple-800 --ring-color: #5B21B6;

ring-purple-900 --ring-color: #4C1D95;

ring-pink-50 --ring-color: #FDF2F8;

ring-pink-100 --ring-color: #FCE7F3;

ring-pink-200 --ring-color: #FBCFE8;

ring-pink-300 --ring-color: #F9A8D4;

ring-pink-400 --ring-color: #F472B6;

ring-pink-500 --ring-color: #EC4899;

ring-pink-600 --ring-color: #DB2777;

ring-pink-700 --ring-color: #BE185D;

ring-pink-800 --ring-color: #9D174D;

ring-pink-900 --ring-color: #831843;

231
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
Ring Opacity
Utilities for setting the opacity of outline rings.

ring-opacity-0 --ring-opacity: 0;

ring-opacity-5 --ring-opacity: 0.05;

ring-opacity-10 --ring-opacity: 0.1;

ring-opacity-20 --ring-opacity: 0.2;

ring-opacity-25 --ring-opacity: 0.25;

ring-opacity-30 --ring-opacity: 0.3;

ring-opacity-40 --ring-opacity: 0.4;

ring-opacity-50 --ring-opacity: 0.5;

ring-opacity-60 --ring-opacity: 0.6;

ring-opacity-70 --ring-opacity: 0.7;

ring-opacity-75 --ring-opacity: 0.75;

ring-opacity-80 --ring-opacity: 0.8;

ring-opacity-90 --ring-opacity: 0.9;

ring-opacity-100 --ring-opacity: 1;

232
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
Ring Offset Width
Utilities for simulating an offset when adding outline rings.

ring-offset-0 --ring-offset-width: 0px; box-shadow: 0 0 0

var(--ring-offset-width) var
(--ring-offset-color), var(--ring-shadow);

ring-offset-1 --ring-offset-width: 1px; box-shadow: 0 0 0

var(--ring-offset-width) var
(--ring-offset-color), var(--ring-shadow);

ring-offset-2 --ring-offset-width: 2px; box-shadow: 0 0 0

var(--ring-offset-width) var
(--ring-offset-color), var(--ring-shadow);

ring-offset-4 --ring-offset-width: 4px; box-shadow: 0 0 0

var(--ring-offset-width) var
(--ring-offset-color), var(--ring-shadow);

ring-offset-8 --ring-offset-width: 8px; box-shadow: 0 0 0

var(--ring-offset-width) var
(--ring-offset-color), var(--ring-shadow);

233
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
Ring Offset Color
Utilities for setting the color of outline rings offset.

ring-offset-transparent --ring-offset-color: transparent;

ring-offset-current --ring-offset-color: currentColor;

ring-offset-black --ring-offset-color: #000000;

ring-offset-white --ring-offset-color: #ffffff;

ring-offset-gray-50 --ring-offset-color: #F9FAFB;

ring-offset-gray-100 --ring-offset-color: #F3F4F6;

ring-offset-gray-200 --ring-offset-color: #E5E7EB;

ring-offset-gray-300 --ring-offset-color: #D1D5DB;

ring-offset-gray-400 --ring-offset-color: #9CA3AF;

ring-offset-gray-500 --ring-offset-color: #6B7280;

ring-offset-gray-600 --ring-offset-color: #4B5563;

ring-offset-gray-700 --ring-offset-color: #374151;

ring-offset-gray-800 --ring-offset-color: #1F2937;

ring-offset-gray-900 --ring-offset-color: #111827;

ring-offset-red-50 --ring-offset-color: #FEF2F2;

ring-offset-red-100 --ring-offset-color: #FEE2E2;

ring-offset-red-200 --ring-offset-color: #FECACA;

ring-offset-red-300 --ring-offset-color: #FCA5A5;

ring-offset-red-400 --ring-offset-color: #F87171;

ring-offset-red-500 --ring-offset-color: #EF4444;

234
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
ring-offset-red-600 --ring-offset-color: #DC2626;

ring-offset-red-700 --ring-offset-color: #B91C1C;

ring-offset-red-800 --ring-offset-color: #991B1B;

ring-offset-red-900 --ring-offset-color: #7F1D1D;

ring-offset-yellow-50 --ring-offset-color: #FFFBEB;

ring-offset-yellow-100 --ring-offset-color: #FEF3C7;

ring-offset-yellow-200 --ring-offset-color: #FDE68A;

ring-offset-yellow-300 --ring-offset-color: #FCD34D;

ring-offset-yellow-400 --ring-offset-color: #FBBF24;

ring-offset-yellow-500 --ring-offset-color: #F59E0B;

ring-offset-yellow-600 --ring-offset-color: #D97706;

ring-offset-yellow-700 --ring-offset-color: #B45309;

ring-offset-yellow-800 --ring-offset-color: #92400E;

ring-offset-yellow-900 --ring-offset-color: #78350F;

ring-offset-green-50 --ring-offset-color: #ECFDF5;

ring-offset-green-100 --ring-offset-color: #D1FAE5;

ring-offset-green-200 --ring-offset-color: #A7F3D0;

ring-offset-green-300 --ring-offset-color: #6EE7B7;

ring-offset-green-400 --ring-offset-color: #34D399;

ring-offset-green-500 --ring-offset-color: #10B981;

ring-offset-green-600 --ring-offset-color: #059669;

ring-offset-green-700 --ring-offset-color: #047857;

235
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
ring-offset-green-800 --ring-offset-color: #065F46;

ring-offset-green-900 --ring-offset-color: #064E3B;

ring-offset-blue-50 --ring-offset-color: #EFF6FF;

ring-offset-blue-100 --ring-offset-color: #DBEAFE;

ring-offset-blue-200 --ring-offset-color: #BFDBFE;

ring-offset-blue-300 --ring-offset-color: #93C5FD;

ring-offset-blue-400 --ring-offset-color: #60A5FA;

ring-offset-blue-500 --ring-offset-color: #3B82F6;

ring-offset-blue-600 --ring-offset-color: #2563EB;

ring-offset-blue-700 --ring-offset-color: #1D4ED8;

ring-offset-blue-800 --ring-offset-color: #1E40AF;

ring-offset-blue-900 --ring-offset-color: #1E3A8A;

ring-offset-indigo-50 --ring-offset-color: #EEF2FF;

ring-offset-indigo-100 --ring-offset-color: #E0E7FF;

ring-offset-indigo-200 --ring-offset-color: #C7D2FE;

ring-offset-indigo-300 --ring-offset-color: #A5B4FC;

ring-offset-indigo-400 --ring-offset-color: #818CF8;

ring-offset-indigo-500 --ring-offset-color: #6366F1;

ring-offset-indigo-600 --ring-offset-color: #4F46E5;

ring-offset-indigo-700 --ring-offset-color: #4338CA;

ring-offset-indigo-800 --ring-offset-color: #3730A3;

ring-offset-indigo-900 --ring-offset-color: #312E81;

236
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Borders
ring-offset-purple-50 --ring-offset-color: #F5F3FF;

ring-offset-purple-100 --ring-offset-color: #EDE9FE;

ring-offset-purple-200 --ring-offset-color: #DDD6FE;

ring-offset-purple-300 --ring-offset-color: #C4B5FD;

ring-offset-purple-400 --ring-offset-color: #A78BFA;

ring-offset-purple-500 --ring-offset-color: #8B5CF6;

ring-offset-purple-600 --ring-offset-color: #7C3AED;

ring-offset-purple-700 --ring-offset-color: #6D28D9;

ring-offset-purple-800 --ring-offset-color: #5B21B6;

ring-offset-purple-900 --ring-offset-color: #4C1D95;

ring-offset-pink-50 --ring-offset-color: #FDF2F8;

ring-offset-pink-100 --ring-offset-color: #FCE7F3;

ring-offset-pink-200 --ring-offset-color: #FBCFE8;

ring-offset-pink-300 --ring-offset-color: #F9A8D4;

ring-offset-pink-400 --ring-offset-color: #F472B6;

ring-offset-pink-500 --ring-offset-color: #EC4899;

ring-offset-pink-600 --ring-offset-color: #DB2777;

ring-offset-pink-700 --ring-offset-color: #BE185D;

ring-offset-pink-800 --ring-offset-color: #9D174D;

ring-offset-pink-900 --ring-offset-color: #831843;

237
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Transitions & Animation

Transitions & Animation
Transition Property
Sets the CSS properties affected by transition animations.

transition transition-property: background-color,

border-color, color, fill, stroke, opacity,
box-shadow, transform;

transition-none transition-property: none;

transition-all transition-property: all;

transition-colors transition-property: background-color,

border-color, color, fill, stroke;

transition-opacity transition-property: opacity;

transition-shadow transition-property: box-shadow;

transition-transform transition-property: transform;

238
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Transitions & Animation

Transition Duration
Sets the length of time for a transition animations to complete.

duration-75 transition-duration: 75ms;

duration-100 transition-duration: 100ms;

duration-150 transition-duration: 150ms;

duration-200 transition-duration: 200ms;

duration-300 transition-duration: 300ms;

duration-500 transition-duration: 500ms;

duration-700 transition-duration: 700ms;

duration-1000 transition-duration: 1000ms;

Transition Timing Function

Sets the easing function of transition animations.

ease-linear transition-timing-function: linear;

ease-in transition-timing-function: cubic-bezier

(0.4, 0, 1, 1);

ease-out transition-timing-function: cubic-bezier

(0, 0, 0.2, 1);

ease-in-out transition-timing-function: cubic-bezier

(0.4, 0, 0.2, 1);

239
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Transitions & Animation

Transition Delay
Sets the CSS properties affected by transition delay.

delay-75 transition-delay: 75ms;

delay-100 transition-delay: 100ms;

delay-150 transition-delay: 150ms;

delay-200 transition-delay: 200ms;

delay-300 transition-delay: 300ms;

delay-500 transition-delay: 500ms;

delay-700 transition-delay: 700ms;

delay-1000 transition-delay: 1000ms;

240
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Transitions & Animation

Animation
Utilities for animating elements with CSS animations.

animate-none animation: none;

animate-spin animation: spin 1s linear infinite;

@keyframes spin { from { transform: rotate
(0deg); } to { transform: rotate(360deg); } }

animate-ping animation: ping 1s cubic-bezier(0, 0, 0.2, 1)

infinite; @keyframes ping { 75%, 100% {
transform: scale(2); opacity: 0; } }

animate-pulse animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1)

infinite; @keyframes pulse { 0%, 100% { opacity:
1; } 50% { opacity: .5; } }

animate-bounce animation: animation: bounce 1s infinite;

@keyframes bounce { 0%, 100% { transform:
translateY(-25%); animationTimingFunction:
cubic-bezier(0.8, 0, 1, 1); } 50% { transform:
translateY(0); animationTimingFunction:
cubic-bezier(0, 0, 0.2, 1); } }

241
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course

Tables
Tables
Border Collapse
Collapse or separate table borders.

border-collapse border-collapse: collapse;

border-separate border-collapse: separate;

Table Layout
Defines the algorithm used to lay out table cells, rows, and columns.

table-auto table-layout: auto;

table-fixed table-layout: fixed;

242
Join Zero to Full Stack Hero & Learn to Code Today: https://www.papareact.com/course errors

Tables

Join Zero to Full Stack Hero to learn more,

visit www.papareact.com

Sonny Sangha ssssangha

Join Zero to Full Stack Hero to learn more, visit www.papareact.com 71

243