You’re offline, but every Efiwe page you’ve loaded — including this one — is still available.

Tailwind Dictionary

A beginner-friendly Tailwind CSS reference that clearly explains each utility class and its CSS equivalent, includes alphabetical and category filters for easy lookup, and to help learners build faster with Tailwind.

Learn Tailwind
Utility ClassCSS Equivalent
absolute
position: absolute;
accent-blue-500
accent-color: #3b82f6;

Introduced in:
Tailwind → Level 4 → Challenge 124

bg-black
background-color: rgb(0 0 0 / 1);

Introduced in:
Tailwind → Level 5 → Challenge 142

bg-blue-400
background-color: rgb(96 165 250 / 1);
bg-blue-500
background-color: rgb(59 130 246 / 1);

Introduced in:
Tailwind → Level 1 → Challenge 25

bg-blue-600
background-color: rgb(37 99 235 / 1);
bg-blue-800
background-color: rgb(30 64 175 / 1);
bg-gradient-to-br
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));

Introduced in:
Tailwind → Level 1 → Challenge 11

bg-gradient-to-r
background-image: linear-gradient(to right, var(--tw-gradient-stops));

Introduced in:
Tailwind → Level 1 → Challenge 22

bg-gray-100
background-color: rgb(243 244 246 / 1);

Introduced in:
Tailwind → Level 2 → Challenge 57

bg-gray-200
background-color: rgb(229 231 235 / 1);
bg-gray-300
background-color: rgb(209 213 219 / 1);

Introduced in:
Tailwind → Level 3 → Challenge 80

bg-gray-50
background-color: rgb(249 250 251 / 1);
bg-gray-500
background-color: rgb(107 114 128 / 1);
bg-gray-800
background-color: rgb(31 41 55 / 1);

Introduced in:
Tailwind → Level 3 → Challenge 78

bg-green-500
background-color: rgb(22 163 74 / 1);

Introduced in:
Tailwind → Level 3 → Challenge 66

bg-opacity-50
--tw-bg-opacity: 0.5;

Introduced in:
Tailwind → Level 2 → Challenge 40

bg-orange-500
background-color: rgb(249 115 22 / 1);
bg-purple-500
background-color: rgb(168 85 247 / 1);

Introduced in:
Tailwind → Level 3 → Challenge 69

bg-red-500
background-color: rgb(239 68 68 / 1);

Introduced in:
Tailwind → Level 3 → Challenge 67

bg-teal-500
background-color: rgb(20 184 166 / 1);
bg-white
background-color: rgb(255 255 255 / 1);

Introduced in:
Tailwind → Level 1 → Challenge 12

bg-yellow-500
background-color: rgb(234 179 8 / 1);

Introduced in:
Tailwind → Level 3 → Challenge 68

block
display: block;

Introduced in:
Tailwind → Level 4 → Challenge 115

border
border-width: 1px;

Introduced in:
Tailwind → Level 1 → Challenge 32

border-b
border-bottom-width: 1px;
border-b-8
border-bottom-width: 8px;
border-b-black
border-bottom-color: rgb(0 0 0 / 1);
border-b-white
border-bottom-color: rgb(255 255 255 / 1);
border-gray-200
border-color: rgb(229 231 235 / 1);
border-gray-300
border-color: rgb(209 213 219 / 1);

Introduced in:
Tailwind → Level 1 → Challenge 32

border-gray-400
border-color: rgb(156 163 175 / 1);
border-gray-700
border-color: rgb(55 65 81 / 1);

Introduced in:
Tailwind → Level 5 → Challenge 153

border-l-8
border-left-width: 8px;
border-l-transparent
border-left-color: transparent;
border-r-8
border-right-width: 8px;
border-r-transparent
border-right-color: transparent;
border-t
border-top-width: 1px;

Introduced in:
Tailwind → Level 5 → Challenge 153

border-t-8
border-top-width: 8px;
border-t-black
border-top-color: rgb(0 0 0 / 1);
bottom-[-8px]
bottom: -8px;
container
width: 100%;
content-start
align-content: start;
dark:bg-gray-600
background-color: rgb(75 85 99 / 1);
(dark mode)
dark:block
display: block;
(dark mode)
dark:hover:bg-gray-700
background-color: rgb(55 65 81 / 1);
(dark mode, on hover)
dark:text-white
color: rgb(255 255 255 / 1);
(dark mode)
disabled:bg-gray-300
background-color: rgb(209 213 219 / 1);

Introduced in:
Tailwind → Level 3 → Challenge 80

disabled:cursor-not-allowed
cursor: not-allowed;

Introduced in:
Tailwind → Level 3 → Challenge 80

duration-300
transition-duration: 300ms;

Introduced in:
Tailwind → Level 1 → Challenge 29

ease-in-out
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
fixed
position: fixed;

Introduced in:
Tailwind → Level 1 → Challenge 12

flex
display: flex;

Introduced in:
Tailwind → Level 1 → Challenge 13

flex-1
flex: 1 1 0%;
flex-col
flex-direction: column;

Introduced in:
Tailwind → Level 5 → Challenge 144

flex-none
flex: none;
flex-nowrap
flex-wrap: nowrap;
flex-wrap
flex-wrap: wrap;

Introduced in:
Tailwind → Level 1 → Challenge 28

focus-visible:ring-2
box-shadow: 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);

Introduced in:
Tailwind → Level 1 → Challenge 22

focus-visible:ring-blue-400
--tw-ring-color: rgb(96 165 250 / 1);

Introduced in:
Tailwind → Level 1 → Challenge 22

focus-visible:ring-blue-500
--tw-ring-color: rgb(59 130 246 / 1);

Introduced in:
Tailwind → Level 1 → Challenge 29

focus-visible:ring-blue-800
--tw-ring-color: rgb(30 64 175 / 1);
focus-visible:ring-gray-500
--tw-ring-color: rgb(107 114 128 / 1);

Introduced in:
Tailwind → Level 1 → Challenge 32

focus-visible:ring-green-400
--tw-ring-color: rgb(74 222 128 / 1);

Introduced in:
Tailwind → Level 3 → Challenge 74

focus-visible:ring-green-500
--tw-ring-color: rgb(22 163 74 / 1);

Introduced in:
Tailwind → Level 3 → Challenge 66

focus-visible:ring-orange-500
--tw-ring-color: rgb(249 115 22 / 1);
focus-visible:ring-purple-500
--tw-ring-color: rgb(168 85 247 / 1);

Introduced in:
Tailwind → Level 3 → Challenge 69

focus-visible:ring-red-500
--tw-ring-color: rgb(239 68 68 / 1);

Introduced in:
Tailwind → Level 3 → Challenge 67

focus-visible:ring-teal-500
--tw-ring-color: rgb(20 184 166 / 1);
focus-visible:ring-yellow-500
--tw-ring-color: rgb(234 179 8 / 1);

Introduced in:
Tailwind → Level 3 → Challenge 68

focus:outline-none
outline: 2px solid transparent;
outline-offset: 2px;

Introduced in:
Tailwind → Level 1 → Challenge 22

font-bold
font-weight: 700;

Introduced in:
Tailwind → Level 1 → Challenge 29

font-extrabold
font-weight: 800;

Introduced in:
Tailwind → Level 1 → Challenge 14

font-medium
font-weight: 500;

Introduced in:
Tailwind → Level 1 → Challenge 17

font-sans
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-semibold
font-weight: 600;

Introduced in:
Tailwind → Level 1 → Challenge 22

from-black
--tw-gradient-from: #000;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

Introduced in:
Tailwind → Level 2 → Challenge 51

from-blue-500
--tw-gradient-from: #3b82f6;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

Introduced in:
Tailwind → Level 1 → Challenge 22

from-gray-50
--tw-gradient-from: #f9fafb;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

Introduced in:
Tailwind → Level 1 → Challenge 11

from-green-500
--tw-gradient-from: #16A34A;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

Introduced in:
Tailwind → Level 2 → Challenge 45

gap-2
gap: 0.5rem;

Introduced in:
Tailwind → Level 4 → Challenge 123

gap-4
gap: 1rem;

Introduced in:
Tailwind → Level 1 → Challenge 28

gap-5
gap: 1.25rem;
gap-6
gap: 1.5rem;

Introduced in:
Tailwind → Level 1 → Challenge 16

gap-8
gap: 2rem;

Introduced in:
Tailwind → Level 5 → Challenge 129

grid
display: grid;

Introduced in:
Tailwind → Level 2 → Challenge 38

grid-cols-1
grid-template-columns: repeat(1, minmax(0, 1fr));

Introduced in:
Tailwind → Level 2 → Challenge 38

grid-cols-2
grid-template-columns: repeat(2, minmax(0, 1fr));
grow
flex-grow: 1;
h-0
height: 0;
h-12
height: 3rem;
h-16
height: 4rem;

Introduced in:
Tailwind → Level 2 → Challenge 40

h-40
height: 10rem;

Introduced in:
Tailwind → Level 3 → Challenge 88

h-6
height: 1.5rem;

Introduced in:
Tailwind → Level 1 → Challenge 30

h-96
height: 24rem;
h-full
height: 100%;
hidden
display: none;

Introduced in:
Tailwind → Level 1 → Challenge 15

hover:-translate-y-1
--tw-translate-y: -0.25rem;
(on hover)

Introduced in:
Tailwind → Level 1 → Challenge 29

hover:bg-blue-500
background-color: rgb(59 130 246 / 1);
(on hover)
hover:bg-blue-600
background-color: rgb(37 99 235 / 1);
(on hover)

Introduced in:
Tailwind → Level 3 → Challenge 65

hover:bg-blue-700
background-color: rgb(29 78 216 / 1);
(on hover)
hover:bg-blue-900
background-color: rgb(30 58 138 / 1);
(on hover)
hover:bg-gray-100
background-color: rgb(243 244 246 / 1);
(on hover)

Introduced in:
Tailwind → Level 1 → Challenge 32

hover:bg-gray-300
background-color: rgb(209 213 219 / 1);
(on hover)
hover:bg-gray-400
background-color: rgb(156 163 175 / 1);
(on hover)
hover:bg-gray-600
background-color: rgb(75 85 99 / 1);
(on hover)

Introduced in:
Tailwind → Level 3 → Challenge 78

hover:bg-green-600
background-color: rgb(22 163 74 / 1);
(on hover)

Introduced in:
Tailwind → Level 3 → Challenge 66

hover:bg-orange-600
background-color: rgb(234 88 12 / 1);
(on hover)
hover:bg-purple-600
background-color: rgb(147 51 234 / 1);
(on hover)

Introduced in:
Tailwind → Level 3 → Challenge 69

hover:bg-red-600
background-color: rgb(220 38 38 / 1);
(on hover)

Introduced in:
Tailwind → Level 3 → Challenge 67

hover:bg-teal-600
background-color: rgb(13 148 136 / 1);
(on hover)
hover:bg-yellow-600
background-color: rgb(202 138 4 / 1);
(on hover)

Introduced in:
Tailwind → Level 3 → Challenge 68

hover:from-blue-600
--tw-gradient-from: #2563eb;
(on hover)

Introduced in:
Tailwind → Level 1 → Challenge 22

hover:from-green-600
--tw-gradient-from: #16a34a;
(on hover)

Introduced in:
Tailwind → Level 3 → Challenge 74

hover:scale-105
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
(on hover)

Introduced in:
Tailwind → Level 2 → Challenge 39

hover:shadow-lg
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
(on hover)

Introduced in:
Tailwind → Level 1 → Challenge 32

hover:shadow-xl
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

Introduced in:
Tailwind → Level 1 → Challenge 29

hover:text-blue-400
color: rgb(96 165 250 / 1);
(on hover)

Introduced in:
Tailwind → Level 3 → Challenge 93

hover:text-gray-800
color: rgb(31 41 55 / 1);
(on hover)

Introduced in:
Tailwind → Level 1 → Challenge 17

hover:text-green-500
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity, 1));

Introduced in:
Tailwind → Level 4 → Challenge 100

hover:to-blue-700
--tw-gradient-to: #1d4ed8;
(on hover)

Introduced in:
Tailwind → Level 1 → Challenge 22

hover:to-green-700
--tw-gradient-to: #16A34A;
(on hover)

Introduced in:
Tailwind → Level 3 → Challenge 74

inline-block
display: inline-block;

Introduced in:
Tailwind → Level 1 → Challenge 25

inline-flex
display: inline-flex;

Introduced in:
Tailwind → Level 1 → Challenge 29

inset-0
inset: 0;
italic
font-style: italic;
items-center
align-items: center;

Introduced in:
Tailwind → Level 1 → Challenge 13

items-start
align-items: flex-start;
items-stretch
align-items: stretch;
justify-between
justify-content: space-between;

Introduced in:
Tailwind → Level 1 → Challenge 13

justify-center
justify-content: center;

Introduced in:
Tailwind → Level 1 → Challenge 28

justify-end
justify-content: flex-end;
left-0
left: 0;

Introduced in:
Tailwind → Level 1 → Challenge 12

lg:grid-cols-2
grid-template-columns: repeat(2, minmax(0, 1fr));
(≥1024px)
lg:grid-cols-3
grid-template-columns: repeat(3, minmax(0, 1fr));
(≥1024px)

Introduced in:
Tailwind → Level 2 → Challenge 38

lg:grid-cols-4
grid-template-columns: repeat(4, minmax(0, 1fr));
(≥1024px)

Introduced in:
Tailwind → Level 5 → Challenge 129

lg:grid-cols-5
grid-template-columns: repeat(5, minmax(0, 1fr));
(≥1024px)
lg:p-10
padding: 2.5rem;
(≥1024px)
lg:px-8
padding-left: 2rem;
padding-right: 2rem;
(≥1024px)
list-disc
list-style-type: disc;
max-h-[80vh]
max-height: 80vh;
max-w-2xl
max-width: 42rem;

Introduced in:
Tailwind → Level 1 → Challenge 27

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

Introduced in:
Tailwind → Level 1 → Challenge 13

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

Introduced in:
Tailwind → Level 4 → Challenge 109

max-w-sm
max-width: 24rem;
mb-1
margin-bottom: 0.25rem;
mb-10
margin-bottom: 2.5rem;

Introduced in:
Tailwind → Level 2 → Challenge 35

mb-2
margin-bottom: 0.5rem;

Introduced in:
Tailwind → Level 2 → Challenge 43

mb-3
margin-bottom: 0.75rem;

Introduced in:
Tailwind → Level 3 → Challenge 90

mb-4
margin-bottom: 1rem;

Introduced in:
Tailwind → Level 2 → Challenge 36

mb-6
margin-bottom: 1.5rem;

Introduced in:
Tailwind → Level 1 → Challenge 25

mb-8
margin-bottom: 2rem;

Introduced in:
Tailwind → Level 1 → Challenge 27

md:block
display: block;
(≥768px)

Introduced in:
Tailwind → Level 1 → Challenge 15

md:hidden
display: none;
(≥768px)
md:inline
display: inline;
(≥768px)

Introduced in:
Tailwind → Level 1 → Challenge 26

ml-2
margin-left: 0.5rem;

Introduced in:
Tailwind → Level 1 → Challenge 30

mr-2
margin-right: 0.5rem;
mt-1
margin-top: 0.25rem;
mt-12
margin-top: 3rem;
mt-2
margin-top: 0.5rem;

Introduced in:
Tailwind → Level 5 → Challenge 147

mt-4
margin-top: 1rem;
mt-6
margin-top: 1.5rem;
mt-8
margin-top: 2rem;
mt-auto
margin-top: auto;
mx-auto
margin-left: auto;
margin-right: auto;

Introduced in:
Tailwind → Level 1 → Challenge 13

my-2
margin-top: 0.5rem;
margin-bottom: 0.5rem;
opacity-50
opacity: 0.5;
overflow-auto
overflow: auto;
overflow-hidden
overflow: hidden;

Introduced in:
Tailwind → Level 3 → Challenge 87

overflow-x-auto
overflow-x: auto;
overflow-y-auto
overflow-y: auto;
p-0.5
padding: 0.125rem;
p-10
padding: 2.5rem;
p-2
padding: 0.5rem;
p-3
padding: 0.75rem;
p-4
padding: 1rem;
p-6
padding: 1.5rem;

Introduced in:
Tailwind → Level 2 → Challenge 39

p-8
padding: 2rem;

Introduced in:
Tailwind → Level 2 → Challenge 62

pb-0
padding-bottom: 0;
pb-10
padding-bottom: 2.5rem;
pb-6
padding-bottom: 1.5rem;
pl-6
padding-left: 1.5rem;
pt-2
padding-top: 0.5rem;
pt-4
padding-top: 1rem;
pt-6
padding-top: 1.5rem;
pt-8
padding-top: 2rem;

Introduced in:
Tailwind → Level 1 → Challenge 24

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

Introduced in:
Tailwind → Level 3 → Challenge 90

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

Introduced in:
Tailwind → Level 1 → Challenge 25

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

Introduced in:
Tailwind → Level 1 → Challenge 13

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

Introduced in:
Tailwind → Level 1 → Challenge 29

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

Introduced in:
Tailwind → Level 3 → Challenge 90

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

Introduced in:
Tailwind → Level 1 → Challenge 25

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

Introduced in:
Tailwind → Level 2 → Challenge 33

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

Introduced in:
Tailwind → Level 1 → Challenge 22

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

Introduced in:
Tailwind → Level 1 → Challenge 23

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

Introduced in:
Tailwind → Level 1 → Challenge 13

relative
position: relative;
right-0
right: 0;

Introduced in:
Tailwind → Level 1 → Challenge 12

rounded
border-radius: 0.25rem;

Introduced in:
Tailwind → Level 4 → Challenge 124

rounded-2xl
border-radius: 1rem;

Introduced in:
Tailwind → Level 2 → Challenge 39

rounded-full
border-radius: 9999px;

Introduced in:
Tailwind → Level 1 → Challenge 25

rounded-l
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
rounded-lg
border-radius: 0.5rem;

Introduced in:
Tailwind → Level 1 → Challenge 22

rounded-r
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
rounded-sm
border-radius: 0.125rem;
rounded-tl-xl
border-top-left-radius: 0.75rem;
rounded-tr-xl
border-top-right-radius: 0.75rem;
rounded-xl
border-radius: 0.75rem;

Introduced in:
Tailwind → Level 1 → Challenge 29

shadow
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

Introduced in:
Tailwind → Level 1 → Challenge 32

shadow-2xl
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
shadow-lg
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

Introduced in:
Tailwind → Level 1 → Challenge 29

shadow-md
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

Introduced in:
Tailwind → Level 1 → Challenge 12

shadow-xl
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

Introduced in:
Tailwind → Level 2 → Challenge 39

sm:grid-cols-2
grid-template-columns: repeat(2, minmax(0, 1fr));
(≥640px)

Introduced in:
Tailwind → Level 2 → Challenge 38

sm:max-w-md
max-width: 28rem;
(≥640px)
sm:mb-4
margin-bottom: 1rem;
(≥640px)
sm:p-6
padding: 1.5rem;
(≥640px)
sm:p-8
padding: 2rem;
(≥640px)
sm:px-4
padding-left: 1rem;
padding-right: 1rem;
(≥640px)
sm:px-6
padding-left: 1.5rem;
padding-right: 1.5rem;
(≥640px)
sm:py-2
padding-top: 0.5rem;
padding-bottom: 0.5rem;
(≥640px)
sm:py-24
padding-top: 6rem;
padding-bottom: 6rem;
(≥640px)

Introduced in:
Tailwind → Level 1 → Challenge 23

sm:text-5xl
font-size: 3rem;
line-height: 1;
(≥640px)

Introduced in:
Tailwind → Level 1 → Challenge 26

sm:text-base
font-size: 1rem;
line-height: 1.5rem;
(≥640px)
sm:text-xl
font-size: 1.25rem;
line-height: 1.75rem;
(≥640px)

Introduced in:
Tailwind → Level 1 → Challenge 27

space-x-2
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
space-y-2
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
space-y-4
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));

Introduced in:
Tailwind → Level 4 → Challenge 113

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;
table
display: table;
text-2xl
font-size: 1.5rem;
line-height: 2rem;

Introduced in:
Tailwind → Level 1 → Challenge 14

text-3xl
font-size: 1.875rem;
line-height: 2.25rem;

Introduced in:
Tailwind → Level 2 → Challenge 36

text-4xl
font-size: 2.25rem;
line-height: 2.5rem;

Introduced in:
Tailwind → Level 1 → Challenge 26

text-6xl
font-size: 3.75rem;
line-height: 1;
text-base
font-size: 1rem;
line-height: 1.5rem;
text-black
color: rgb(0 0 0 / 1);
text-blue-500
color: rgb(59 130 246 / 1);

Introduced in:
Tailwind → Level 1 → Challenge 14

text-center
text-align: center;

Introduced in:
Tailwind → Level 1 → Challenge 24

text-gray-200
color: rgb(229 231 235 / 1);

Introduced in:
Tailwind → Level 2 → Challenge 44

text-gray-500
color: rgb(107 114 128 / 1);

Introduced in:
Tailwind → Level 3 → Challenge 80

text-gray-600
color: rgb(75 85 99 / 1);

Introduced in:
Tailwind → Level 1 → Challenge 17

text-gray-700
color: rgb(55 65 81 / 1);

Introduced in:
Tailwind → Level 2 → Challenge 63

text-gray-800
color: rgb(31 41 55 / 1);

Introduced in:
Tailwind → Level 1 → Challenge 14

text-green-500
color: rgb(22 163 74 / 1);
text-green-600
color: rgb(22 163 74 / 1);

Introduced in:
Tailwind → Level 4 → Challenge 100

text-left
text-align: left;
text-lg
font-size: 1.125rem;
line-height: 1.75rem;

Introduced in:
Tailwind → Level 1 → Challenge 27

text-red-500
color: rgb(239 68 68 / 1);
text-red-600
color: rgb(220 38 38 / 1);
text-sm
font-size: 0.875rem;
line-height: 1.25rem;

Introduced in:
Tailwind → Level 1 → Challenge 25

text-white
color: rgb(255 255 255 / 1);

Introduced in:
Tailwind → Level 1 → Challenge 22

text-xl
font-size: 1.25rem;
line-height: 1.75rem;

Introduced in:
Tailwind → Level 2 → Challenge 43

text-yellow-500
color: rgb(245 158 11 / 1);
to-blue-600
--tw-gradient-to: #2563eb;

Introduced in:
Tailwind → Level 1 → Challenge 22

to-gray-100
--tw-gradient-to: #f3f4f6;

Introduced in:
Tailwind → Level 1 → Challenge 11

to-gray-900
--tw-gradient-to: #111827;

Introduced in:
Tailwind → Level 2 → Challenge 51

to-green-600
--tw-gradient-to: #16A34A;

Introduced in:
Tailwind → Level 2 → Challenge 45

top-0
top: 0px;

Introduced in:
Tailwind → Level 1 → Challenge 12

top-1/2
top: 50%;
top-[-8px]
top: -8px;
tracking-tight
letter-spacing: -0.025em;

Introduced in:
Tailwind → Level 1 → Challenge 14

transform
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

Introduced in:
Tailwind → Level 1 → Challenge 29

transition
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

Introduced in:
Tailwind → Level 1 → Challenge 17

transition-transform
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

Introduced in:
Tailwind → Level 2 → Challenge 39

-translate-y-1/2
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
	rotate(var(--tw-rotate))
	skewX(var(--tw-skew-x))
	skewY(var(--tw-skew-y))
	scaleX(var(--tw-scale-x))
	scaleY(var(--tw-scale-y));
w-0
width: 0;
w-16
width: 4rem;

Introduced in:
Tailwind → Level 2 → Challenge 40

w-6
width: 1.5rem;

Introduced in:
Tailwind → Level 1 → Challenge 30

w-full
width: 100%;

Introduced in:
Tailwind → Level 4 → Challenge 116

xl:flex
display: flex;
(≥1280px)
xl:flex-row
flex-direction: row;
(≥1280px)

Introduced in:
Tailwind → Level 5 → Challenge 144

xl:grid-cols-2
grid-template-columns: repeat(2, minmax(0, 1fr));
(≥1280px)
xl:grid-cols-3
grid-template-columns: repeat(3, minmax(0, 1fr));
(≥1280px)
xl:items-center
align-items: center;
(≥1280px)

Introduced in:
Tailwind → Level 5 → Challenge 144

xl:justify-between
justify-content: space-between;
(≥1280px)

Introduced in:
Tailwind → Level 5 → Challenge 144

xl:justify-end
justify-content: flex-end;
(≥1280px)

Introduced in:
Tailwind → Level 5 → Challenge 148

xl:mb-0
margin-bottom: 0;
(≥1280px)

Introduced in:
Tailwind → Level 5 → Challenge 145

xl:mx-0
margin-left: 0;
margin-right: 0;
(≥1280px)
xl:text-center
text-align: center;
(≥1280px)
xl:text-left
text-align: left;
(≥1280px)

Introduced in:
Tailwind → Level 5 → Challenge 144

xl:text-right
text-align: right;
(≥1280px)
xl:w-1/3
width: 33.333333%;
(≥1280px)
z-10
z-index: 10;
z-50
z-index: 50;

Introduced in:
Tailwind → Level 1 → Challenge 12

2xl:grid-cols-4
grid-template-columns: repeat(4, minmax(0, 1fr));
(≥1536px)
2xl:grid-cols-5
grid-template-columns: repeat(5, minmax(0, 1fr));
(≥1536px)
2xl:grid-cols-6
grid-template-columns: repeat(6, minmax(0, 1fr));
(≥1536px)