Tailwind CSS Classes

General

Tailwind components

Tailwind templates

Tailwind editor

Animation

delay-100

delay-1000

delay-150

delay-200

delay-300

delay-500

delay-700

delay-75

duration-100

duration-1000

duration-150

duration-200

duration-300

duration-500

duration-700

duration-75

ease-linear / .ease-*

transition / .transition-*
Animations

animate-bounce

animate-none

animate-ping

animate-pulse

animate-spin
Background

bg-auto

bg-bottom

bg-center

bg-contain

bg-cover

bg-fixed

bg-left

bg-left-bottom

bg-left-top

bg-local

bg-no-repeat

bg-none

bg-opacity-0

bg-opacity-100

bg-opacity-25

bg-opacity-50

bg-opacity-75

bg-repeat

bg-repeat-round

bg-repeat-space

bg-repeat-x

bg-repeat-y

bg-right

bg-right-bottom

bg-right-top

bg-scroll

bg-top
Background clip

bg-clip-border

bg-clip-content

bg-clip-padding

bg-clip-text
Background color

bg-black

bg-blue-100

bg-blue-200

bg-blue-300

bg-blue-400

bg-blue-500

bg-blue-600

bg-blue-700

bg-blue-800

bg-blue-900

bg-current

bg-gray-100

bg-gray-200

bg-gray-300

bg-gray-400

bg-gray-500

bg-gray-600

bg-gray-700

bg-gray-800

bg-gray-900

bg-green-100

bg-green-200

bg-green-300

bg-green-400

bg-green-500

bg-green-600

bg-green-700

bg-green-800

bg-green-900

bg-indigo-100

bg-indigo-200

bg-indigo-300

bg-indigo-400

bg-indigo-500

bg-indigo-600

bg-indigo-700

bg-indigo-800

bg-indigo-900

bg-orange-100

bg-orange-200

bg-orange-300

bg-orange-400

bg-orange-500

bg-orange-600

bg-orange-700

bg-orange-800

bg-orange-900

bg-pink-100

bg-pink-200

bg-pink-300

bg-pink-400

bg-pink-500

bg-pink-600

bg-pink-700

bg-pink-800

bg-pink-900

bg-purple-100

bg-purple-200

bg-purple-300

bg-purple-400

bg-purple-500

bg-purple-600

bg-purple-700

bg-purple-800

bg-purple-900

bg-red-100

bg-red-200

bg-red-300

bg-red-400

bg-red-500

bg-red-600

bg-red-700

bg-red-800

bg-red-900

bg-teal-100

bg-teal-200

bg-teal-300

bg-teal-400

bg-teal-500

bg-teal-600

bg-teal-700

bg-teal-800

bg-teal-900

bg-transparent

bg-white

bg-yellow-100

bg-yellow-200

bg-yellow-300

bg-yellow-400

bg-yellow-500

bg-yellow-600

bg-yellow-700

bg-yellow-800

bg-yellow-900
Background gradient

bg-gradient-to-b

bg-gradient-to-bl

bg-gradient-to-br

bg-gradient-to-l

bg-gradient-to-r

bg-gradient-to-t

bg-gradient-to-tl

bg-gradient-to-tr

from-blue-100

from-current

from-gray-100

from-indigo-100

from-pink-100

from-purple-100

from-red-100

from-transparent

from-transparent

from-white

from-yellow-100

to-black

to-blue-100

to-current

to-gray-100

to-green-100

to-indigo-100

to-pink-100

to-purple-100

to-red-100

to-transparent

to-white

to-yellow-100

top-1

via-black

via-blue-100

via-current

via-gray-100

via-green-100

via-indigo-100

via-pink-100

via-purple-100

via-red-100

via-transparent

via-white

via-yellow-100
Border color

border-black

border-blue-100

border-blue-200

border-blue-300

border-blue-400

border-blue-500

border-blue-600

border-blue-700

border-blue-800

border-blue-900

border-current

border-gray-100

border-gray-200

border-gray-300

border-gray-400

border-gray-500

border-gray-600

border-gray-700

border-gray-800

border-gray-900

border-green-100

border-green-200

border-green-300

border-green-400

border-green-500

border-green-600

border-green-700

border-green-800

border-green-900

border-indigo-100

border-indigo-200

border-indigo-300

border-indigo-400

border-indigo-500

border-indigo-600

border-indigo-700

border-indigo-800

border-indigo-900

border-orange-100

border-orange-200

border-orange-300

border-orange-400

border-orange-500

border-orange-600

border-orange-700

border-orange-800

border-orange-900

border-pink-100

border-pink-200

border-pink-300

border-pink-400

border-pink-500

border-pink-600

border-pink-700

border-pink-800

border-pink-900

border-purple-100

border-purple-200

border-purple-300

border-purple-400

border-purple-500

border-purple-600

border-purple-700

border-purple-800

border-purple-900

border-red-100

border-red-200

border-red-300

border-red-400

border-red-500

border-red-600

border-red-700

border-red-800

border-red-900

border-teal-100

border-teal-200

border-teal-300

border-teal-400

border-teal-500

border-teal-600

border-teal-700

border-teal-800

border-teal-900

border-transparent

border-white

border-yellow-100

border-yellow-200

border-yellow-300

border-yellow-400

border-yellow-500

border-yellow-600

border-yellow-700

border-yellow-800

border-yellow-900
Borders

border

border-*-# / .border-t-2

border-0

border-2

border-4

border-8

border-b

border-b-0

border-blue-50

border-collapse

border-dashed

border-dotted

border-double

border-gray-50

border-green-50

border-indigo-50

border-l

border-l-0

border-none

border-opacity-0

border-opacity-25 / border-*-#

border-pink-50

border-purple-50

border-r

border-r-0

border-red-50

border-separate

border-solid

border-t

border-t-0

border-yellow-50

divide-gray-100 / .divide-*-#

divide-opacity-25 / .divide-opacity-*

divide-x

divide-x-0

divide-x-2

divide-x-4

divide-x-8

divide-x-reverse / .divide-*-reverse

divide-y

divide-y-0

divide-y-2

divide-y-4

divide-y-8

rounded / .rounded-*

rounded-2xl

rounded-3xl

rounded-b-2xl

rounded-b-3xl

rounded-b-xl

rounded-bl-2xl

rounded-bl-3xl

rounded-bl-xl

rounded-br-2xl

rounded-br-3xl

rounded-br-xl

rounded-l-2xl

rounded-l-xl

rounded-r-2xl

rounded-r-3xl

rounded-r-xl

rounded-t-2xl

rounded-t-3xl

rounded-t-xl

rounded-tl-2xl

rounded-tl-3xl

rounded-tl-xl

rounded-tr-2xl

rounded-tr-3xl

rounded-tr-xl

rounded-xl
Box

box-border

box-content
Colors

bg-blue-50

bg-gray-50

bg-green-50

bg-indigo-50

bg-opacity-10

bg-pink-50

bg-purple-50

bg-red-50

bg-yellow-50
Display

block

flex

flow-root

grid

hidden

inline

inline-block

inline-flex

inline-grid
Divide

divide-black

divide-blue-100

divide-current

divide-dashed

divide-dotted

divide-doubble

divide-gray-100

divide-green-100

divide-indigo-100

divide-none

divide-opacity-0

divide-pink-100

divide-purple-100

divide-red-100

divide-solid

divide-transparent

divide-white

divide-x-reverse

divide-y-reverse

divide-yellow-100
Flex

content-start / .content-*

flex-1

flex-auto

flex-col

flex-col-reverse

flex-grow / .flex-grow-0

flex-initial

flex-no-wrap

flex-none

flex-row

flex-row-reverse

flex-shrink / .flex-shrink-0

flex-wrap

flex-wrap-reverse

items-stretch / .items-*

justify-start / .justify-*

order-1 / .order-*

self-start / .self-*
Flexbox

content-around

content-between

content-center

content-end

content-evenly

content-start

contents

flex-nowrap

justify-items-auto

justify-items-center

justify-items-end

justify-items-start

justify-items-stretch

justify-self-auto

justify-self-center

justify-self-end

justify-self-start

justify-self-stretch

space-x-7

space-x-px

space-x-reverse

space-y-px

space-y-reverse
Forms

focus-within

from-black
Grid

auto-cols-auto

auto-cols-fr

auto-cols-max

auto-cols-min

auto-rows-auto

auto-rows-fr

auto-rows-max

auto-rows-min

auto-rows-min

col-auto

col-end-1

col-end-1 / .col-end-*

col-end-auto

col-gap-0 / .col-gap-*

col-span-1

col-span-1 / .col-span-*

col-span-full

col-start-1

col-start-1 / .col-start-*

col-start-auto

gap-0

gap-0 / .gap-*

gap-px

gap-x-0

gap-x-px

gap-y-0

gap-y-px

grid-cols-1 / .grid-cols-*

grid-flow-col

grid-flow-col-dense

grid-flow-row

grid-flow-row-dense

grid-rows-1 / .grid-rows-*

place-content-around

place-content-between

place-content-center

place-content-end

place-content-evenly

place-content-start

place-content-stretch

place-items-auto

place-items-center

place-items-end

place-items-start

place-items-stretch

place-self-auto

place-self-end

place-self-start

place-self-stretch

row-auto

row-end-1

row-end-2

row-end-3

row-end-4

row-end-5

row-end-6

row-end-7

row-end-auto

row-gap-0 / .row-gap-*

row-span-1

row-span-1 / .row-span-*

row-span-full

row-start-1

row-start-2

row-start-3

row-start-4

row-start-5

row-start-6

row-start-7

row-start-auto
Group hover

group-hover

group-hover
Height

h-0

h-1

h-10

h-12

h-16

h-2

h-20

h-24

h-3

h-32

h-4

h-40

h-48

h-5

h-56

h-6

h-64

h-8

h-auto

h-full

h-px

h-screen

max-h-full

max-h-px

max-h-screen

min-h-0

min-h-full

min-h-screen
List

list-disc / .list-*

list-inside / .list-outside
Margins

-m-1

-m-10

-m-12

-m-16

-m-2

-m-20

-m-24

-m-3

-m-32

-m-4

-m-40

-m-48

-m-5

-m-56

-m-6

-m-64

-m-8

-m-px

-mb-1

-mb-10

-mb-12

-mb-16

-mb-2

-mb-20

-mb-24

-mb-3

-mb-32

-mb-4

-mb-40

-mb-48

-mb-5

-mb-56

-mb-6

-mb-64

-mb-8

-mb-px

-ml-1

-ml-10

-ml-12

-ml-16

-ml-2

-ml-20

-ml-24

-ml-3

-ml-32

-ml-4

-ml-40

-ml-48

-ml-5

-ml-56

-ml-6

-ml-64

-ml-8

-ml-px

-mr-1

-mr-10

-mr-12

-mr-16

-mr-2

-mr-20

-mr-24

-mr-3

-mr-32

-mr-4

-mr-40

-mr-48

-mr-5

-mr-56

-mr-6

-mr-64

-mr-8

-mr-px

-mt-1

-mt-10

-mt-12

-mt-16

-mt-2

-mt-20

-mt-24

-mt-3

-mt-32

-mt-4

-mt-40

-mt-48

-mt-5

-mt-56

-mt-6

-mt-64

-mt-8

-mt-px

-mx-1

-mx-10

-mx-12

-mx-16

-mx-2

-mx-20

-mx-24

-mx-3

-mx-32

-mx-4

-mx-40

-mx-48

-mx-5

-mx-56

-mx-6

-mx-64

-mx-8

-mx-px

-my-1

-my-10

-my-12

-my-16

-my-2

-my-20

-my-24

-my-3

-my-32

-my-4

-my-40

-my-48

-my-5

-my-56

-my-6

-my-64

-my-8

-my-px

m-0

m-1

m-10

m-12

m-16

m-2

m-20

m-24

m-3

m-32

m-4

m-40

m-48

m-5

m-56

m-6

m-64

m-8

m-auto

m-px

mb-0

mb-1

mb-10

mb-11

mb-12

mb-16

mb-2

mb-20

mb-24

mb-3

mb-32

mb-4

mb-40

mb-48

mb-5

mb-56

mb-6

mb-64

mb-8

mb-auto

mb-px

ml-0

ml-1

ml-10

ml-11

ml-12

ml-16

ml-2

ml-20

ml-24

ml-3

ml-32

ml-4

ml-40

ml-48

ml-5

ml-56

ml-6

ml-64

ml-8

ml-auto

ml-px

mr-0

mr-1

mr-10

mr-11

mr-12

mr-16

mr-2

mr-20

mr-24

mr-3

mr-32

mr-4

mr-40

mr-48

mr-5

mr-56

mr-6

mr-64

mr-8

mr-auto

mr-px

mt-0

mt-1

mt-10

mt-11

mt-11

mt-12

mt-16

mt-2

mt-20

mt-24

mt-3

mt-32

mt-4

mt-40

mt-48

mt-5

mt-56

mt-6

mt-64

mt-8

mt-auto

mt-px

mx-0

mx-1

mx-10

mx-11

mx-12

mx-16

mx-2

mx-20

mx-24

mx-3

mx-32

mx-4

mx-40

mx-48

mx-5

mx-56

mx-6

mx-64

mx-8

mx-auto

mx-px

my-0

my-1

my-10

my-11

my-12

my-16

my-2

my-20

my-24

my-3

my-32

my-4

my-40

my-48

my-5

my-56

my-6

my-64

my-8

my-auto

my-px
Nums

lining-nums

normal-nums

oldstyle-nums

stacked-fractions
Opacity

opacity-10
Outline

outline-black

outline-white
Paddings

p-0

p-1

p-10

p-11

p-12

p-16

p-2

p-20

p-24

p-3

p-32

p-4

p-40

p-48

p-5

p-56

p-6

p-64

p-8

p-px

pb-0

pb-1

pb-10

pb-11

pb-12

pb-16

pb-2

pb-20

pb-24

pb-3

pb-32

pb-4

pb-40

pb-48

pb-5

pb-56

pb-6

pb-64

pb-8

pb-px

pl-0

pl-1

pl-10

pl-11

pl-12

pl-16

pl-2

pl-20

pl-24

pl-3

pl-32

pl-4

pl-40

pl-48

pl-5

pl-56

pl-6

pl-64

pl-8

pl-px

pr-0

pr-1

pr-10

pr-11

pr-12

pr-16

pr-2

pr-20

pr-24

pr-3

pr-32

pr-4

pr-40

pr-48

pr-5

pr-56

pr-6

pr-64

pr-8

pr-px

pt-0

pt-1

pt-10

pt-11

pt-12

pt-16

pt-2

pt-20

pt-24

pt-3

pt-32

pt-4

pt-40

pt-48

pt-5

pt-56

pt-6

pt-64

pt-8

pt-px

px-0

px-1

px-10

px-11

px-12

px-16

px-2

px-20

px-24

px-3

px-32

px-4

px-40

px-48

px-5

px-56

px-6

px-64

px-8

px-px

py-0

py-1

py-10

py-11

py-12

py-16

py-2

py-20

py-24

py-3

py-32

py-4

py-40

py-48

py-5

py-56

py-6

py-64

py-8

py-px
Positioning

-bottom-1

-bottom-px

-inset-0

-inset-px

-inset-x-0

-inset-y-0

-inset-y-full

-inset-y-px

-left-0

-left-full

-left-px

-m-0

-m-px

-mb-0

-mb-px

-ml-0

-ml-px

-mr-0

-mr-px

-mt-0

-mt-px

-mx-0

-mx-px

-my-0

-my-px

-right-0

-right-full

-right-px

-rotate-1

-skew-x-1

-skew-y-1

-space-x-0

-space-x-px

-space-y-0

-space-y-px

-top-0

-top-px

-translate-x-0

-translate-x-full

-translate-x-px

-translate-y-0

-translate-y-px

absolute

absolute

align-*

align-baseline

align-bottom

align-middle

align-text-bottom

align-text-top

align-top

bottom-0

bottom-0 / .bottom-*

bottom-auto

bottom-full

bottom-px

clear-both

clear-left

clear-none

clear-right

clearfix

fixed

float-*

inset-1

inset-full

inset-px

inset-x-1

inset-x-full

inset-x-px

inset-y-0 / .inset-*-#

inset-y-1

inset-y-full

inset-y-px

left-0 / .left-*

left-1

left-full

left-px

object-bottom

object-center

object-contain / .object-*

object-left

object-left-bottom

object-left-top

object-right

object-right-bottom

object-right-top

object-top

relative

right-0 / .right-*

right-1

right-auto

right-full

right-px

static

sticky

top-0 / .top-*

top-full

top-px

z-10 / .z-*
Pseudo class

focus

hover
Responsive

container

lg:

md:

sm:

xl:
Ring

ring

ring-0

ring-black

ring-blue-100

ring-current

ring-gray-100

ring-green-100

ring-inding-100

ring-inset

ring-offset-0

ring-offset-black

ring-offset-blue-100

ring-offset-current

ring-offset-gray-100

ring-offset-green-100

ring-offset-indigo-100

ring-offset-pink-100

ring-offset-purple-100

ring-offset-red-100

ring-offset-transparent

ring-offset-white

ring-offset-yellow-100

ring-opacity-0

ring-pink-100

ring-purple-100

ring-red-100

ring-transparent

ring-white

ring-yellow-100
Scroll

overscroll-contain

overscroll-x-auto

overscroll-x-contain

overscroll-x-none

overscroll-y-auto

overscroll-y-contain

overscroll-y-none
Shadows

shadow

shadow-2xl

shadow-inner

shadow-lg

shadow-md

shadow-none

shadow-outline

shadow-sm

shadow-xl

shadow-xs
Sizing

h-11
Spacing

-space-x-1 / .-space-x-*

-space-y-1 / .-space-y-*

space-x-1 / .space-x-*

space-x-reverse / .space-y-reverse

space-y-1 / .space-y-*
Svg

fill-current

stroke-0 / .stroke-*

stroke-current
Table

table

table-auto / .table-fixed

table-caption

table-cell

table-column

table-column-group

table-footer-group

table-header-group

table-row

table-row-group
Text

antialiased

break-all

break-normal

break-words

capitalize

font-black

font-bold

font-extrabold

font-hairline

font-light

font-medium

font-mono

font-normal

font-sans

font-semibold

font-serif

font-thin

italic

leading-10

leading-3

leading-4

leading-5

leading-6

leading-7

leading-8

leading-9

leading-loose

leading-none

leading-normal

leading-relaxed

leading-snug

leading-tight

line-through

lowercase

no-underline

normal-case

not-italic

subpixel-antialiased

text-2xl

text-3xl

text-4xl

text-5xl

text-6xl

text-base

text-center

text-justify

text-left

text-lg

text-opacity-*

text-right

text-sm

text-xl

text-xs

tracking-normal

tracking-tight

tracking-tighter

tracking-wide

tracking-wider

tracking-widest

truncate

underline

uppercase

whitespace-normal / .whitespace-*
Text color

text-black

text-blue-100

text-blue-200

text-blue-300

text-blue-400

text-blue-50

text-blue-500

text-blue-600

text-blue-700

text-blue-800

text-blue-900

text-current

text-gray-100

text-gray-200

text-gray-300

text-gray-400

text-gray-50

text-gray-500

text-gray-600

text-gray-700

text-gray-800

text-gray-900

text-green-100

text-green-200

text-green-300

text-green-400

text-green-50

text-green-500

text-green-600

text-green-700

text-green-800

text-green-900

text-indigo-100

text-indigo-200

text-indigo-300

text-indigo-400

text-indigo-50

text-indigo-500

text-indigo-600

text-indigo-700

text-indigo-800

text-indigo-900

text-opacity-10

text-orange-100

text-orange-200

text-orange-300

text-orange-400

text-orange-500

text-orange-600

text-orange-700

text-orange-800

text-orange-900

text-pink-100

text-pink-200

text-pink-300

text-pink-400

text-pink-50

text-pink-500

text-pink-600

text-pink-700

text-pink-800

text-pink-900

text-purple-100

text-purple-200

text-purple-300

text-purple-400

text-purple-50

text-purple-500

text-purple-600

text-purple-700

text-purple-800

text-purple-900

text-red-100

text-red-200

text-red-300

text-red-400

text-red-50

text-red-500

text-red-600

text-red-700

text-red-800

text-red-900

text-teal-100

text-teal-200

text-teal-300

text-teal-400

text-teal-500

text-teal-600

text-teal-700

text-teal-800

text-teal-900

text-transparent

text-white

text-yellow-100

text-yellow-200

text-yellow-300

text-yellow-400

text-yellow-50

text-yellow-500

text-yellow-600

text-yellow-700

text-yellow-800

text-yellow-900
Transform

-rotate-180

-rotate-45

-rotate-90

-skew-x-12

-skew-x-3

-skew-x-6

-skew-y-12

-skew-y-3

-skew-y-6

-translate-x-1

-translate-x-1/2

-translate-x-10

-translate-x-12

-translate-x-16

-translate-x-2

-translate-x-20

-translate-x-24

-translate-x-3

-translate-x-32

-translate-x-4

-translate-x-40

-translate-x-48

-translate-x-5

-translate-x-56

-translate-x-6

-translate-x-64

-translate-x-8

-translate-x-full

-translate-x-px

-translate-y-1

-translate-y-1/2

-translate-y-10

-translate-y-12

-translate-y-16

-translate-y-2

-translate-y-20

-translate-y-24

-translate-y-3

-translate-y-32

-translate-y-4

-translate-y-40

-translate-y-48

-translate-y-5

-translate-y-56

-translate-y-6

-translate-y-64

-translate-y-8

-translate-y-full

-translate-y-px

diagonal-fractions

origin-center / .origin-*

rotate-0

rotate-1

rotate-180

rotate-45

rotate-90

scale-0 / .scale-*

scale-x-0

scale-x-100

scale-x-105

scale-x-110

scale-x-125

scale-x-150

scale-x-50

scale-x-75

scale-x-90

scale-x-95

scale-y-0

scale-y-100

scale-y-105

scale-y-110

scale-y-125

scale-y-150

scale-y-50

scale-y-75

scale-y-90

scale-y-95

skew-x-0

skew-x-1

skew-x-12

skew-x-2

skew-x-3

skew-x-6

skew-y-0

skew-y-1

skew-y-12

skew-y-2

skew-y-3

skew-y-6

transform / .transform-none

transform-gpu

translate-x-0

translate-x-1

translate-x-1/2

translate-x-10

translate-x-11

translate-x-12

translate-x-16

translate-x-2

translate-x-20

translate-x-24

translate-x-3

translate-x-32

translate-x-4

translate-x-40

translate-x-48

translate-x-5

translate-x-56

translate-x-6

translate-x-64

translate-x-8

translate-x-full

translate-x-px

translate-y-0

translate-y-1

translate-y-1/2

translate-y-10

translate-y-11

translate-y-12

translate-y-16

translate-y-2

translate-y-20

translate-y-24

translate-y-3

translate-y-32

translate-y-4

translate-y-40

translate-y-48

translate-y-5

translate-y-56

translate-y-6

translate-y-64

translate-y-8

translate-y-full

translate-y-px
Typography

font-extralight

text-7xl

text-8xl

text-9xl
Utilities

appearance-none

cursor-auto

cursor-default

cursor-move

cursor-not-allowed

cursor-pointer

cursor-text

cursor-wait

outline-none

overflow-hidden / .overflow-*

placeholder-black::placeholder

placeholder-blue-100

placeholder-blue-600::placeholder

placeholder-current

placeholder-current::placeholder

placeholder-gray-100

placeholder-gray-100::placeholder

placeholder-gray-200::placeholder

placeholder-gray-300::placeholder

placeholder-gray-400::placeholder

placeholder-gray-500::placeholder

placeholder-gray-600::placeholder

placeholder-gray-600::placeholder

placeholder-gray-700::placeholder

placeholder-gray-800::placeholder

placeholder-gray-900::placeholder

placeholder-green-100

placeholder-green-600::placeholder

placeholder-indigo-100

placeholder-indigo-600::placeholder

placeholder-opacity-0

placeholder-opacity-10

placeholder-opacity-100

placeholder-opacity-25

placeholder-opacity-50

placeholder-opacity-75

placeholder-orange-600::placeholder

placeholder-pink-100

placeholder-pink-600::placeholder

placeholder-purple-100

placeholder-purple-600::placeholder

placeholder-red-100

placeholder-red-600::placeholder

placeholder-teal-600::placeholder

placeholder-transparent

placeholder-transparent::placeholder

placeholder-white

placeholder-white::placeholder

placeholder-yellow-100

placeholder-yellow-600::placeholder

pointer-events-auto

pointer-events-none

resize

resize-none

resize-x

resize-y

scrolling-touch / .scrolling-auto

select-all

select-auto

select-none

select-text
Visibility

invisible

opacity-0

opacity-100

opacity-25

opacity-50

opacity-75

sr-only / .not-sr-only

visible
Width

max-h-0

max-w-0

max-w-2xl

max-w-3xl

max-w-4xl

max-w-5xl

max-w-6xl

max-w-7xl

max-w-full

max-w-lg

max-w-max

max-w-md

max-w-min

max-w-none

max-w-prose

max-w-screen-2xl

max-w-screen-lg

max-w-screen-md

max-w-screen-sm

max-w-screen-xl

max-w-sm

max-w-xl

max-w-xs

min-w-0

min-w-full

min-w-max

min-w-min

w-0

w-1

w-1/12

w-1/2

w-1/3

w-1/4

w-1/5

w-1/6

w-10

w-10/12

w-11

w-11/12

w-12

w-16

w-2

w-2/12

w-2/3

w-2/4

w-2/5

w-2/6

w-20

w-24

w-3

w-3/12

w-3/4

w-3/5

w-3/6

w-32

w-4

w-4/12

w-4/5

w-4/6

w-40

w-48

w-5

w-5/12

w-5/6

w-56

w-6

w-6/12

w-64

w-7/12

w-8

w-8/12

w-9/12

w-auto

w-full

w-px

w-screen

Tailwind CSS class .translate-x-4

                    <div class="bg-gray-300 w-64 h-6 m-2"><div class="translate-x-4 transform bg-teal-400 h-6 w-6 text-center">4</div></div>
                

Preview

CSS source

.translate-x-4 { --transform-translate-x: 1rem; }

Check .translate-x-4 in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Open in Visual Editor →

More Tailwind CSS classes in Transform category

.transform / .transform-none

.origin-center / .origin-*

.translate-x-0

.translate-x-1

.translate-x-2

.translate-x-3

.translate-x-4

.translate-x-5

.translate-x-6

.translate-x-8

.translate-x-10

.translate-x-12

.translate-x-16

.translate-x-20

.translate-x-24

.translate-x-32

.translate-x-40

.translate-x-48

.translate-x-56

.translate-x-64

.translate-x-px

.translate-x-1/2

.translate-x-full

.translate-y-0

.translate-y-1

.translate-y-2

.translate-y-3

.translate-y-4

.translate-y-5

.translate-y-6

.translate-y-8

.translate-y-10

.translate-y-12

.translate-y-16

.translate-y-20

.translate-y-24

.translate-y-32

.translate-y-40

.translate-y-48

.translate-y-56

.translate-y-64

.translate-y-px

.translate-y-1/2

.translate-y-full

.-translate-x-1

.-translate-x-2

.-translate-x-3

.-translate-x-4

.-translate-x-5

.-translate-x-6

.-translate-x-8

.-translate-x-10

.-translate-x-12

.-translate-x-16

.-translate-x-20

.-translate-x-24

.-translate-x-32

.-translate-x-40

.-translate-x-48

.-translate-x-56

.-translate-x-64

.-translate-x-px

.-translate-x-1/2

.-translate-x-full

.-translate-y-1

.-translate-y-2

.-translate-y-3

.-translate-y-4

.-translate-y-5

.-translate-y-6

.-translate-y-8

.-translate-y-10

.-translate-y-12

.-translate-y-16

.-translate-y-20

.-translate-y-24

.-translate-y-32

.-translate-y-40

.-translate-y-48

.-translate-y-56

.-translate-y-64

.-translate-y-px

.-translate-y-1/2

.-translate-y-full

.scale-0 / .scale-*

.scale-x-0

.scale-x-50

.scale-x-75

.scale-x-90

.scale-x-95

.scale-x-100

.scale-x-105

.scale-x-110

.scale-x-125

.scale-x-150

.scale-y-0

.scale-y-50

.scale-y-75

.scale-y-90

.scale-y-95

.scale-y-100

.scale-y-105

.scale-y-110

.scale-y-125

.scale-y-150

.rotate-0

.rotate-45

.rotate-90

.rotate-180

.-rotate-45

.-rotate-90

.-rotate-180

.skew-x-0

.skew-x-3

.skew-x-6

.skew-x-12

.skew-y-0

.skew-y-3

.skew-y-6

.skew-y-12

.-skew-x-3

.-skew-x-6

.-skew-x-12

.-skew-y-3

.-skew-y-6

.-skew-y-12

.diagonal-fractions

.rotate-1

.skew-x-1

.skew-x-2

.skew-y-1

.skew-y-2

.transform-gpu

.translate-x-11

.translate-y-11

An online editor for busy developers.

Combine elements and styles to create an entirely new UI Library!

Supporting tools

Plans

Tailwind CSS Classes

Tailwind CSS class .translate-x-4

Preview

CSS source

Check .translate-x-4 in a real project

More Tailwind CSS classes in Transform category

Products

UI Components

Support

Company

Shuffle's Editors

Combine elements and styles to create an entirely new UI Library!

Supporting tools

Plans

Shuffle’s design systems

Tailwind CSS

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Classes

Tailwind CSS class .translate-x-4

Preview

CSS source

Check .translate-x-4 in a real project

More Tailwind CSS classes in Transform category

Products

UI Components

Support

Company