首页 > 其他分享 >Tailwind CSS 备忘清单_开发速查表分享

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

时间:2023-03-17 15:36:05浏览次数:39  
标签:速查表 Width Tailwind Text 备忘 Color Grid Background Backdrop

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

标签:速查表,Width,Tailwind,Text,备忘,Color,Grid,Background,Backdrop
From: https://www.cnblogs.com/itbanzuan/p/17226955.html

相关文章

  • 人工智能与机器学习速查表
    机器学习和深度学习库速查表Numpy库PandasScipyMatplotlibScikitLearnKerasNeuralNetworksZoo......
  • Vim 备忘清单_开发速查表分享
    Vim备忘清单Vim8.2快速参考备忘单的有用集合,可帮助您更快地学习vim编辑器。入门,为开发人员分享快速参考备忘单。开发速查表大纲入门运动图动作插入模式......
  • CSS颜色代码速查表【英文颜色、HEX格式、RGB格式】(转)
    使用实例英文代码使用实例:<pstyle="color:red">Thisismyfont</p>HEX格式使用实例: <pstyle="color:#FFB6C1">Thisismyfont</p>RGB格式使用实例: <pstyl......
  • Git 常用命令备忘录
    转载至:Git命令使用Git有很多不同的方法。Git支持许多命令行工具和图形化的用户接口。Git的命令行是唯一可以运行所有Git命令的地方。下面这组命令将帮助你了解如何......
  • 博客装修改造备忘
    上次改这个博客的样式估计得追溯到2017年了,整个页面散发着一股本世纪初的味道,最近痛定思痛决定让博客稍微看起来没有那么有年代感一点……做的修改略备忘如下:正文样式......
  • tailwindcss_封装
    /admin-one-vue-tailwind-master/index.html<!DOCTYPEhtml><htmllang="zh"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=ed......
  • vim 一些技巧备忘
    :3,5t.#把第3行到第5行的内容复制到当前行下方:t5#把当前行复制到第5行下方:t.#复制当前行到当前行下方(等价......
  • tailwindcss封装一个按钮
    templatetag<template><button:class="classes"><slot:iconSizeClasses="iconSizeClasses"/></button></template>scripttag<scriptsetup>......
  • linux 使用 git 备忘录
    1.在github网页端创建一个仓库略2.将本地公钥加到github的SSHkeys中:gitconfig--globaluser.name"git的自己的用户名"gitconfig--globaluser.email......
  • Adobe Photoshop 键盘快捷键 备忘清单_开发速查表分享
    AdobePhotoshop键盘快捷键备忘清单AdobePhotoshop中283个键盘快捷键的可视化备忘单键盘快捷键,为开发人员分享快速参考备忘单。开发速查表大纲键盘快捷键热......