Tailwind CSS 基本概念 #

[属性前缀]-[值]

<!-- 内边距 -->
<div class="p-4">      <!-- padding: 1rem -->
<div class="px-4">     <!-- padding-left/right: 1rem -->
<div class="py-4">     <!-- padding-top/bottom: 1rem -->
<div class="pt-4">     <!-- padding-top: 1rem -->
<div class="pr-4">     <!-- padding-right: 1rem -->
<div class="pb-4">     <!-- padding-bottom: 1rem -->
<div class="pl-4">     <!-- padding-left: 1rem -->

<!-- 外边距 -->
<div class="m-4">      <!-- margin: 1rem -->
<div class="mx-auto">  <!-- margin-left/right: auto（水平居中） -->
<div class="my-4">     <!-- margin-top/bottom: 1rem -->
<div class="mt-4">     <!-- margin-top: 1rem -->
<div class="mr-4">     <!-- margin-right: 1rem -->
<div class="mb-4">     <!-- margin-bottom: 1rem -->
<div class="ml-4">     <!-- margin-left: 1rem -->

t = top（上）
r = right（右）
b = bottom（下）
l = left（左）
x = left + right（水平方向）
y = top + bottom（垂直方向）

<!-- 颜色格式：[属性]-[颜色]-[深浅] -->
<div class="bg-blue-500">蓝色背景</div>
<div class="text-gray-700">灰色文字</div>
<div class="border-red-300">红色边框</div>

<!-- 移动优先：默认小屏样式，逐步添加大屏样式 -->
<div class="text-sm md:text-base lg:text-lg">
  响应式文字
</div>

<!-- 响应式布局 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- 响应式显示隐藏 -->
<div class="hidden md:block">
  中等屏幕及以上显示
</div>
<div class="block md:hidden">
  仅小屏幕显示
</div>

<button class="bg-blue-500 hover:bg-blue-700">
  悬停变色
</button>

<input class="border focus:border-blue-500 focus:ring-2">

<button class="bg-blue-500 active:bg-blue-800">
  点击变色
</button>

<button class="bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 active:bg-blue-800">
  完整交互状态
</button>

<!-- 自动适配暗色模式 -->
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  暗色模式支持
</div>

<!-- 任意颜色 -->
<div class="bg-[#1da1f2]">自定义颜色</div>

<!-- 任意尺寸 -->
<div class="w-[300px] h-[200px]">自定义尺寸</div>

<!-- 任意间距 -->
<div class="p-[13px]">自定义间距</div>

<!-- 任意值与响应式 -->
<div class="w-[200px] md:w-[400px]">响应式任意值</div>

<!-- 负外边距 -->
<div class="-mt-4">向上偏移 1rem</div>
<div class="-ml-2">向左偏移 0.5rem</div>

<!-- 负定位 -->
<div class="-top-4 -right-4">定位偏移</div>

<div class="!text-red-500">
  强制红色文字
</div>

<!-- 推荐的类名顺序 -->
<button class="
  /* 布局 */
  flex items-center justify-center
  
  /* 尺寸 */
  w-full h-12
  
  /* 间距 */
  px-4 py-2
  
  /* 边框 */
  border border-transparent rounded-lg
  
  /* 颜色 */
  bg-blue-500 text-white
  
  /* 效果 */
  shadow-md
  
  /* 状态 */
  hover:bg-blue-600 active:bg-blue-700
  
  /* 过渡 */
  transition-colors duration-200
">
  按钮
</button>

npm install -D prettier prettier-plugin-tailwindcss

{
  "plugins": ["prettier-plugin-tailwindcss"]
}