前端技术

tailwindcss

• tailwind里最常用的样式属性：

  • 背景：bg
  • 文本：text
  • 长宽：w h
  • 边距：p m
  • 圆角：rounded
  • 边框：border
  • 阴影：shadow

• 间距

  默认情况下，Tailwind 包括一个丰富和全面的数字间隔比例。这些值是成比例的，所以 16 是 8 的两倍。一个间距单位等于 0.25rem，在通用浏览器中默认为 4px。
  会应用 padding/margin/top/left/right/bottom/width/height/lineHeight/，p-1 = padding: 4px;/p-1 = padding: 0.25rem; 。

• 前缀

  输入前缀会有代码提示，代码提示中包含具体内容。

  前缀	含义
  box-	设置box-sizing
  float-	设置浮动float
  clear-	清楚浮动clear
  object-	用于控制可替换元素的内容如何调整大小及在其容器中的位置object-fit/object-position
  overflow-	如何处理超出容器的内容overflow
  overscroll-	用于控制浏览器到达滚动区域边界时的行为overscroll-behavior
  z-	用于设置z-index
  flex/flex-	flex布局flex/flex-direction/flex-wrap/flex-grow/flex-shrink
  order	flex和grid的排序order
  justify-	用于设置justify-content/justify-items/justify-self
  content-	用于设置align-content
  items-	用于设置align-items
  self-	用于设置align-self
  grid-	grid布局grid-template-columns/grid-column/grid-template-rows/grid-auto-flow
  row-	元素的大小和放置方式grid-row
  auto-	控制隐式创建的网格行/列的大小grid-auto-rows/grid-auto-columns
  gap-	grid和flexbox items间隔gap/row-gap/column-gap
  place-	用于同时控制内容如何在水平和垂直方向上对齐place-content/place-items/place-self
  p-	内边距padding
  m-	外边距margin
  w-	元素宽度width
  min-w-	最小宽度min-width
  max-w-	最小宽度max-width
  h-	元素高度height
  min-h-	最小高度min-height
  max-h-	最小高度max-height
  font-	字体序列font-family/字体粗细font-weight
  text-	字体大小、行高、对齐、颜色、透明度font-size/line-height/text-align/color
  leading-	行高line-height
  tracking-	字母间距letter-spacing
  align-	设置vertical-align
  whitespace-	设置white-space
  break-	文本换行overflow-wrap/word-break
  placeholder-	占位文本颜色及透明度
  list-	列表项标记类型list-style-type/list-style-position
  bg-	背景相关background-attachment/background-clip/background-color/background-origin/
  rounded-	设置border-radius
  border-	设置边框颜色、厚度、透明度、样式、表格边框border-width/border-color/border-style/
  divide-	设置分割线颜色、厚度、透明度、样式
  ring-	设置分割线颜色、厚度、透明度、偏移厚度、偏移颜色box-shadow
  shadow-	盒阴影
  opacity-	不透明度opacity
  table-	表格布局table-layout
  transition-	过渡属性transition-property/transition-timing-function/transition-duration
  duration-	过渡持续时间transition-duration
  ease-	过渡计时函数transition-timing-function
  delay-	过渡延迟transition-delay
  animate-	动画animation
  transform-	变换transform
  origin-	变换原点transform-origin
  scale-	缩放
  rotate-	旋转
  translate-	平移
  skew-	倾斜
  pointer-	指向事件pointer-events
  resize/resize-	大小调整resize
  select-	用户选择user-select
  cursor-	光标效果cursor
  outline-	轮廓outline/outline-offset