返回笔记列表

Tailwind CSS基础学习笔记

Tailwind CSS 基础学习笔记

什么是 Tailwind CSS

Tailwind CSS 是一个功能类优先（utility-first）的 CSS 框架，它不像 Bootstrap 或 Material UI 那样提供预设的组件，而是提供大量的工具类，让开发者能够快速构建自定义设计，而无需编写自定义 CSS。

Tailwind CSS 的核心理念

Tailwind 的设计理念是"实用至上"，它提倡：

  1. 功能类优先：通过组合小型功能类来构建组件，而不是预定义组件
  2. 设计系统约束：使用预设值来保持设计一致性
  3. 响应式设计：内置的响应式前缀便于构建自适应界面
  4. 暗黑模式支持：内置的暗黑模式类简化主题切换

安装与配置

1. 安装

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2. 配置文件

// tailwind.config.js
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx}',
    './src/components/**/*.{js,ts,jsx,tsx}',
    './src/app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3490dc',
        secondary: '#ffed4a',
        danger: '#e3342f',
      },
    },
  },
  plugins: [],
}

3. 将 Tailwind 添加到 CSS 中

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

核心概念

1. 布局

容器

<div class="container mx-auto px-4">
  <!-- 内容 -->
</div>

Flexbox

<div class="flex justify-between items-center">
  <div>左侧</div>
  <div>右侧</div>
</div>

Grid

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

间距

<div class="space-y-4">
  <div>垂直间距</div>
  <div>垂直间距</div>
</div>

2. 排版

<h1 class="text-4xl font-bold text-gray-800">标题</h1>
<p class="text-base text-gray-600">段落文本</p>

3. 颜色

<div class="bg-blue-500 text-white p-4">
  蓝色背景，白色文字
</div>

4. 边框与圆角

<div class="border border-gray-300 rounded-lg p-4">
  带边框和圆角的容器
</div>

5. 响应式设计

Tailwind 使用以下断点前缀：

  • sm: 640px 及以上
  • md: 768px 及以上
  • lg: 1024px 及以上
  • xl: 1280px 及以上
  • 2xl: 1536px 及以上
<div class="text-sm md:text-base lg:text-lg">
  响应式文本大小
</div>

6. 伪类与状态

<button class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">
  按钮
</button>

组件提取模式

尽管 Tailwind 鼓励使用功能类，但随着项目增长，提取常用模式为组件是有意义的：

1. 使用 @apply 提取 CSS

/* styles/globals.css */
@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700;
  }
}

2. 创建 React 组件

function Button({ children, className = "" }) {
  return (
    <button className={`py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-700 ${className}`}>
      {children}
    </button>
  );
}

实用技巧

1. 动态类名

使用条件渲染类名：

<div className={`${isActive ? 'bg-blue-500' : 'bg-gray-300'} p-4 rounded`}>
  动态类名
</div>

2. 使用 clsx 或 classnames 工具

import clsx from 'clsx';

function Alert({ type = 'info', children }) {
  return (
    <div className={clsx(
      'p-4 rounded',
      {
        'bg-blue-100 text-blue-800': type === 'info',
        'bg-red-100 text-red-800': type === 'error',
        'bg-green-100 text-green-800': type === 'success',
      }
    )}>
      {children}
    </div>
  );
}

3. 自定义变体

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    plugin(({ addVariant }) => {
      addVariant('hocus', ['&:hover', '&:focus'])
    })
  ],
}

然后使用：

<button class="bg-blue-500 hocus:bg-blue-700">
  悬停或聚焦时变色
</button>

项目中的实践经验

优点

  1. 开发速度快：无需编写自定义 CSS，直接在 HTML 中应用类
  2. 一致性：使用设计系统约束，保持 UI 一致
  3. 响应式：内置的响应式工具简化了自适应设计
  4. 体积控制：只生成用到的 CSS，控制文件大小

注意事项

  1. 类名冗长：HTML 可能会因类名而变得冗长
  2. 学习曲线：需要记住大量的工具类名称
  3. 样式与标记混合：可能导致关注点分离不够清晰

最佳实践

  1. 结合组件系统：在组件化框架中使用 Tailwind 效果最佳
  2. 提取重复模式：对于反复使用的样式，提取为组件或使用 @apply
  3. 使用编辑器插件：VS Code 的 Tailwind CSS IntelliSense 可提供自动完成
  4. 遵循设计系统：尽量使用 Tailwind 的预设值，而非自定义值

与其他框架的比较

Tailwind vs Bootstrap

  • Tailwind：功能类优先，高度可定制，更小的包体积
  • Bootstrap：预设组件，更容易上手，但定制性较低

Tailwind vs CSS-in-JS

  • Tailwind：预构建的类，更快的开发速度，更好的性能
  • CSS-in-JS：更好的局部作用域，动态样式能力强

总结

Tailwind CSS 是一个强大的工具，它通过功能类优先的方法改变了我们编写 CSS 的方式。它特别适合快速原型设计和构建自定义 UI，同时保持设计一致性。虽然起初可能感觉有学习曲线，但熟悉后能显著提高开发效率。

在我的项目中，Tailwind 已经成为我首选的样式解决方案，特别是与 React 和 Next.js 结合使用时，能够快速构建出漂亮且功能完善的界面。