TailwindCSS中类的书写规范/书写顺序

以下是一个推荐的 Tailwind CSS 类书写顺序规范，按照功能和优先级进行分类整理，方便你在开发中作为笔记手册使用：

1. 布局相关

• flex、inline-flex、grid、inline-grid：定义元素的布局方式
• block、inline-block、inline、contents：定义元素的显示类型
• fixed、absolute、relative、sticky：定义元素的定位方式
• static：重置默认定位
• h-screen、h-full、h-auto：设置元素的高度
• min-h-full、min-h-screen：设置元素的最小高度
• w-screen、w-full、w-auto：设置元素的宽度
• min-w-full、min-w-max：设置元素的最小宽度
• max-w-full、max-w-screen-lg、max-w-screen-md、max-w-screen-sm：设置元素的最大宽度
• overflow-auto、overflow-hidden、overflow-visible：控制元素内容的溢出行为

2. 间距相关

• m-0、m-1、m-2、m-3、m-4、m-5、m-6：设置元素的外边距（margin）
• mt-0、mt-1、mt-2、mt-3、mt-4、mt-5、mt-6：设置元素的上外边距
• mr-0、mr-1、mr-2、mr-3、mr-4、mr-5、mr-6：设置元素的右外边距
• mb-0、mb-1、mb-2、mb-3、mb-4、mb-5、mb-6：设置元素的下外边距
• ml-0、ml-1、ml-2、ml-3、ml-4、ml-5、ml-6：设置元素的左外边距
• p-0、p-1、p-2、p-3、p-4、p-5、p-6：设置元素的内边距（padding）
• pt-0、pt-1、pt-2、pt-3、pt-4、pt-5、pt-6：设置元素的上内边距
• pr-0、pr-1、pr-2、pr-3、pr-4、pr-5、pr-6：设置元素的右内边距
• pb-0、pb-1、pb-2、pb-3、pb-4、pb-5、pb-6：设置元素的下内边距
• pl-0、pl-1、pl-2、pl-3、pl-4、pl-5、pl-6：设置元素的左内边距

3. Flex 布局相关

• flex-col、flex-row、flex-wrap、flex-nowrap：设置 flex 容器的方向和换行行为
• justify-start、justify-end、justify-center、justify-between、justify-around：设置 flex 容器主轴对齐方式
• items-start、items-end、items-center、items-baseline、items-stretch：设置 flex 容器交叉轴对齐方式
• self-start、self-end、self-center、self-stretch：设置 flex 项目自身的对齐方式
• flex-1、flex-2、flex-3：设置 flex 项目的 flex-grow 值
• order-1、order-2、order-3：设置 flex 项目的排列顺序

4. Grid 布局相关

• grid-cols-1、grid-cols-2、grid-cols-3：设置 grid 容器的列数
• grid-rows-1、grid-rows-2、grid-rows-3：设置 grid 容器的行数
• gap-1、gap-2、gap-3：设置 grid 容器中网格项之间的间隔
• col-start-1、col-end-1、row-start-1、row-end-1：设置 grid 项目的列和行起始和结束位置

5. 背景相关

• bg-transparent、bg-white、bg-gray-100、bg-gray-200：设置元素的背景颜色
• bg-opacity-0、bg-opacity-25、bg-opacity-50、bg-opacity-75、bg-opacity-100：设置背景颜色的透明度
• bg-fixed、bg-local、bg-scroll：设置背景图像的固定方式
• bg-contain、bg-cover、bg-auto：设置背景图像的尺寸
• bg-repeat、bg-no-repeat、bg-repeat-x、bg-repeat-y：设置背景图像的重复方式
• bg-center、bg-top、bg-right、bg-bottom、bg-left：设置背景图像的位置

6. 边框相关

• border、border-t、border-r、border-b、border-l：设置边框的样式
• border-2、border-4、border-8：设置边框的宽度
• border-solid、border-dashed、border-dotted、border-double、border-none：设置边框的样式
• border-gray-200、border-gray-300、border-gray-400：设置边框的颜色
• rounded、rounded-t、rounded-r、rounded-b、rounded-l：设置边框的圆角
• rounded-none、rounded-sm、rounded-md、rounded-lg、rounded-full：设置圆角的大小

7. 文本相关

• text-left、text-center、text-right、text-justify：设置文本的对齐方式
• text-xs、text-sm、text-base、text-lg、text-xl、text-2xl、text-3xl：设置文本的字体大小
• font-hairline、font-thin、font-extralight、font-light、font-normal、font-medium、font-semibold、font-bold、font-extrabold、font-black：设置文本的字体粗细
• leading-none、leading-tight、leading-snug、leading-normal、leading-relaxed、leading-loose：设置文本的行高
• tracking-tighter、tracking-tight、tracking-normal、tracking-wide、tracking-wider、tracking-widest：设置文本的字间距
• uppercase、lowercase、capitalize：设置文本的大小写
• italic、not-italic：设置文本的斜体样式
• underline、no-underline：设置文本的下划线
• line-through、no-line-through：设置文本的删除线
• text-gray-600、text-gray-700、text-gray-800：设置文本的颜色

8. 阴影相关

• shadow、shadow-sm、shadow-md、shadow-lg、shadow-xl、shadow-2xl：设置元素的阴影效果
• shadow-inner：设置元素内部的阴影效果
• shadow-none：移除阴影效果

9. 其他样式

• opacity-0、opacity-25、opacity-50、opacity-75、opacity-100：设置元素的透明度
• cursor-default、cursor-pointer、cursor-wait、cursor-text、cursor-move、cursor-not-allowed：设置鼠标的光标样式
• pointer-events-none、pointer-events-auto：控制元素是否接收鼠标事件
• select-none、select-text、select-all、select-auto：控制文本的选择行为
• resize-none、resize-y、resize-x、resize：控制元素的调整大小行为
• appearance-none：移除元素的默认样式
• divide-y、divide-x：在 flex 或 grid 布局中设置子元素之间的分隔线

10. 响应式相关

• sm:、md:、lg:、xl:、2xl:：设置响应式断点
• dark:：设置暗色模式下的样式

11. 交互状态相关

• hover:：设置鼠标悬停时的样式
• focus:：设置元素获得焦点时的样式
• active:：设置元素被点击时的样式
• group-hover:：设置父元素悬停时的样式
• focus-within:：设置子元素获得焦点时的样式
• disabled:：设置元素禁用时的样式

12. 动画相关

• animate-none、animate-pulse、animate-bounce、animate-spin：设置预定义的动画效果
• transition、transition-all：启用过渡动画
• duration-150、duration-200、duration-300、duration-500：设置过渡动画的持续时间
• ease-linear、ease-in、ease-out、ease-in-out：设置过渡动画的缓动函数

13. 不常用但重要的类

• sr-only、not-sr-only：用于辅助技术（如屏幕阅读器）的文本隐藏和显示
• visually-hidden、visually-visible：用于视觉隐藏但保持可访问性
• aria-hidden、aria-disabled：设置 ARIA 属性
• will-change、transform：优化动画性能
• touch-none、touch-auto、touch-manipulation：控制触摸事件行为
• break-words、break-all、break-normal：控制文本的换行行为
• truncate：设置单行文本的截断
• whitespace-normal、whitespace-nowrap、whitespace-pre、whitespace-pre-line、whitespace-pre-wrap：设置文本的空白处理方式

14. 自定义样式

• @apply：将多个 Tailwind 类应用到自定义 CSS 类中
• @screen：定义响应式断点的自定义样式
• @variants：为自定义样式添加状态变体

书写顺序示例

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 text-gray-800 p-4 m-4 rounded-lg shadow-lg hover:bg-gray-200 transition-colors duration-300 ease-in-out">
  <!-- 内容 -->
</div>

按照以上顺序编写的 Tailwind CSS 类，不仅逻辑清晰，而且便于团队协作和代码维护。希望这份规范对你未来的开发工作有所帮助！