Article One
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem laboriosam libero molestiae recusandae accusantium voluptates? Expedita dignissimos amet eveniet dolore nobis odio a sunt, maiores quasi. Modi amet quos dolores!
Colors
Text colors
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Background colors
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Text underline
Tailwind is awesome
Tailwind is awesome
Border colors
Divide colors
Item 1
Item 2
Item 4
Item 5
Item 6
Outline colors
Box shadow colors
Accent colors
Option 1 Option 2 Option 3Arbitrary colors
Hello
Hello
Hello
Alert message component
With CSS
With Tailwind CSS
Are you sure?
You are about to delete a post
Container spacing
Margin
m-4
mx-4
my-4
mt-6
mr-4
mb-8
ml-2
ml-[200px]
Padding
p-4
px-4
py-4
pt-6
pr-4
pb-8
pl-2
Space Between X
01
02
03
Space Between Y
01
02
03
Typography
Font family
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Font size
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Font weight
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Letter spacing
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Text alignment
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Text decoration
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Decoration style
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Decoration offset
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Text transform
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Tailwind is awesome
Sizing
Width
w-0
w-1
w-1.5
w-2
w-3
w-5
w-6
w-7
w-8
w-9
w-10
w-11
w-12
By 2
w-14
w-16
By 4
w-20
w-24
w-28
w-32
...
w-36
By 8
w-64
By 16
w-80
w-96
Auto
Percentages
w-1/2
w-1/3
w-2/3
w-1/4
w-2/4
w-3/4
w-1/5
Width of the viewport
w-screen
100% of container
w-full
min/max content
w-min
w-max
Arbitrary Width
150px
Max Width
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum perferendis incidunt nihil ullam repellendus praesentium consectetur et sed distinctio, magni iusto quos repellat officiis cum dolore aliquid minus esse pariatur.
Height (Most of the same options as widths)
h-24
h-32
h-40
h-48
h-64
h-80
Min Height
Tailwind is awesome
Max Height
Tailwind is awesome
Full screen height
Hello
Layout position
Positioning
Relative parent
Absolute child
Top left corner
01
Top right corner
03
Bottom left corner
07
Bottom right corner
09
Span top edge
02
Span left edge
04
Span right edge
06
Span bottom edge
08
Display classes
Lorem ipsum dolor sit amet, consectetur adipisicing elit. VoluptatibusThis is display inline and will wrap normallysapiente ut rerum esse ullam provident, fugitThis is display inline-block and will not extend beyond it's parenteos quamThis is display block and will move to it's own linereprehenderit est hic aut unde sequi, officia, ipsa amet doloribus rationeThis is display none and will not display at allad.
Z-index
1
2
3
4
5
Floats
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere numquam voluptatem accusantium atque cupiditate nulla ratione saepe veniam, ex iure nisi mollitia sed rerum veritatis temporibus iusto! Molestiae, ratione doloribus?
Background and shadows
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus deleniti iusto delectus alias natus quam dolor explicabo quas eius!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus deleniti iusto delectus alias natus quam dolor explicabo quas eius!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus deleniti iusto delectus alias natus quam dolor explicabo quas eius!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus deleniti iusto delectus alias natus quam dolor explicabo quas eius!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus deleniti iusto delectus alias natus quam dolor explicabo quas eius!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus deleniti iusto delectus alias natus quam dolor explicabo quas eius!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus deleniti iusto delectus alias natus quam dolor explicabo quas eius!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus deleniti iusto delectus alias natus quam dolor explicabo quas eius!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus deleniti iusto delectus alias natus quam dolor explicabo quas eius!
Borders and border radius
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus dolores.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus dolores.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus dolores.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus dolores.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus dolores.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus dolores.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus dolores.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus dolores.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus dolores.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus dolores.
Border-radius
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus dolores.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus dolores.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus dolores.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus dolores.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus dolores.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus dolores.
Specific sides
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus dolores.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur reiciendis odio eaque vitae nostrum sunt tempora deleniti repellendus dolores.
Outline
Filters
Blur
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque deserunt animi quas aliquam consectetur ut obcaecati voluptas repudiandae odit harum?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque deserunt animi quas aliquam consectetur ut obcaecati voluptas repudiandae odit harum?
Brightness
Contrast
Grayscale, invert, sepia
Hue rotate
Saturation
