分享每一天-Tailwind 4.0 将会更快更好。

Tailwind 4.0 将会更快更好。

前端技术 322 0 创建时间：2024-05-23 15:24:15

Tailwind 4.0

Tailwind 4.0 将会更快更好。

#### 尝试当前处于 Alpha 状态的新功能

安装 Tailwind 版本 4 的包：

```auto
$ npm install tailwindcss@next @tailwindcss/vite@next
```

Vite 配置:

```auto
import tailwindcss from '@tailwindcss/vite';import { defineConfig } from 'vite';export default defineConfig({  plugins: [tailwindcss()],});
```

最后，在你的主 CSS 文件（app.css）中导入 Tailwind

```auto
@import "tailwindcss";
```

那么，现在让我们关注一下 Tailwind 版本 4 中的新功能：

#### 零配置内容检测

在以前的版本中，我们需要创建 `tailwind.config.js` 并在全局 CSS 文件中添加三个指令：

```auto
@tailwind base;
@tailwind components;
@tailwind utilities;
```

现在，只需要一个指令，而且我们将使用带有特殊指令 `@theme` 的 CSS 变量来代替配置文件，如下所示：

```auto
@import "tailwindcss";

@theme {
  --font-family-display: "Satoshi", "sans-serif";
  --breakpoint-4xl: 1920px;
  --color-neon-pink: oklch(71.7% 0.25 360);
  --color-neon-lime: oklch(91.5% 0.258 129);
  --color-neon-cyan: oklch(91.3% 0.139 195.8);
}

```

特殊的 `@theme` 指令告诉 Tailwind 根据这些变量提供新的实用程序和变体，让你可以在标记中使用类似 `4xl:text-neon-lime` 的类：

```auto
<div class="max-w-lg 4xl:max-w-xl">
  <h1 class="font-display text-4xl">
    Data to <span class="text-neon-cyan">enrich</span> your online business
  </h1>
</div>

```

添加新的 CSS 变量的行为类似于早期版本框架中的 `extend`，但你可以使用 `--color-*: initial` 清除命名空间，然后定义所有自定义值：

`main.css`

```auto
@theme {
  --color-*: initial;
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-green-800: #3f6212;
  --color-green-900: #365314;
  --color-green-950: #1a2e05;
}

```

如果你不想明确清除默认主题并且更愿意从头开始，你可以直接导入 tailwindcss/preflight 和 tailwindcss/utilities 来跳过导入默认主题：

`main.css`

```auto
@import "tailwindcss";
@import "tailwindcss/preflight" layer(base);
@import "tailwindcss/utilities" layer(utilities);

@theme {
  --color-*: initial;
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  /* ... */
  --color-green-800: #3f6212;
  --color-green-900: #365314;
  --color-green-950: #1a2e05;
}

```

通过这种方式，你可以更灵活地定制 Tailwind 的主题和实用程序，使其更适应你的项目需求。

#### 组合变体

新的架构使得可以组合作用于其他选择器的变体，例如 group-\*、peer-_、has-_ 和新的 not-\*。

在早期版本中，像 `group-has-*` 这样的变体在框架中被显式定义，但现在 `group-*` 可以与现有的 `has-*` 变体组合，并且可以与其他变体（如 focus）组合：

`index.html`

```auto
<div class="group">
  <div class="group-has-[&:focus]:opacity-100">
  <div class="group-has-focus:opacity-100">
  </div>
</div>

```

通过这种方式，你可以创建更灵活、更强大的样式组合，从而更好地适应复杂的设计需求。例如，当一个元素获得焦点时，使其父元素的透明度变为 100%。

这个新功能大大增强了 Tailwind CSS 的可组合性和灵活性，使开发者能够更加精细地控制样式和交互行为。

#### 变更内容

-   PostCSS 插件和 CLI 是独立的包：主要的 tailwindcss 包不再包含这些内容，因为不是每个人都需要它们。相反，它们应该分别安装，使用 `@tailwindcss/postcss` 和 `@tailwindcss/cli`。
    
-   无默认边框颜色：边框实用工具以前默认使用 gray-200，但现在默认使用 currentColor，与浏览器一致。我们做出这个更改是为了避免在使用 zinc 或 slate 等灰色作为主要颜色时，意外引入错误的灰色。
    
-   环默认是 1px：环实用工具以前默认是 3px 蓝色环，现在默认是使用 currentColor 的 1px 环。我们发现自己在项目中使用 ring-\* 实用工具作为边框的替代，并使用 outline-\* 作为焦点环，因此我们认为在这里保持一致是一个有帮助的更改。

#### v4.0 的路线图

-   显式内容路径配置：当自动内容检测对你的设置不够好时，可以告诉 Tailwind 你的模板确切在哪里。
    
-   支持其他暗模式：目前我们只支持使用媒体查询的暗模式，仍需要重新实现选择器和变体策略。
    
-   前缀支持：目前还没有办法为你的类配置前缀，但我们一定会恢复它。
    
-   白名单和黑名单：目前无法强制 Tailwind 生成某些类或阻止它生成其他类。
    
-   重要配置支持：目前还没有办法使所有实用工具生成 !important，但我们计划实现它。
    
-   theme() 函数支持：新项目不需要这个，因为你现在可以使用 var()，但我们会为了向后兼容而实现它。
    
-   独立的 CLI：我们还没有为新引擎开发独立的 CLI，但在 v4.0 发布之前肯定会有。

#### 结论

Tailwind CSS 4 是一个强大且多功能的工具，适用于希望简化工作流程和创建美观、响应式网站的 Web 开发人员。凭借其增强的性能、扩展的调色板、改进的定制、新的实用工具类以及对无障碍性的关注，Tailwind CSS 4 将成为开发人员工具包中的必备工具。无论你是在构建小型项目还是大型应用程序，Tailwind CSS 4 都提供了实现你的 Web 设计所需的功能和灵活性。

Tailwind 4.0 将会更快更好。

商品推荐

广告推荐

推荐文章