二、Tailwind CSS 核心概念和配置 ( 先期了解 )

一、功能类优先（Utility-First）

1.1 什么是功能类优先

功能类优先是 Tailwind CSS 的核心理念，它鼓励使用小型、单一用途的工具类（utility classes）直接在 HTML 中构建复杂的用户界面，而不是编写自定义 CSS。

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">你有新消息!</p>
  </div>
</div>

1.2 功能类优先的优势

无需为 CSS 命名

使用传统方法，您需要为每个元素创建自定义类名：

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">你有新消息!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

而使用 Tailwind，您可以直接在 HTML 中应用样式，无需命名：

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">你有新消息!</p>
  </div>
</div>

更快的 CSS 开发

使用 Tailwind，您可以直接在 HTML 中构建界面，而不需要在 HTML 和 CSS 文件之间切换：

• 无需为每个元素想出类名
• 无需维护单独的 CSS 文件
• 更容易理解和修改样式

响应式设计变得简单

Tailwind 提供了简单的响应式前缀，使响应式设计变得轻松：

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/store.jpg" alt="Man looking at item at a store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>
      <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
    </div>
  </div>
</div>

可维护性

传统 CSS 的问题之一是随着项目增长，CSS 文件会变得越来越大，而 Tailwind 的功能类方法可以帮助您避免这个问题：

• CSS 文件大小不会随着 UI 复杂度增加而无限增长
• 更改一个组件不会影响其他组件
• 可以安全地删除模板而不担心破坏其他 UI

1.3 处理复杂度

当您的 HTML 变得复杂时，可以使用以下策略：

提取组件

对于重复的 UI 模式，可以提取为组件：

// 使用 React 提取组件
function Button({ color, children }) {
  return (
    <button className={`bg-${color}-500 hover:bg-${color}-700 text-white font-bold py-2 px-4 rounded`}>
      {children}
    </button>
  );
}

<Button color="blue">保存更改</Button>

提取常用类

使用 Tailwind 的 @apply 指令将常用类组合到自定义 CSS 类中：

.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

<button class="btn-blue">保存更改</button>

二、配置 Tailwind CSS

2.1 配置文件

Tailwind 的配置文件允许您自定义框架的各个方面，包括：

• 主题（颜色、字体、断点等）
• 响应式断点
• 暗色模式
• 插件

默认的配置文件如下：

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

2.2 主题配置

您可以通过修改 theme 部分来自定义设计系统：

module.exports = {
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

2.3 插件

插件让您可以注册新的样式、组件、变体等：

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, addComponents, e, config }) {
      // 添加您的自定义样式
    }),
  ]
}

三、预检样式（Preflight）

3.1 什么是 Preflight

Preflight 是 Tailwind 的基础样式层，它建立在 modern-normalize 之上，提供了：

• 边距和内边距重置
• 边框样式重置
• 字体和文本设置的标准化

3.2 默认样式

Preflight 包含以下关键特性：

1. 边框样式重置

*,
::before,
::after {
  border-width: 0;
  border-style: solid;
}

2. 移除默认外边距

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

3. 图片处理

img,
video {
  max-width: 100%;
  height: auto;
}

3.3 禁用 Preflight

如果您不想使用 Preflight，可以在配置文件中禁用它：

// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
  }
}

总结

Tailwind CSS 通过功能类优先的方法彻底改变了 CSS 的编写方式，让开发者可以直接在 HTML 中应用样式，提高开发效率。通过灵活的配置系统和预检样式层，Tailwind 为开发者提供了强大的样式定制能力。通过配置文件，您可以完全控制框架的行为，而 Preflight 则确保了跨浏览器的一致性和现代化的默认样式。

参考链接

• Tailwind CSS 功能类优先
• Tailwind CSS 配置文档
• Tailwind CSS Preflight