TailwindCSS 教程

TailwindCSS 是一个功能类优先的 CSS 框架，它提供了大量预定义的实用类，让你能够快速构建现代化的用户界面，而无需编写自定义 CSS。

什么是 TailwindCSS？

TailwindCSS 是一个高度可定制的、低级别的 CSS 框架，它提供了构建现代 Web 应用所需的所有构建块。与传统的 CSS 框架不同，TailwindCSS 不提供预构建的组件，而是提供实用类来构建自定义设计。

TailwindCSS 的特点

实用类优先：使用预定义的实用类快速构建界面
高度可定制：可以轻松自定义颜色、字体、间距等
响应式设计：内置响应式断点系统
组件友好：与 React、Vue 等框架完美配合
性能优化：只包含使用的样式，文件体积小

快速开始

环境要求

Node.js 12.0 或更高版本
npm 或 yarn 包管理器

安装 TailwindCSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置 TailwindCSS

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
};

添加 TailwindCSS 指令

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

基础语法

实用类

<!-- 文本样式 -->
<h1 class="text-4xl font-bold text-blue-600">大标题</h1>
<p class="text-lg text-gray-700">段落文本</p>

<!-- 布局 -->
<div class="flex items-center justify-center">
  <div class="w-64 h-32 bg-red-500 rounded-lg"></div>
</div>

<!-- 间距 -->
<div class="p-4 m-2 space-y-4">
  <div class="p-2 bg-blue-100">内容 1</div>
  <div class="p-2 bg-green-100">内容 2</div>
</div>

响应式设计

<!-- 移动端优先的响应式设计 -->
<div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
  <h2 class="text-lg md:text-xl lg:text-2xl">响应式标题</h2>
  <p class="text-sm md:text-base lg:text-lg">响应式文本</p>
</div>

<!-- 隐藏/显示元素 -->
<div class="hidden md:block">在中等屏幕及以上显示</div>
<div class="block md:hidden">只在移动端显示</div>

颜色系统

预定义颜色

<!-- 背景颜色 -->
<div class="bg-red-500">红色背景</div>
<div class="bg-blue-600">蓝色背景</div>
<div class="bg-green-400">绿色背景</div>

<!-- 文本颜色 -->
<p class="text-gray-800">深灰色文本</p>
<p class="text-purple-600">紫色文本</p>

<!-- 边框颜色 -->
<div class="border-2 border-yellow-400">黄色边框</div>

颜色透明度

<!-- 透明度 -->
<div class="bg-blue-500 bg-opacity-50">50% 透明度的蓝色</div>
<div class="bg-red-600 bg-opacity-25">25% 透明度的红色</div>

<!-- 使用 opacity 类 -->
<div class="bg-green-500 opacity-75">75% 透明度</div>

布局系统

Flexbox

<!-- Flex 容器 -->
<div class="flex">
  <div class="flex-1">弹性项目 1</div>
  <div class="flex-1">弹性项目 2</div>
</div>

<!-- Flex 方向 -->
<div class="flex flex-col">
  <div>垂直排列项目 1</div>
  <div>垂直排列项目 2</div>
</div>

<!-- 对齐 -->
<div class="flex items-center justify-between">
  <div>左对齐</div>
  <div>右对齐</div>
</div>

Grid 布局

<!-- Grid 容器 -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-100 p-4">项目 1</div>
  <div class="bg-green-100 p-4">项目 2</div>
  <div class="bg-red-100 p-4">项目 3</div>
</div>

<!-- 响应式 Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-gray-100 p-4">响应式项目</div>
</div>

组件构建

按钮组件

<!-- 基础按钮 -->
<button
  class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
  点击我
</button>

<!-- 不同样式的按钮 -->
<button
  class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg"
>
  成功按钮
</button>

<button
  class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full"
>
  危险按钮
</button>

卡片组件

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="/img/card-top.jpg" alt="Card image" />
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">卡片标题</div>
    <p class="text-gray-700 text-base">
      这是卡片的描述文本，可以包含多行内容。
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span
      class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"
    >
      #标签1
    </span>
    <span
      class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"
    >
      #标签2
    </span>
  </div>
</div>

表单组件

<form class="w-full max-w-sm">
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
      用户名
    </label>
    <input
      class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
      id="username"
      type="text"
      placeholder="请输入用户名"
    />
  </div>
  <div class="mb-6">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
      密码
    </label>
    <input
      class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
      id="password"
      type="password"
      placeholder="请输入密码"
    />
  </div>
  <div class="flex items-center justify-between">
    <button
      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
      type="button"
    >
      登录
    </button>
    <a
      class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800"
      href="#"
    >
      忘记密码？
    </a>
  </div>
</form>

响应式设计

断点系统

<!-- 移动端优先 -->
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">响应式宽度</div>

<!-- 文本大小响应式 -->
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">响应式标题</h1>

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

显示/隐藏

<!-- 在不同屏幕尺寸下显示/隐藏 -->
<div class="hidden sm:block">在 sm 及以上显示</div>
<div class="block sm:hidden">只在移动端显示</div>
<div class="hidden md:block lg:hidden">只在 md 显示</div>

动画和过渡

过渡效果

<!-- 基础过渡 -->
<button
  class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300"
>
  悬停效果
</button>

<!-- 变换效果 -->
<div class="transform hover:scale-105 transition duration-300">
  <img src="/image.jpg" alt="图片" class="w-full" />
</div>

<!-- 旋转效果 -->
<div class="transform hover:rotate-45 transition duration-500">悬停旋转</div>

动画

<!-- 淡入动画 -->
<div class="animate-fade-in">淡入内容</div>

<!-- 弹跳动画 -->
<div class="animate-bounce">弹跳效果</div>

<!-- 脉冲动画 -->
<div class="animate-pulse">脉冲效果</div>

自定义配置

扩展主题

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        "brand-blue": "#1e40af",
        "brand-green": "#059669",
      },
      fontFamily: {
        sans: ["Inter", "sans-serif"],
        serif: ["Georgia", "serif"],
      },
      spacing: {
        18: "4.5rem",
        88: "22rem",
      },
    },
  },
};

自定义组件

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

  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }

  .input-field {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500;
  }
}

自定义实用类

@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

与框架集成

React 集成

// React 组件
import React from "react";

const Button = ({ children, variant = "primary", size = "md" }) => {
  const baseClasses =
    "font-bold rounded focus:outline-none focus:shadow-outline";

  const variantClasses = {
    primary: "bg-blue-500 hover:bg-blue-700 text-white",
    secondary: "bg-gray-500 hover:bg-gray-700 text-white",
    danger: "bg-red-500 hover:bg-red-700 text-white",
  };

  const sizeClasses = {
    sm: "py-1 px-2 text-sm",
    md: "py-2 px-4",
    lg: "py-3 px-6 text-lg",
  };

  return (
    <button
      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}`}
    >
      {children}
    </button>
  );
};

export default Button;

Vue 集成

<template>
  <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden">
    <div class="md:flex">
      <div class="md:shrink-0">
        <img
          class="h-48 w-full object-cover md:h-full md:w-48"
          :src="imageUrl"
          :alt="title"
        />
      </div>
      <div class="p-8">
        <div
          class="uppercase tracking-wide text-sm text-indigo-500 font-semibold"
        >
          {{ category }}
        </div>
        <a
          href="#"
          class="block mt-1 text-lg leading-tight font-medium text-black hover:underline"
        >
          {{ title }}
        </a>
        <p class="mt-2 text-slate-500">{{ description }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    description: String,
    imageUrl: String,
    category: String,
  },
};
</script>

性能优化

内容配置

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html",
    // 确保包含所有使用 TailwindCSS 的文件
  ],
  // 其他配置...
};

生产构建

# 构建生产版本
npm run build

# 或者使用 TailwindCSS CLI
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

最佳实践

组件化思维：将重复的样式组合成组件
响应式优先：移动端优先设计
性能考虑：只使用需要的样式
可维护性：使用有意义的类名组合
一致性：建立设计系统

学习资源

常见问题

Q: TailwindCSS 和 Bootstrap 有什么区别？

A: TailwindCSS 是实用类优先，更灵活；Bootstrap 是组件优先，开箱即用。

Q: 如何自定义 TailwindCSS 主题？

A: 在 tailwind.config.js 中的 theme.extend 中扩展主题配置。

Q: TailwindCSS 会影响性能吗？

A: 正确配置后，TailwindCSS 只会包含使用的样式，文件体积很小，性能很好。

什么是 TailwindCSS？​

TailwindCSS 的特点​

快速开始​

环境要求​

安装 TailwindCSS​

配置 TailwindCSS​

添加 TailwindCSS 指令​

基础语法​

实用类​

响应式设计​

颜色系统​

预定义颜色​

颜色透明度​

布局系统​

Flexbox​

Grid 布局​

组件构建​

按钮组件​

卡片组件​

表单组件​

响应式设计​

断点系统​

显示/隐藏​

动画和过渡​

过渡效果​

动画​

自定义配置​

扩展主题​

自定义组件​

自定义实用类​

与框架集成​

React 集成​

Vue 集成​

性能优化​

内容配置​

生产构建​

最佳实践​

学习资源​

常见问题​

Q: TailwindCSS 和 Bootstrap 有什么区别？​

Q: 如何自定义 TailwindCSS 主题？​

Q: TailwindCSS 会影响性能吗？​

什么是 TailwindCSS？

TailwindCSS 的特点

快速开始

环境要求

安装 TailwindCSS

配置 TailwindCSS

添加 TailwindCSS 指令

基础语法

实用类

响应式设计

颜色系统

预定义颜色

颜色透明度

布局系统

Flexbox

Grid 布局

组件构建

按钮组件

卡片组件

表单组件

响应式设计

断点系统

显示/隐藏

动画和过渡

过渡效果

动画

自定义配置

扩展主题

自定义组件

自定义实用类

与框架集成

React 集成

Vue 集成

性能优化

内容配置

生产构建

最佳实践

学习资源

常见问题

Q: TailwindCSS 和 Bootstrap 有什么区别？

Q: 如何自定义 TailwindCSS 主题？

Q: TailwindCSS 会影响性能吗？