Tailwind CSS 备忘清单_开发速查表分享

Posted 2023-03-17 itbanzuan

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