Готовые классы библиотеки Tailwind

Flex Grid

Parent: grid grid-cols-12 gap-4

1 + 11: col-span-1 + col-span-11

2 + 10: col-span-2 + col-span-10

3 + 9: col-span-3 + col-span-9

4 + 8: col-span-4 + col-span-8

5 + 7: col-span-5 + col-span-7

6 + 6: col-span-6 + col-span-6

12 + 12: col-span-12 + col-span-12

Simple grid

1 cols: grid gap-4 grid-cols-1 xs:grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1

2 cols: grid gap-4 grid-cols-2 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2

3 cols: grid gap-4 grid-cols-3 xs:grid-cols-3 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3

4 cols: grid gap-4 grid-cols-4 xs:grid-cols-4 sm:grid-cols-4 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-4

5 cols: grid gap-4 grid-cols-5 xs:grid-cols-5 sm:grid-cols-5 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-5

10 cols: grid gap-4 grid-cols-10 xs:grid-cols-10 sm:grid-cols-10 md:grid-cols-10 lg:grid-cols-10 xl:grid-cols-10

12 cols: grid gap-4 grid-cols-12 xs:grid-cols-12 sm:grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12

Grid or Flex Gap

[0px] grid grid-cols-2gap-0xs:gap-0sm:gap-0md:gap-0lg:gap-0xl:gap-0

[4px] grid grid-cols-2gap-1xs:gap-1sm:gap-1md:gap-1lg:gap-1xl:gap-1

[8px] grid grid-cols-2gap-2xs:gap-2sm:gap-2md:gap-2lg:gap-2xl:gap-2

[12px] grid grid-cols-2gap-3xs:gap-3sm:gap-3md:gap-3lg:gap-3xl:gap-3

[16px] grid grid-cols-2gap-4xs:gap-4sm:gap-4md:gap-4lg:gap-4xl:gap-4

[16px] grid grid-cols-2gap-5xs:gap-5sm:gap-5md:gap-5lg:gap-5xl:gap-5

[16px] grid grid-cols-2gap-6xs:gap-6sm:gap-6md:gap-6lg:gap-6xl:gap-6

[32px] grid grid-cols-2gap-8xs:gap-8sm:gap-8md:gap-8lg:gap-8xl:gap-8

[40px] grid grid-cols-2gap-10xs:gap-10sm:gap-10md:gap-10lg:gap-10xl:gap-10

[64px] grid grid-cols-2gap-16xs:gap-16sm:gap-16md:gap-16lg:gap-16xl:gap-16

[80px] grid grid-cols-2gap-20xs:gap-20sm:gap-20md:gap-20lg:gap-20xl:gap-20

[128px] grid grid-cols-2gap-32xs:gap-32sm:gap-32md:gap-32lg:gap-32xl:gap-32

Flex

Flex Row: flex flex-row xs:flex-row sm:flex-row

Flex Row Reverse: flex flex-row-reverse xs:flex-row-reverse sm:flex-row-reverse

Flex Col: flex flex-col

Flex Col Reverse: flex flex-col-reverse xs:flex-col-reverse sm:flex-col-reverse

Flex Wrap: flex flex-wrap

Flex nowrap: flex flex-wrap flex-nowrap

Flex - Align Content

Content align start: flex flex-wrap items-start content-start

Content align center: flex flex-wrap items-start content-center

Content align end: flex flex-wrap items-start content-end

Content space between:
flex flex-wrap content-between

Content space stretch:
flex flex-wrap content-stretch

Content space evenly:
flex flex-wrap content-evenly

Content space around:
flex flex-wrap content-around

Flex - Justify Content

Justify start: flex flex-wrap items-center align-center justify-start

Justify center: flex flex-wrap items-center align-center justify-center

Justify end: flex flex-wrap items-center align-center justify-end

Justify space between:
flex flex-wrap justify-between

Justify space stretch:
flex flex-wrap justify-stretch

Justify space evenly:
flex flex-wrap content-evenly justify-evenly

Justify space around:
flex flex-wrap content-evenly justify-around

Flex - Align Items

Align Inside ROW

Align items stretch: flex flex-wrap content-center items-stretch

Align items start: flex flex-wrap content-center items-start xs:items-start

Align items center: flex flex-wrap content-center items-center xs:items-center

Align items end: flex flex-wrap content-center items-end xs:items-end

Paddings

Padding bottom: pb-1 = 4px

pb-1 pb-1.5

6px

pb-2

8px

pb-3

10px

pb-4

16px

pb-5

20px

pb-6

24px

pb-8

32px

pb-10

40px

pb-16

64px

pb-20 xs:pb-20

80px

pb-32

128px

pb-64

256px

Padding top pt-1 = 4px

pt-1 xs:pt-1 pt-1.5

6px

pt-2

8px

pt-3

10px

pt-4

16px

pt-5

20px

pt-6

24px

pt-8

32px

pt-10

40px

pt-16

64px

pt-20 xs:pt-20

80px

pt-32

128px

pt-64

256px

Padding left

pl-0 xs:pl-0

0px

pl-1

4px

pl-2 xs:pl-2

8px

pl-3

10px

pl-4 xs:pl-4

16px

pl-5 xs:pl-5

20px

pl-6 xs:pl-6

24px

pl-8

32px

pl-10

40px

pl-16 xs:pl-16

64px

pl-20

80px

pl-32

128px

pl-64

256px

Padding right

pr-0 xs:pr-0

0px

pr-1

4px

pr-2 xs:pr-2

8px

pr-3

10px

pr-4 xs:pr-4

16px

pr-5 xs:pr-5

20px

pr-6 xs:pr-6

24px

pr-8

32px

pr-10

40px

pr-16 xs:pr-16

64px

pr-20

80px

pr-32

128px

pr-64

256px

Paddings combined

[0px] p-0

[4px] p-1

[8px] p-2

[12px] p-3

[16px] p-4

[18px] p-5

[24px] p-6

[32px] p-8

[40px] p-10

[64px] p-16

[80px] p-20

[128px] p-32

[256px] p-64

Margins

[auto] mt-auto mb-auto ml-auto mr-auto --||-- mx-auto my-auto

[0px] mt-0 mb-0 ml-0 mr-0 xs:mt-0 xs:mb-0 xs:ml-0 xs:mr-0

[4px] mt-1 mb-1 ml-1 mr-1

[8px] mt-2 mb-2 ml-2 mr-2

[12px] mt-3 mb-3 ml-3 mr-3 xs:ml-3 xs:mr-3

[16px] mt-4 mb-4 ml-4 mr-4

[18px] mt-5 mb-5 ml-5 mr-5

[24px] mt-6 mb-6 ml-6 mr-6 xs:ml-6 xs:mr-6

[32px] mt-8 mb-8 ml-8 mr-8

[40px] mt-10 mb-10 ml-10 mr-10

[64px] mt-16 mb-16 ml-16 mr-16

[80px] mt-20 mb-20 ml-20 mr-20

[128px] mt-32 mb-32 ml-32 mr-32

[256px] mt-64 mb-64 ml-64 mr-64

Heading 1

This is a paragraph of text using Tailwind CSS's Prose class for styling. It helps in formatting text content.

Heading 2

This is another paragraph of text.

List item 1
List item 2
- Nested list item 1
- Nested list item 2
List item 3

Heading 3

Another paragraph of text.

This is a blockquote. Tailwind Prose styles make it easy to create nicely formatted content.

Ordered list item 1
Ordered list item 2
1. Nested list item 1
2. Nested list item 2
Ordered list item 3

Heading 4

Final paragraph:

This is a link
Strong text
Emphasized text
~~Deleted text~~
Inserted text
Highlighted text
Abbr
^Superscript
_Subscript
Small text
Hotkey: Ctrl + C.
Sample output
Variable
Use this var: {example: Inline code} in your message.

{example: Code inside paragraph}

The code outside paragraph

Code block

Text align

text-left

text-center

text-right

text-justify

Text decoration

italic

underline

line-through

no-underline not-italic

Font weight

font-light

The quick brown fox ...

font-normal

The quick brown fox ...

font-medium

The quick brown fox ...

font-semibold

The quick brown fox ...

font-bold

The quick brown fox ...

Headings

text-h1

The quick brown fox

text-h2

The quick brown fox

text-h3

The quick brown fox

text-h4

The quick brown fox

Word break

break-normal

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles

break-all

break-words

Borders

Tip: adding border-solid is necessary for Using without Preflight

Combined: border-solid border -- || -- border-solid border-*

Def

Separated: border-t border-b border-l border-r -- || -- border-solid border-%-*

Def

Style: border-solid / border-dashed / border-dotted / border-none

Solid

Dashed

Dotted

None

Style Hover: hover:border-solid / hover:border-dashed / hover:border-dotted / hover:border-none / hover:border-transparent

Solid

Dashed

Dotted

None

Transparent

Border Radius

Combined: rounded-*

none

2xl

3xl

full

none

Separated: rounded-%-*

none

2xl

3xl

full

Shadow static: shadow -- || -- shadow-*

default

inner

none

Shadow hover: hover:shadow -- || -- hover:shadow-*

default

inner

none

Transitions

transition ease-linear duration-150 -- || -- transition ease-out duration-300

Animations

animate-spin, animate-ping, animate-bounce, animate-pulse

Processing...Transactions

Bg Color Transparency

Dark: bg-black bg-opacity-*

100

Light: bg-white bg-opacity-*

100

All Bg Colors

bg-colorName-ToneCode (for gray, neutral and (main colors) also dark:bg-...)

Gray / Асфальтовый

#f9fafb

100

#f3f4f6

200

#e5e7eb

300

#d1d5db

400

#9ca3af

500

#6b7280

600

#4b5563

700

#374151

800

#1f2937

900

#111827

950

#030712

Zinc / Цинковый

#fafafa

100

#f4f4f5

200

#e4e4e7

300

#d4d4d8

400

#a1a1aa

500

#71717a

600

#52525b

700

#3f3f46

800

#27272a

900

#18181b

950

#09090b

Neutral / Серый

#fafafa

100

#f5f5f5

200

#e5e5e5

300

#d4d4d4

400

#a3a3a3

500

#737373

600

#525252

700

#404040

800

#262626

900

#171717

950

#0a0a0a

Stone / Каменный

#fafaf9

100

#f5f5f4

200

#e7e5e4

300

#d6d3d1

400

#a8a29e

500

#78716c

600

#57534e

700

#44403c

800

#292524

900

#1c1917

950

#0c0a09

Red / Красный

#fef2f2

100

#fee2e2

200

#fecaca

300

#fca5a5

400

#f87171

500

#ef4444

600

#dc2626

700

#b91c1c

800

#991b1b

900

#7f1d1d

950

#450a0a

Orange / Оранжевый

#fff7ed

100

#ffedd5

200

#fed7aa

300

#fdba74

400

#fb923c

500

#f97316

600

#ea580c

700

#c2410c

800

#9a3412

900

#7c2d12

950

#431407

Amber / Янтарный

#fffbeb

100

#fef3c7

200

#fde68a

300

#fcd34d

400

#fbbf24

500

#f59e0b

600

#d97706

700

#b45309

800

#92400e

900

#78350f

950

#451a03

Yellow / Желтый

#fefce8

100

#fef9c3

200

#fef08a

300

#fde047

400

#facc15

500

#eab308

600

#ca8a04

700

#a16207

800

#854d0e

900

#713f12

950

#422006

Lime / Лайм

#f7fee7

100

#ecfccb

200

#d9f99d

300

#bef264

400

#a3e635

500

#84cc16

600

#65a30d

700

#4d7c0f

800

#3f6212

900

#365314

950

#1a2e05

Green / Зеленый

#f0fdf4

100

#dcfce7

200

#bbf7d0

300

#86efac

400

#4ade80

500

#22c55e

600

#16a34a

700

#15803d

800

#166534

900

#14532d

950

#052e16

Emerald / Изумрудный

#ecfdf5

100

#d1fae5

200

#a7f3d0

300

#6ee7b7

400

#34d399

500

#10b981

600

#059669

700

#047857

800

#065f46

900

#064e3b

950

#022c22

Teal / Бирюзовый

#f0fdfa

100

#ccfbf1

200

#99f6e4

300

#5eead4

400

#2dd4bf

500

#14b8a6

600

#0d9488

700

#0f766e

800

#115e59

900

#134e4a

950

#042f2e

Cyan / Морской

#ecfeff

100

#cffafe

200

#a5f3fc

300

#67e8f9

400

#22d3ee

500

#06b6d4

600

#0891b2

700

#0e7490

800

#155e75

900

#164e63

950

#083344

Sky / Голубой

#f0f9ff

100

#e0f2fe

200

#bae6fd

300

#7dd3fc

400

#38bdf8

500

#0ea5e9

600

#0284c7

700

#0369a1

800

#075985

900

#0c4a6e

950

#082f49

Blue / Синий

#eff6ff

100

#dbeafe

200

#bfdbfe

300

#93c5fd

400

#60a5fa

500

#3b82f6

600

#2563eb

700

#1d4ed8

800

#1e40af

900

#1e3a8a

950

#172554

Indigo / Индиго

#eef2ff

100

#e0e7ff

200

#c7d2fe

300

#a5b4fc

400

#818cf8

500

#6366f1

600

#4f46e5

700

#4338ca

800

#3730a3

900

#312e81

950

#1e1b4b

Violet / Фиолетовый

#f5f3ff

100

#ede9fe

200

#ddd6fe

300

#c4b5fd

400

#a78bfa

500

#8b5cf6

600

#7c3aed

700

#6d28d9

800

#5b21b6

900

#4c1d95

950

#2e1065

Purple / Пурпурный

#faf5ff

100

#f3e8ff

200

#e9d5ff

300

#d8b4fe

400

#c084fc

500

#a855f7

600

#9333ea

700

#7e22ce

800

#6b21a8

900

#581c87

950

#3b0764

Fuchsia / Фуксия

#fdf4ff

100

#fae8ff

200

#f5d0fe

300

#f0abfc

400

#e879f9

500

#d946ef

600

#c026d3

700

#a21caf

800

#86198f

900

#701a75

950

#4a044e

Pink / Розовый

#fdf2f8

100

#fce7f3

200

#fbcfe8

300

#f9a8d4

400

#f472b6

500

#ec4899

600

#db2777

700

#be185d

800

#9d174d

900

#831843

950

#500724

Rose / Вишневый

#fff1f2

100

#ffe4e6

200

#fecdd3

300

#fda4af

400

#fb7185

500

#f43f5e

600

#e11d48

700

#be123c

800

#9f1239

900

#881337

950

#4c0519

Main Colors

bg-colorName-ToneCode

primary

100

200

300

400

500

600

700

800

secondary

100

200

300

400

500

600

700

800

success

100

200

300

400

500

600

700

800

info

100

200

300

400

500

600

700

800

warning

100

200

300

400

500

600

700

800

danger

100

200

300

400

500

600

700

800

Base Colors

Black And White: text-black, text-white, text-inherit, text-current, text-transparent

Black

White

Inherit

Current

Transparent

Main Text Colors

Primary: text-primary-* border-primary-*

100

200

300

400

500

600

700

800

900

950

Secondary: text-secondary-* border-secondary-*

100

200

300

400

500

600

700

800

900

950

Success:text-success-* border-success-*

100

200

300

400

500

600

700

800

900

950

Info:text-info-* border-info-*

100

200

300

400

500

600

700

800

900

950

Warning:text-warning-* border-warning-*

100

200

300

400

500

600

700

800

900

950

Danger:text-danger-* border-danger-*

100

200

300

400

500

600

700

800

900

950

All Text Colors

text-colorName-ToneCode -- and -- border-colorName-ToneCode

Gray

100

200

300

400

500

600

700

800

900

950

Zinc

100

200

300

400

500

600

700

800

900

950

Neutral

100

200

300

400

500

600

700

800

900

950

Stone

100

200

300

400

500

600

700

800

900

950

Red

100

200

300

400

500

600

700

800

900

950

Orange

100

200

300

400

500

600

700

800

900

950

Amber

100

200

300

400

500

600

700

800

900

950

Yellow

100

200

300

400

500

600

700

800

900

950

Lime

100

200

300

400

500

600

700

800

900

950

Green

100

200

300

400

500

600

700

800

900

950

Emerald

100

200

300

400

500

600

700

800

900

950

Teal

100

200

300

400

500

600

700

800

900

950

Cyan

100

200

300

400

500

600

700

800

900

950

Sky

100

200

300

400

500

600

700

800

900

950

Blue

100

200

300

400

500

600

700

800

900

950

Indigo

100

200

300

400

500

600

700

800

900

950

Violet

100

200

300

400

500

600

700

800

900

950

Purple

100

200

300

400

500

600

700

800

900

950

Fuchsia

100

200

300

400

500

600

700

800

900

950

Pink

100

200

300

400

500

600

700

800

900

950

Rose

100

200

300

400

500

600

700

800

900

950

Alerts

A simple primary alert!

A simple secondary alert!

A simple success alert!

A simple danger alert!

A simple warning alert!

A simple info alert!

A simple light alert!

A simple dark alert!

Display

block

inline-block

inline

inline-flex

flex-col

hidden this text is hidden

Responsive

Inline block

[start-screen] : [hidden | block | inline-block | ib]

base:hidden xs:ibib xs:hidden

sm:hidden sm:ibib sm:hidden

md:hidden md:ibib md:hidden

lg:hidden lg:ibib lg:hidden

xl:hidden xl:ibib xl:hidden

combined example
from sm to lg (or inverted):inline-block sm:hidden lg:inline-blockhidden sm:ib lg:hidden
important to use «inline-block» instead of «ib»!

Responsive block

hidden xs:block

hidden sm:block

hidden md:block

hidden lg:block

hidden xl:block

Screens & Containers

container-xs: 576px @media (min-width: 576px)

container-sm: 768px @media (min-width: 768px)

container-md: 992px @media (min-width: 992px)

container-lg: 1200px @media (min-width: 1200px)

container-xl: 1600px @media (min-width: 1600px)

container: adaptive (100%, 768px, 992px, 1200px, 1600px)