我在每个项目中使用的 Tailwind CSS 设置

Source: Dev.to

基础配置

我的 tailwind.config.js 非常简洁。我是通过扩展默认主题而不是覆盖它来进行配置的。

module.exports = {
  content: ["./src/**/*.{js,jsx}"],
  theme: {
    extend: {
      colors: {
        brand: "#e3eb01",
      },
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"],
      },
    },
  },
  plugins: [],
};

我只添加了一两个品牌颜色和自定义字体，其他全部保持默认。Tailwind 的默认配置设计得很好，我几乎不需要修改它们。

我复用的实用模式

卡片组件

<div class="card">
  Content here
</div>

区块容器

<section class="container">
  Content here
</section>

响应式文字

<h1 class="text-2xl md:text-4xl">
  Heading
</h1>

这三种模式大概覆盖了我 80 % 的开发需求。

我不使用的功能

在 CSS 文件中使用 @apply

Tailwind 的 @apply 指令可以把实用类提取到 CSS 类中。起初我用了很多，但后来停用了——这违背了实用优先 CSS 的初衷。如果需要可复用的样式，我会直接写一个 React 组件。

Tailwind 插件

我尝试过几个 Tailwind 插件，最终都把它们移除了。默认的实用类已经能满足我的所有需求。如果需要自定义样式，我会直接用普通 CSS 编写。

任意值

像 w-[327px] 这样的任意值往往说明设计有问题。我尽量坚持使用默认的间距和尺寸比例。当设计出现奇怪的尺寸时，我会将其四舍五入到最近的 Tailwind 值。

暗模式设置

我使用 class 策略来实现暗模式，这样可以通过 JavaScript 切换暗模式，而不是依赖操作系统的设置。

// tailwind.config.js
module.exports = {
  darkMode: "class",
  // …
};

然后只需在 “ 元素上添加 dark 类，所有 dark: 变体就会生效。

生产检查清单

• 所有文字在浅色和暗色背景下都可读。
• 移动端没有水平滚动条。
• 所有 hover 状态都正常且看起来是有意为之。
• 品牌颜色使用得当（仅用于 CTA 和强调）。
• 加载状态不会出现未样式化的闪烁内容。

在 Next.js 中使用 Tailwind

Tailwind 与 Next.js 配合得非常好。项目初始化时安装 Tailwind，后续即可直接使用。构建时的 purge 步骤会移除未使用的类，使最终的 CSS 文件非常小。

我们的生产 CSS 文件通常只有 15–30 KB。相比之下，典型的 WordPress 站点 CSS 大约 200–500 KB，这就解释了为什么我们的网站加载更快。

这就是我在 Impeccify 为所有项目使用的配置。如果你刚开始使用 Tailwind，保持简洁。先熟悉默认实用类，再考虑添加自定义配置——你会惊讶于默认配置能帮你走多远。