TDL的个人笔记

切换主题

🎨 Tailwind CSS 速查手册 ​

📋 目录 ​

🔧 安装配置 ​

Vite 项目安装 ​

# 创建项目
pnpm create vite@latest my-app --template react-ts
cd my-app

# 安装 Tailwind
pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# 配置 tailwind.config.js

配置文件 ​

// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1fb6ff',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

全局样式 ​

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义组件 */
@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

🎯 核心概念 ​

工具类语法 ​

<!-- 属性-值 -->
<div class="属性-值">
<!-- 示例 -->
<div class="bg-red-500 p-4 text-white">

响应式前缀 ​

<div class="text-sm md:text-base lg:text-lg">
<!-- 屏幕尺寸     前缀      最小宽度 -->
<!-- sm:       640px     -->
<!-- md:       768px     -->
<!-- lg:       1024px    -->
<!-- xl:       1280px    -->
<!-- 2xl:      1536px    -->

状态前缀 ​

<button class="bg-blue-500 hover:bg-blue-700 focus:outline-none">
<input class="focus:ring-2 focus:ring-blue-500">
<div class="group hover:bg-gray-100">

🎨 颜色系统 ​

文本颜色 ​

<p class="text-red-500">红色文字</p>
<p class="text-gray-800">深灰文字</p>
<p class="text-white bg-black">白字黑底</p>
<p class="text-transparent">透明文字</p>

背景颜色 ​

<div class="bg-blue-500">蓝色背景</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-500">渐变背景</div>
<div class="bg-white/50">半透明白色</div>

边框颜色 ​

<div class="border border-red-500">红色边框</div>
<div class="border-2 border-dashed border-blue-300">虚线边框</div>

颜色权重表 ​

颜色100200300400500600700800900
gray​最浅←←←中灰←←←最深
blue​最浅蓝←←←主蓝←←←深蓝

📐 间距与尺寸 ​

内边距 (Padding) ​

<div class="p-4">四周 padding</div>
<div class="px-4 py-2">x轴 y轴</div>
<div class="pt-4 pr-2 pb-1 pl-3">单独方向</div>

<!-- 尺寸表 -->
p-0 (0) p-1 (0.25rem) p-2 (0.5rem) p-3 (0.75rem)
p-4 (1rem) p-5 (1.25rem) p-6 (1.5rem) p-8 (2rem)
p-10 (2.5rem) p-12 (3rem) p-16 (4rem) p-20 (5rem)
p-24 (6rem) p-32 (8rem) p-40 (10rem) p-48 (12rem)
p-56 (14rem) p-64 (16rem) p-72 (18rem) p-80 (20rem)
p-96 (24rem)

外边距 (Margin) ​

<div class="m-4">四周 margin</div>
<div class="mx-auto">水平居中</div>
<div class="-m-4">负边距</div>

宽度 (Width) ​

<div class="w-4">固定宽度</div>
<div class="w-1/2">50% 宽度</div>
<div class="w-full">100% 宽度</div>
<div class="w-screen">视口宽度</div>
<div class="w-min">最小内容宽度</div>
<div class="w-max">最大内容宽度</div>
<div class="w-fit">适合内容宽度</div>

高度 (Height) ​

<div class="h-4">固定高度</div>
<div class="h-1/2">50% 高度</div>
<div class="h-full">100% 高度</div>
<div class="h-screen">视口高度</div>

🔄 布局 ​

Flexbox ​

<div class="flex">弹性容器</div>
<div class="flex flex-col">垂直方向</div>
<div class="flex justify-center">水平居中</div>
<div class="flex items-center">垂直居中</div>
<div class="flex justify-between">两端对齐</div>
<div class="flex-wrap">自动换行</div>

Grid ​

<div class="grid grid-cols-3 gap-4">3列网格</div>
<div class="grid grid-cols-1 md:grid-cols-3">响应式网格</div>
<div class="grid-cols-[1frfrfr]">自定义列</div>
<div class="grid-rows-4">4行网格</div>

定位 ​

<div class="relative">相对定位</div>
<div class="absolute inset-0">绝对定位(全屏)</div>
<div class="fixed top-0 left-0">固定定位</div>
<div class="sticky top-0">粘性定位</div>

显示模式 ​

<div class="block">块级元素</div>
<div class="inline">行内元素</div>
<div class="inline-block">行内块</div>
<div class="hidden">隐藏元素</div>

✨ 效果 ​

阴影 ​

<div class="shadow-sm">小阴影</div>
<div class="shadow">默认阴影</div>
<div class="shadow-md">中阴影</div>
<div class="shadow-lg">大阴影</div>
<div class="shadow-xl">超大阴影</div>
<div class="shadow-2xl">最大阴影</div>
<div class="shadow-inner">内阴影</div>

圆角 ​

<div class="rounded">默认圆角</div>
<div class="rounded-lg">大圆角</div>
<div class="rounded-full">圆形</div>
<div class="rounded-t-lg">上圆角</div>
<div class="rounded-br-lg">右下圆角</div>

边框 ​

<div class="border">默认边框</div>
<div class="border-2">2px 边框</div>
<div class="border-4">4px 边框</div>
<div class="border-dashed">虚线边框</div>
<div class="border-dotted">点状边框</div>

透明度 ​

<div class="opacity-0">完全透明</div>
<div class="opacity-50">50% 透明</div>
<div class="opacity-100">不透明</div>

🔄 交互 ​

悬停效果 ​

<button class="bg-blue-500 hover:bg-blue-700">悬停变深</button>
<div class="hover:scale-105">悬停放大</button>
<a class="hover:underline">悬停下划线</button>

焦点状态 ​

<input class="focus:outline-none focus:ring-2 focus:ring-blue-500">
<button class="focus:outline-none focus:ring-2">焦点环</button>

激活状态 ​

<button class="active:scale-95">点击缩小</button>

组状态 ​

<div class="group">
  <div class="group-hover:bg-red-500">组悬停效果</div>
</div>

📱 响应式 ​

断点前缀 ​

<!-- 移动优先：默认样式针对手机 -->
<div class="w-full md:w-1/2 lg:w-1/3">
  手机：100% | 平板：50% | 桌面：33%
</div>

<!-- 显示/隐藏 -->
<div class="hidden md:block">平板以上显示</div>
<div class="block md:hidden">仅手机显示</div>

响应式文本 ​

<p class="text-sm md:text-base lg:text-lg xl:text-xl">
  响应式文字大小
</p>

响应式间距 ​

<div class="p-4 md:p-6 lg:p-8">
  响应式内边距
</div>

🎭 动画 ​

过渡效果 ​

<button class="transition-all duration-300 ease-in-out">
  平滑过渡
</button>

<!-- 过渡属性 -->
transition-none | transition-all | transition | transition-colors

<!-- 持续时间 -->
duration-75 | duration-100 | duration-150 | duration-200
duration-300 | duration-500 | duration-700 | duration-1000

<!-- 缓动函数 -->
ease-linear | ease-in | ease-out | ease-in-out

变换动画 ​

<div class="hover:scale-110">悬停放大</div>
<div class="hover:rotate-45">悬停旋转</div>
<div class="hover:translate-x-4">悬停移动</div>
<div class="hover:skew-x-12">悬停倾斜</div>

关键帧动画 ​

/* 自定义动画 */
@keyframes bounce {
  0%, 100% { transform: translateY(-25%); }
  50% { transform: translateY(0); }
}

.animate-bounce-custom {
  animation: bounce 1s infinite;
}

🔧 实用工具 ​

自定义类 ​

@layer components {
  .btn {
    @apply px-4 py-2 rounded font-semibold focus:outline-none;
  }
  .btn-primary {
    @apply btn bg-blue-500 text-white hover:bg-blue-600;
  }
}

任意值 ​

<div class="top-[117px]">任意定位</div>
<div class="bg-[#1da1f2]">任意颜色</div>
<div class="w-[calc(100%-2rem)]">计算宽度</div>

暗色模式 ​

<div class="bg-white dark:bg-gray-800">
  浅色背景 | 深色背景
</div>

打印样式 ​

<div class="print:hidden">打印时隐藏</div>
<div class="print:block">打印时显示</div>

🚀 常用组合 ​

居中元素 ​

<!-- 水平居中 -->
<div class="mx-auto">块级元素居中</div>

<!-- 绝对居中 -->
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
  绝对定位居中
</div>

<!-- Flex 居中 -->
<div class="flex items-center justify-center">
  Flex 居中
</div>

卡片样式 ​

<div class="bg-white rounded-lg shadow-lg p-6 max-w-sm mx-auto">
  <h3 class="text-lg font-semibold mb-2">卡片标题</h3>
  <p class="text-gray-600">卡片内容描述</p>
</div>

按钮样式 ​

<button class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200">
  主要按钮
</button>

表单样式 ​

<input class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">

💡 实用技巧 ​

1. 使用 VS Code 插件 ​

  • Tailwind CSS IntelliSense​ - 自动补全
  • Headwind​ - 类名排序

2. 性能优化 ​

// tailwind.config.js
module.exports = {
  // 只启用需要的工具类
  corePlugins: {
    float: false,
    clear: false,
  }
}

3. 自定义配置 ​

// 扩展主题
theme: {
  extend: {
    spacing: {
      '128': '32rem',
    }
  }
}

这个速查手册覆盖了 Tailwind CSS 的常用功能，收藏起来随时查阅吧！🎯