Tailwind CSS常用样式记录

Tailwind CSS 提供了大量的实用工具类来实现常见的 CSS 样式。以下是 100 种常见的 CSS 样式及其在 Tailwind 中的写法：

1. Margin

   • margin: 0; -> m-0
   • margin-top: 1rem; -> mt-4
   • margin-right: 2rem; -> mr-8

2. Padding

   • padding: 0; -> p-0
   • padding-top: 1rem; -> pt-4
   • padding-right: 2rem; -> pr-8

3. Width

   • width: 100%; -> w-full
   • width: 50%; -> w-1/2
   • width: calc(100% - 2rem); -> w-[calc(100%-2rem)]

4. Height

   • height: 100%; -> h-full
   • height: 50vh; -> h-1/2
   • height: calc(100vh - 4rem); -> h-[calc(100vh-4rem)]

5. Text Align

   • text-align: left; -> text-left
   • text-align: center; -> text-center
   • text-align: right; -> text-right

6. Font Size

   • font-size: 1rem; -> text-base
   • font-size: 2rem; -> text-2xl
   • font-size: 3rem; -> text-3xl

7. Font Weight

   • font-weight: 400; -> font-normal
   • font-weight: 700; -> font-bold
   • font-weight: 900; -> font-black

8. Line Height

   • line-height: 1; -> leading-none
   • line-height: 1.5; -> leading-snug
   • line-height: 2; -> leading-loose

9. Background Color

   • background-color: #fff; -> bg-white
   • background-color: #000; -> bg-black
   • background-color: #f00; -> bg-red-500

10. Text Color

    • color: #fff; -> text-white
    • color: #000; -> text-black
    • color: #f00; -> text-red-500

11. Border Width

    • border-width: 1px; -> border
    • border-width: 2px; -> border-2
    • border-width: 0; -> border-0

12. Border Color

    • border-color: #fff; -> border-white
    • border-color: #000; -> border-black
    • border-color: #f00; -> border-red-500

13. Border Radius

    • border-radius: 0; -> rounded-none
    • border-radius: 0.25rem; -> rounded
    • border-radius: 0.5rem; -> rounded-md

14. Display

    • display: block; -> block
    • display: inline-block; -> inline-block
    • display: flex; -> flex

15. Flex Direction

    • flex-direction: row; -> flex-row
    • flex-direction: column; -> flex-col
    • flex-direction: row-reverse; -> flex-row-reverse

16. Justify Content

    • justify-content: flex-start; -> justify-start
    • justify-content: center; -> justify-center
    • justify-content: space-between; -> justify-between

17. Align Items

    • align-items: stretch; -> items-stretch
    • align-items: center; -> items-center
    • align-items: flex-start; -> items-start

18. Position

    • position: static; -> static
    • position: relative; -> relative
    • position: absolute; -> absolute

19. Top, Right, Bottom, Left

    • top: 0; -> top-0
    • right: 0; -> right-0
    • bottom: 0; -> bottom-0
    • left: 0; -> left-0

20. Overflow

    • overflow: visible; -> overflow-visible
    • overflow: hidden; -> overflow-hidden
    • overflow: scroll; -> overflow-scroll

21. Visibility

    • visibility: visible; -> visible
    • visibility: hidden; -> invisible

22. Z-Index

    • z-index: 0; -> z-0
    • z-index: 10; -> z-10
    • z-index: 50; -> z-50

23. Opacity

    • opacity: 1; -> opacity-100
    • opacity: 0.5; -> opacity-50
    • opacity: 0; -> opacity-0

24. Box Shadow

    • box-shadow: none; -> shadow-none
    • box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -> shadow-sm
    • box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); -> shadow-md

25. Cursor

    • cursor: pointer; -> cursor-pointer
    • cursor: not-allowed; -> cursor-not-allowed
    • cursor: text; -> cursor-text

26. Text Transform

    • text-transform: uppercase; -> uppercase
    • text-transform: lowercase; -> lowercase
    • text-transform: capitalize; -> capitalize

27. Letter Spacing

    • letter-spacing: normal; -> tracking-normal
    • letter-spacing: 0.1em; -> tracking-wide
    • letter-spacing: -0.05em; -> tracking-tight

28. List Style Type

    • list-style-type: none; -> list-none
    • list-style-type: disc; -> list-disc
    • list-style-type: decimal; -> list-decimal

29. Text Decoration

    • text-decoration: underline; -> underline
    • text-decoration: line-through; -> line-through
    • text-decoration: none; -> no-underline

30. Font Style

    • font-style: italic; -> italic
    • font-style: normal; -> not-italic

31. Background Size

    • background-size: auto; -> bg-auto
    • background-size: cover; -> bg-cover
    • background-size: contain; -> bg-contain

32. Background Position

    • background-position: center; -> bg-center
    • background-position: top; -> bg-top
    • background-position: bottom; -> bg-bottom

33. Background Repeat

    • background-repeat: repeat; -> bg-repeat
    • background-repeat: no-repeat; -> bg-no-repeat
    • background-repeat: repeat-x; -> bg-repeat-x

34. Background Attachment

    • background-attachment: scroll; -> bg-scroll
    • background-attachment: fixed; -> bg-fixed
    • background-attachment: local; -> bg-local

35. Border Style

    • border-style: solid; -> border-solid
    • border-style: dashed; -> border-dashed
    • border-style: dotted; -> border-dotted

36. Float

    • float: left; -> float-left
    • float: right; -> float-right
    • float: none; -> float-none

37. Clear

    • clear: left; -> clear-left
    • clear: right; -> clear-right
    • clear: both; -> clear-both

38. Object Fit

    • object-fit: contain; -> object-contain
    • object-fit: cover; -> object-cover
    • object-fit: fill; -> object-fill

39. Object Position

    • object-position: center; -> object-center
    • object-position: top; -> object-top
    • object-position: bottom; -> object-bottom

40. Overflow X

    • overflow-x: visible; -> overflow-x-visible
    • overflow-x: hidden; -> overflow-x-hidden
    • overflow-x: scroll; -> overflow-x-scroll

41. Overflow Y

    • overflow-y: visible; -> overflow-y-visible
    • overflow-y: hidden; -> overflow-y-hidden
    • overflow-y: scroll; -> overflow-y-scroll

42. Order

    • order: 1; -> order-1
    • order: 2; -> order-2
    • order: -1; -> order-first

43. Flex Wrap

    • flex-wrap: nowrap; -> flex-nowrap
    • flex-wrap: wrap; -> flex-wrap
    • flex-wrap: wrap-reverse; -> flex-wrap-reverse

44. Flex Grow

    • flex-grow: 0; -> flex-grow-0
    • flex-grow: 1; -> flex-grow

45. Flex Shrink

    • flex-shrink: 0; -> flex-shrink-0
    • flex-shrink: 1; -> flex-shrink

46. Grid Template Columns

    • grid-template-columns: none; -> grid-cols-none
    • grid-template-columns: repeat(3, minmax(0, 1fr)); -> grid-cols-3
    • grid-template-columns: 1fr 2fr; -> grid-cols-[1fr_2fr]

47. Grid Column Start / End

    • grid-column: 1 / span 2; -> col-span-2
    • grid-column: auto / auto; -> col-auto

48. Grid Template Rows

    • grid-template-rows: none; -> grid-rows-none
    • grid-template-rows: repeat(3, minmax(0, 1fr)); -> grid-rows-3
    • grid-template-rows: 1fr 2fr; -> grid-rows-[1fr_2fr]

49. Grid Row Start / End

    • grid-row: 1 / span 2; -> row-span-2
    • grid-row: auto / auto; -> row-auto

50. Grid Gap

    • gap: 0; -> gap-0
    • gap: 1rem; -> gap-4
    • gap: 2rem; -> gap-8

51. Grid Column Gap

    • column-gap: 0; -> col-gap-0
    • column-gap: 1rem; -> col-gap-4
    • column-gap: 2rem; -> col-gap-8

52. Grid Row Gap

    • row-gap: 0; -> row-gap-0
    • row-gap: 1rem; -> row-gap-4
    • row-gap: 2rem; -> row-gap-8

53. Place Content

    • place-content: center; -> place-content-center
    • place-content: start; -> place-content-start
    • place-content: end; -> place-content-end

54. Place Items

    • place-items: center; -> place-items-center
    • place-items: start; -> place-items-start
    • place-items: end; -> place-items-end

55. Place Self

    • place-self: auto; -> place-self-auto
    • place-self: start; -> place-self-start
    • place-self: end; -> place-self-end

56. Top/Right/Bottom/Left

    • top: 1rem; -> top-4
    • right: 1rem; -> right-4
    • bottom: 1rem; -> bottom-4
    • left: 1rem; -> left-4

57. Min Width

    • min-width: 0; -> min-w-0
    • min-width: 100%; -> min-w-full

58. Min Height

    • min-height: 0; -> min-h-0
    • min-height: 100vh; -> min-h-screen

59. Max Width

    • max-width: none; -> max-w-none
    • max-width: 100%; -> max-w-full
    • max-width: 50rem; -> max-w-2xl

60. Max Height

    • max-height: none; -> max-h-none
    • max-height: 100vh; -> max-h-screen

61. Pointer Events

    • pointer-events: none; -> pointer-events-none
    • pointer-events: auto; -> pointer-events-auto

62. Resize

    • resize: none; -> resize-none
    • resize: both; -> resize
    • resize: horizontal; -> resize-x
    • resize: vertical; -> resize-y

63. Stroke

    • stroke: currentColor; -> stroke-current

64. Stroke Width

    • stroke-width: 0; -> stroke-0
    • stroke-width: 1; -> stroke-1
    • stroke-width: 2; -> stroke-2

65. Fill

    • fill: none; -> fill-none
    • fill: currentColor; -> fill-current

66. Table Layout

    • table-layout: auto; -> table-auto
    • table-layout: fixed; -> table-fixed

67. Text Overflow

    • text-overflow: ellipsis; -> text-ellipsis
    • text-overflow: clip; -> text-clip

68. Transform

    • transform: scale(1); -> transform
    • transform: scale(1.5); -> scale-150
    • transform: rotate(45deg); -> rotate-45

69. Transform Origin

    • transform-origin: center; -> origin-center
    • transform-origin: top; -> origin-top
    • transform-origin: bottom; -> origin-bottom

70. Translate

    • translate-x: 0; -> translate-x-0
    • translate-x: 50%; -> translate-x-1/2
    • translate-y: 0; -> translate-y-0
    • translate-y: 50%; -> translate-y-1/2

71. Scale

    • scale: 1; -> scale-100
    • scale: 1.5; -> scale-150
    • scale: 0.5; -> scale-50

72. Rotate

    • rotate: 0deg; -> rotate-0
    • rotate: 45deg; -> rotate-45
    • rotate: -45deg; -> -rotate-45

73. Skew

    • skew-x: 0deg; -> skew-x-0
    • skew-x: 10deg; -> skew-x-10
    • skew-y: 0deg; -> skew-y-0
    • skew-y: 10deg; -> skew-y-10

74. Transition Property

    • transition-property: none; -> transition-none
    • transition-property: all; -> transition-all
    • transition-property: opacity; -> transition-opacity

75. Transition Duration

    • transition-duration: 150ms; -> duration-150
    • transition-duration: 300ms; -> duration-300

76. Transition Timing Function

    • transition-timing-function: ease; -> ease
    • transition-timing-function: linear; -> linear
    • transition-timing-function: ease-in; -> ease-in

77. Transition Delay

    • transition-delay: 75ms; -> delay-75
    • transition-delay: 150ms; -> delay-150

78. Animation

    • animation: none; -> animate-none
    • animation: spin; -> animate-spin
    • animation: ping; -> animate-ping

79. List Style Position

    • list-style-position: inside; -> list-inside
    • list-style-position: outside; -> `list-out

80. Backdrop Filter

    • backdrop-filter: none; -> backdrop-filter-none
    • backdrop-filter: blur(10px); -> backdrop-blur-[10px]
    • backdrop-filter: contrast(200%); -> backdrop-contrast-[200%]

81. Box Sizing

    • box-sizing: border-box; -> box-border
    • box-sizing: content-box; -> box-content

82. Caret Color

    • caret-color: #000; -> caret-black
    • caret-color: #fff; -> caret-white

83. Grid Auto Columns

    • grid-auto-columns: auto; -> auto-cols-auto
    • grid-auto-columns: minmax(0, 1fr); -> auto-cols-min

84. Grid Auto Rows

    • grid-auto-rows: auto; -> auto-rows-auto
    • grid-auto-rows: minmax(0, 1fr); -> auto-rows-min

85. Justify Items

    • justify-items: start; -> justify-items-start
    • justify-items: center; -> justify-items-center
    • justify-items: end; -> justify-items-end

86. Justify Self

    • justify-self: start; -> justify-self-start
    • justify-self: center; -> justify-self-center
    • justify-self: end; -> justify-self-end

87. Object Fit

    • object-fit: contain; -> object-contain
    • object-fit: cover; -> object-cover
    • object-fit: fill; -> object-fill

88. Outline

    • outline: 2px solid transparent; -> outline-none
    • outline: 2px dashed #000; -> outline-dashed
    • outline-offset: 2px; -> outline-offset-2

89. Place Content

    • place-content: center; -> place-content-center
    • place-content: start; -> place-content-start
    • place-content: end; -> place-content-end

90. Scroll Behavior

    • scroll-behavior: auto; -> scroll-auto
    • scroll-behavior: smooth; -> scroll-smooth

91. Scroll Snap Align

    • scroll-snap-align: start; -> snap-start
    • scroll-snap-align: center; -> snap-center
    • scroll-snap-align: end; -> snap-end

92. Scroll Snap Stop

    • scroll-snap-stop: normal; -> snap-normal
    • scroll-snap-stop: always; -> snap-always

93. Scroll Snap Type

    • scroll-snap-type: none; -> snap-none
    • scroll-snap-type: x mandatory; -> snap-x
    • scroll-snap-type: y mandatory; -> snap-y

94. Touch Action

    • touch-action: auto; -> touch-auto
    • touch-action: none; -> touch-none
    • touch-action: manipulation; -> touch-manipulation

95. User Select

    • user-select: none; -> select-none
    • user-select: text; -> select-text
    • user-select: all; -> select-all

96. Vertical Align

    • vertical-align: baseline; -> align-baseline
    • vertical-align: top; -> align-top
    • vertical-align: middle; -> align-middle

97. Visibility

    • visibility: visible; -> visible
    • visibility: hidden; -> invisible

98. Whitespace

    • white-space: normal; -> whitespace-normal
    • white-space: nowrap; -> whitespace-nowrap
    • white-space: pre; -> whitespace-pre

99. Word Break

    • word-break: break-all; -> break-all
    • word-break: keep-all; -> break-keep
    • word-break: break-word; -> break-word

100. Writing Mode - writing-mode: horizontal-tb; -> writing-horizontal - writing-mode: vertical-rl; -> writing-vertical - writing-mode: vertical-lr; -> writing-vertical-lr

这些 Tailwind CSS 类可以帮助你快速地应用常见的 CSS 样式，而不需要编写传统的 CSS 代码。通过这些实用工具类，你可以大大提高开发效率，并且保持代码的一致性和可维护性。