Tailwind CSS技巧

Tailwind中文文档https://www.tailwindcss.cn/
别人封装好的 https://flowrift.com/

1. 安装Tailwind CSS

   npm install -D tailwindcss
   npx tailwindcss init

2. 核心工具类

   容器（Container）
   栅格系统（Grid）
   间距工具类
   外边距（Margin）
   m-2（外边距为 0.5rem）、mx-4（水平外边距为 1rem）、my-8（垂直外边距为 2rem）。
   内边距（Padding）
   p-2（内边距为 0.5rem）、px-4（水平内边距为 1rem）、py-8（垂直内边距为 2rem）。
   颜色工具类
   文本颜色
   text-red-500（红色文本）、text-gray-700（灰色文本）。
   背景颜色
   bg-blue-400（蓝色背景）、bg-white（白色背景）。
   字体工具类
   字体大小
   text-xs（超小字体）、text-lg（大字体）、text-2xl（超大字体）。
   字体粗细
   font-bold（加粗）、font-normal（正常）。
   边框工具类
   边框颜色
   border-red-500（红色边框）。
   边框宽度
   border-2（边框宽度为 2px）。
   效果工具类
   阴影
   shadow-sm（小阴影）、shadow-lg（大阴影）。
   过渡效果
   transition（启用过渡效果）、duration-300（过渡持续时间 300ms）。