Tailwind CSS 备忘清单
Tailwind CSS 是一个功能类优先的 CSS 框架,它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类,它们能直接在脚本标记语言中组合起来,构建出任何设计。
Tailwind CSS 包含几乎所有的常见工具类。包括:
布局: 盒模型,overflow,浮动,Position 定位,Flex 布局,Grid 布局等。
响应式: 定义了5个断点(sm, md, lg, xl, 2xl)。
尺寸:margin,padding,宽,高。
背景和边框。
字体。
颜色:定义了至少 80 种颜色。
渐变和动画。
伪类:Hover,Focus 等。
暗色模式(Dark Mode)。
IT宝库网整理的此交互式备忘单快速查找所有类名和 CSS 属性,为开发人员分享快速参考备忘单。
开发速查表大纲
-
Layout
Aspect Ratio
Container
Break After
Break Before
Break Inside
Box Decoration Break
Box Sizing
Display
Float
Clear
Isolation
Object Fit
Top/Right/Bottom/Left
Object Position
Overflow
Visibility
Z-index
Overscroll Behavior
Position
-
Sizing
Width
Min-Width
Max-Width
Height
Min-Height
Max-Height
-
Borders
Border Radius
Border Width
Border Color
Border Style
Divide Width
Divide Color
Divide Style
Outline Width
Outline Color
Outline Style
Outline Offset
Ring Width
Ring Color
Ring Offset Width
Ring Offset Color
-
Transitions & Animation
Transition Property
Transition Duration
Transition Timing Function
Transition Delay
Animation
-
Tables
Border Collapse
Border Spacing
Table Layout
-
Backgrounds
Background Attachment
Background Color
Background Clip
Background Origin
Background Position
Background Repeat
Background Size
Gradient Color Stops
Background Image
-
Spacing
Padding
Margin
Space Between
-
SVG
Fill
Stroke
Stroke Width
-
Typography
Font Family
Font Size
Font Smoothing
Font Style
Font Weight
Font Variant Numeric
Letter Spacing
Line Height
List Style Type
List Style Position
Text Align
Text Decoration
Text Color
Text Decoration Color
Text Decoration Style
Text Decoration Thickness
Text Underline Offset
Text Transform
Text Overflow
Text Indent
Vertical Align
Whitespace
Word Break
Content
-
Transforms
Scale
Rotate
Translate
Skew
Transform Origin
-
Interactivity
Accent Color
Appearance
Pointer Events
Cursor
Caret Color
Resize
Scroll Behavior
Scroll Snap Align
Scroll Snap Stop
Scroll Snap Type
Scroll Margin
Scroll Padding
Touch Action
User Select
Will Change
-
Filters
Blur
Brightness
Contrast
Drop Shadow
Grayscale
Hue Rotate
Invert
Saturate
Sepia
Backdrop Blur
Backdrop Brightness
Backdrop Contrast
Backdrop Grayscale
Backdrop Hue Rotate
Backdrop Invert
Backdrop Opacity
Backdrop Saturate
Backdrop Sepia
-
Flexbox & Grid
Flex Basis
Flex Direction
Flex Wrap
Flex
Flex Grow
Flex Shrink
Order
Grid Template Columns
Grid Column Start/End
Grid Template Rows
Grid Row Start/End
Grid Auto Flow
Grid Auto Columns
Grid Auto Rows
Gap
Justify Content
Justify Items
Justify Self
Align Content
Align Items
Align Self
Place Content
Place Items
Place Self
-
Accessibility
- Screen Readers