1. Colors With Different Shades

text-indigo-50

text-indigo-100

text-indigo-200

text-indigo-300

text-indigo-400

text-indigo-500

text-indigo-600

text-indigo-700

text-indigo-800

text-indigo-900

2. Background Colors

bg-pink-600

bg-red-400

bg-blue-600

3. Text Decoration

line-through

underline

overline

decoration-purple-400

text-purple-600 underline decoration-purple-400

4. Accent Colors

accent-indigo-500

accent-yellow-500

accent-red-300

5. Arbitrary Colors

Hello

6. Margin

Margin all around

Margin from x axies

Margin Y axies

Margin Top

Margin Right

Margin Left

Margin Bottom

7. Margin all around

Margin all around

8. Padding

Padding all around

Padding X axies

Padding Y axies

Padding Top

Padding Right

Padding Bottom

Padding Left

9. Space Between X

10. Space Between Y

11. Font Sizes

Tailwind is awesome

12. Font Family

Tailwind is awesome

13. Font Weight

Tailwind is awesome

14. Letter Spacing

Tailwind is awesome

15. Text Alighnment

Tailwind is awesome

16. Text Decoration

Tailwind is awesome

17. Decoration Style

Tailwind is awesome

18. Decoration Offset

Tailwind is awesome

19. Text Transform

Tailwind is awesome

20. Width All Around

1.5

21. Percentages

1/2

1/3

2/3

1/4

2/4

3/4

1/5

22. Max Width

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas mollitia soluta harum officia, repellat odit ratione, eligendi voluptatem dolor magni ad ipsum eaque quae iusto ullam odio voluptate. Eos culpa dolore fugit ad enim consectetur iure temporibus explicabo voluptas ratione. Fuga expedita dicta vero, ipsa accusantium illo aut corrupti nulla ipsam ex, a sunt alias natus ratione. Explicabo sunt, dolor optio harum possimus quo blanditiis velit fugiat officiis, voluptatem, pariatur quisquam omnis? Debitis porro id aspernatur possimus, earum dolorum quia! Aperiam aliquam totam illo praesentium, fugit repellendus! Assumenda optio autem quae odit voluptatem ad facere et quas, itaque, inventore nihil.

23. VW & Width100%

(vw) screen

(width 100%) w-full

Arbitrary Width (500px)

24. Height All Around

height 24

height 32

height 40

height 48

height 64

height 80

25. Min Height Full

Take Full Height

26. Max Height Full

Max Height Full

27. Full Screen Height

Hello

28. Width Auto

Auto

29. Position

Relative

Absolute

Relative

Absolute

Relative

Absolute

Relative

Absolute

30. Display

1. This is display inline and will wrap normally (this gebrish will added as an inline text) 2. This is display inline-block and will not extend beyond it's parent 3. This is display block and will move to it's own line

31. Background Images

32. Background Images

Shadow Medium

Shadow Large

Shadow Extra Large

Shadow 2x Extra Large

Inner Shadow

Colord Shadow

33. Gradients

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta quas eaque doloribus esse, obcaecati consectetur aperiam odit, deserunt officiis natus magni perspiciatis iure quos hic eveniet ipsum voluptas? Corrupti, neque?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est animi enim optio illum necessitatibus dolorem harum eaque. Necessitatibus velit consectetur quisquam consequuntur perspiciatis, similique ad libero, dolores eum, quia perferendis.

34. Border Width & Colors

Border All Around

Border Width

Colord Border

Border Applied To X Axies

Border Applied To Y Axies

Border Right

Border Left

Border Bottom

Border Top

35. Border Radius

Border Rounded

Border Rounded Large

Border Rounded Extra Large

Border Rounded 2xl

Border 3xl

Border Rounded Full

Border Top Rounded

Border Bottom Rounded

Tailwindcss之用法

1. Colors With Different Shades

2. Background Colors

3. Text Decoration

4. Accent Colors

5. Arbitrary Colors

6. Margin

7. Margin all around

8. Padding

9. Space Between X

10. Space Between Y

11. Font Sizes

12. Font Family

13. Font Weight

14. Letter Spacing

15. Text Alighnment

16. Text Decoration

17. Decoration Style

18. Decoration Offset

19. Text Transform

20. Width All Around

21. Percentages

22. Max Width

23. VW & Width100%

24. Height All Around

25. Min Height Full

26. Max Height Full

27. Full Screen Height

28. Width Auto

29. Position

30. Display

31. Background Images

32. Background Images

33. Gradients

34. Border Width & Colors

35. Border Radius

36. Contrast

37. Brightness

38. Grayscale

39. Hue Rotate

40. Saturate

40. Blur

41. Open DevTool (Responsive Mood)

Hello Tailwind

42. flex

flex-row

flex-col

justify-start

justify-end

justify-center

justify-between

justify-around

order

grow and shrink

43. Grid

grid cols and rows

Col and row span

44. Transition

45. Transition