526互联

tailwindcss 实现常见样式

发布时间 2023-11-01 22:13:37作者: zjy4fun

设置宽高

w-number, h-number

flex 实现水平垂直居中

  • flex设置容器为 flex 容器
  • flex-row / flex-column 设置主轴方向
  • justify-center 设置主轴方向居中，类似还有 justify-start, justify-end
  • items-center 设置交叉轴方向居中，类似还有 items-start, items-end

画 border

border border-red-800

border 表示是否显示
border-red-800 red 表示红色，800 表示不透明度

画弧度

  • rounded 使四个角呈现最小弧度

  • rounged-lg 使四个角呈现最大弧度

  • rounded-full 使整个边框呈现最大弧度