Tailwind 命令速查表

Tailwind CSS 是一款高度可定制的 CSS 框架，通过一系列的实用类来构建用户界面。熟练掌握 Tailwind 的命令，能够极大地提升前端开发的效率。下面为大家整理一份 Tailwind 命令速查表。

安装命令

首先是安装 Tailwind。如果使用 npm，在项目目录下运行：npm install tailwindcss。若偏好 yarn，则执行：yarn add tailwindcss。安装完成后，还需初始化配置文件：npx tailwindcss init，这会在项目根目录生成一个基本的 tailwind.config.js 文件。

样式命令

在布局方面，flex 类用于创建弹性盒容器，flex-row 使子元素横向排列，flex-col 则让子元素纵向排列。想要控制元素的间距，mx-auto 可将元素在水平方向居中，my-4 会在元素的垂直方向添加一定的外边距。

颜色设置也很便捷。bg-red-500 能为元素设置红色背景，颜色的深浅通过数字来调节，如 bg-red-100 颜色更浅，bg-red-900 颜色更深。文字颜色则用 text-blue-600 等命令实现。

对于字体样式，font-bold 让文字加粗，font-serif 将字体设置为衬线字体。

响应式命令

Tailwind 的响应式设计命令让网页在不同屏幕尺寸下都有良好的表现。在类名前添加前缀，如 sm: 针对小屏幕，md: 适用于中等屏幕，lg: 用于大屏幕，xl: 对应特大屏幕。例如，sm:flex 表示在小屏幕及以上设备上，元素变为弹性盒布局。

交互命令

添加交互效果也很简单。hover:bg-yellow-300 表示当鼠标悬停在元素上时，背景变为黄色。focus:outline-none 用于移除元素获得焦点时的默认轮廓。

这份 Tailwind 命令速查表涵盖了常见的操作命令，开发人员可以随时查阅。随着对 Tailwind 的深入使用，熟练掌握这些命令，能轻松应对各种前端页面的构建需求，实现高效、美观的用户界面开发。无论是新手入门还是有经验的开发者，都能从这份速查表中找到实用的内容，快速提升开发效率。