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
- Columns
- 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