键盘控必备:一份完整的 Tailwind CSS 快捷键对照表

阅读时长 6 分钟读完

Tailwind CSS 是一款流行的 CSS 框架,提供了大量的 CSS 类,可以快速构建美观的界面。在使用 Tailwind CSS 过程中,掌握快捷键可以大大提高效率。本文将介绍一份完整的 Tailwind CSS 快捷键对照表,帮助你更好地使用 Tailwind CSS。

快捷键基础

在 Tailwind CSS 中,快捷键的格式为 类别:属性:值,例如 bg-red-500 表示背景颜色为红色的样式。下面是一些常用的类别:

  • bg:背景颜色。
  • text:文本颜色。
  • border:边框颜色和宽度。
  • p:内边距。
  • m:外边距。
  • w:宽度。
  • h:高度。
  • flex:弹性布局。
  • grid:网格布局。
  • justify:水平对齐。
  • items:垂直对齐。
  • rounded:圆角大小。

基本颜色

Tailwind CSS 提供了一些基本颜色,可以通过 bg-颜色名text-颜色名 来使用。下面是一些常用的基本颜色:

  • white:白色。
  • black:黑色。
  • gray:灰色。
  • red:红色。
  • orange:橙色。
  • yellow:黄色。
  • green:绿色。
  • teal:青色。
  • blue:蓝色。
  • indigo:靛蓝色。
  • purple:紫色。
  • pink:粉色。

示例代码:

颜色深度

除了基本颜色外,Tailwind CSS 还提供了一些颜色深度,可以通过添加 -50-900 的后缀来使用。例如 bg-gray-500 表示灰色,bg-gray-900 表示深灰色。下面是一些常用的颜色深度:

  • -50:非常浅的颜色。
  • -100:较浅的颜色。
  • -200:浅的颜色。
  • -300:中等深度的颜色。
  • -400:较深的颜色。
  • -500:深色。
  • -600:非常深的颜色。
  • -700:极深的颜色。
  • -800:非常极深的颜色。
  • -900:黑色。

示例代码:

宽度和高度

Tailwind CSS 提供了一些宽度和高度的类,可以通过 w-数值h-数值 来使用。下面是一些常用的宽度和高度:

  • 1:1/4。
  • 2:1/2。
  • 3:3/4。
  • 4:1。
  • 5:1.25。
  • 6:1.5。
  • 8:2。
  • 10:2.5。
  • 12:3。
  • 16:4。
  • 20:5。
  • 24:6。
  • 32:8。
  • 40:10。
  • 48:12。
  • 56:14。
  • 64:16。
  • auto:自动计算宽度或高度。
  • px:像素。

示例代码:

内边距和外边距

Tailwind CSS 提供了一些内边距和外边距的类,可以通过 p-数值m-数值 来使用。下面是一些常用的内边距和外边距:

  • 0:0。
  • 1:0.25rem。
  • 2:0.5rem。
  • 3:0.75rem。
  • 4:1rem。
  • 5:1.25rem。
  • 6:1.5rem。
  • 8:2rem。
  • 10:2.5rem。
  • 12:3rem。
  • 16:4rem。
  • 20:5rem。
  • 24:6rem。
  • 32:8rem。
  • 40:10rem。
  • 48:12rem。
  • 56:14rem。
  • 64:16rem。
  • auto:自动计算内边距或外边距。

示例代码:

圆角和边框

Tailwind CSS 提供了一些圆角和边框的类,可以通过 rounded-数值border-颜色-宽度 来使用。下面是一些常用的圆角和边框:

  • none:无圆角或边框。
  • sm:小圆角或细边框。
  • md:中等圆角或较粗边框。
  • lg:大圆角或粗边框。
  • xl:非常大的圆角或非常粗的边框。
  • 2xl:特别大的圆角或特别粗的边框。

示例代码:

弹性布局和网格布局

Tailwind CSS 提供了一些弹性布局和网格布局的类,可以通过 flexgrid 来使用。下面是一些常用的弹性布局和网格布局:

  • flex:弹性布局。
  • inline-flex:内联弹性布局。
  • flex-row:水平排列。
  • flex-col:垂直排列。
  • flex-wrap:换行。
  • flex-nowrap:不换行。
  • justify-start:左对齐。
  • justify-end:右对齐。
  • justify-center:居中对齐。
  • justify-between:两端对齐。
  • justify-around:环绕对齐。
  • items-start:顶部对齐。
  • items-end:底部对齐。
  • items-center:居中对齐。
  • items-baseline:基线对齐。
  • items-stretch:拉伸对齐。
  • grid:网格布局。
  • grid-cols-数值:列数。
  • grid-rows-数值:行数。
  • gap-数值:间隔。

示例代码:

-- -------------------- ---- -------
---- ----------- -------- -------------- ------------ ----------- -----
  ---- ----------- ---- ------------------
  ---- ----------- ---- --------------------
  ---- ----------- ---- -------------------
------

---- ----------- ----------- ----- ----------- -----
  ---- -------------------------
  ---- ---------------------------
  ---- --------------------------
  ---- ----------------------------
  ---- ----------------------------
  ---- --------------------------
------
展开代码

结语

本文介绍了一份完整的 Tailwind CSS 快捷键对照表,包括基本颜色、颜色深度、宽度和高度、内边距和外边距、圆角和边框、弹性布局和网格布局。希望本文可以帮助你更好地使用 Tailwind CSS,提高工作效率。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/678a594b881faa801f8debfe

纠错
反馈

纠错反馈