[CSS 3] Tailwindcss v4

4.0更新说明

https://tailwindcss.com/blog/tailwindcss-v4

简化安装

v3安装步骤：https://v3.tailwindcss.com/docs/guides/vite#vue

v4安装步骤：https://tailwindcss.com/docs/installation/using-vite

v4特点：

只需一行 CSS — 不再需要 @tailwind 指令，只需添加 “tailwindcss” @import然后开始构建。
零配置 — 您无需配置任何内容即可开始使用框架，甚至无需模板文件的路径。
无需外部插件 — 我们为您捆绑了开箱即用@import规则，并在后台使用 Lightning CSS 进行供应商前缀和现代语法转换。（之前需要：postcss autoprefixer）

新的高性能引擎

Tailwind CSS 4.0的最大亮点之一是其全新的高性能引擎Oxide，该引擎从零开始重构，以提升构建速度。根据基准测试，新的全量构建速度提升超过3.5倍，增量构建速度提升超过8倍，令人惊叹的是，增量构建时无新CSS的情况下速度更是提高了182倍。这一改变极大缩短了开发时间，提高了工作效率，尤其适合需要频繁迭代和修改设计的项目。

Oxide 旨在统一工具链、提高性能和简化配置。构建方面，底层使用基于 Rust 的 CSS 转换工具（称为 Lightning CSS）提供支持。

lightning CSS：https://lightningcss.dev/

Oxide引擎特性：

内置 @import 处理
CSS优先配置
构建性能提升
更好的支持现代CSS功能

@import "tailwindcss";

暗黑模式

v3步骤：

tailwind.config.js -> darkMode: 'class'
添加 dark:bg-black 伪类
html标签 -> class="dark"

v4步骤：

style.css -> @custom-variant dark (&:where(.dark, .dark *));
添加dark:bg-black伪类
html标签 -> class="dark"

@custom-variant dark (&:where(.dark, .dark *));

<script setup lang="ts"></script>
<template>
  <div class="w-64 h-64 border bg-white dark:bg-black dark:text-white">
     hello world
  </div>
</template>
<style scoped></style>

现代化的P3调色板

P3 是 Apple 推出的一种较新的颜色配置文件。它基于相同的 RGB 颜色模型，但提供比 sRGB 更宽的色域。色域是指设备可以再现的颜色范围。P3 色域比 sRGB 大约 25%，可实现更生动、更准确的颜色表示。

调色板从 rgb 升级到 oklch，利用更宽的色域使颜色在以前受 sRGB 色彩空间限制的地方更加鲜艳。oklch() 是定义 CSS 颜色的一种新方法。L 是感知亮度，C 是色度，H 是色相角度。颜色选择器：https://oklch.com/

oklch的优点：

更好的通过公式，生成统一颜色变化
感知亮度均匀
着色纯度对亮度的影响（亥姆霍兹-科尔劳施效应）
尽可能修复了色相偏移（阿布尼效应）
支持为更广的色域提供编码支持（P3、Rec.2020及更高版本）

容器查询

可以实时匹配指定为容器元素的尺寸，开发者可以基于不同的尺寸范围，对内部的元素进行特定的样式设置与布局实现。

v3步骤：

下载插件：npm install -D @tailwindcss/container-queries
tailwind.config.js -> require('@tailwindcss/container-queries')
@container 方式进行使用

v4步骤：

直接在代码中调用 @container 进行使用

<script setup lang="ts"></script>
<template>
<div class="@container resize overflow-auto">
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
    <div class="bg-red-500">
      hello world
    </div>
    <div class="bg-blue-500">
      hello world
    </div>
    <div class="bg-green-500">
      hello world
    </div>
    <div class="bg-yellow-500">
      hello world
    </div>
    <div class="bg-pink-500">
      hello world
    </div>
    <div class="bg-purple-500">
      hello world
    </div>
    <div class="bg-indigo-500">
      hello world
    </div>
    <div class="bg-gray-500">
      hello world
    </div>
    <div class="bg-black">
      hello world
    </div>
    <div class="bg-white">
      hello world
    </div>
  </div>
</div>
</template>
<style scoped></style>

新的3D变换实用程序

v4版本添加了用于执行 3D 转换的 API，例如 rotate-x-*、rotate-y-*、scale-z-*、translate-z-* 等等。

<script setup lang="ts"></script>
<template>
  <div class="perspective-distant">
    <div class="w-64 h-64 rotate-x-51 rotate-z-43 transform-3d">
      <div class="w-full h-full bg-red-500">
        hello world
      </div>
    </div>
  </div>
</template>
<style scoped></style>

扩展的渐变

v4支持设置旋转角度的渐变方式。

<script setup lang="ts"></script>
<template>
  <div class="w-64 h-64 bg-linear-45 from-indigo-500 via-purple-500 to-pink-500"></div>
</template>
<style scoped></style>

v4支持圆锥渐变和径向渐变。

<script setup lang="ts"></script>
<template>
  <div class="size-24 rounded-full bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600"></div>
  <div class="size-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>
</template>
<style scoped></style>

not-* 变体

v4添加了一个新的 not-* 变体，它最终添加了对 CSS :not() 伪类的支持。

https://ui.shadcn.com/ -> 灵活

<script setup lang="ts"></script>
<template>
  <div class="w-64 h-64 bg-amber-800 not-hover:bg-blue-400"></div>
  <ul>
    <li v-for="item in 10" class="not-even:bg-red-400">{{ item }}
    </li>
  </ul>
</template>
<style scoped></style>

CSS优先配置

v4中最大的变化之一是从在 JavaScript 中配置项目转变为在 CSS 中配置项目。

@theme 所有这些值都将作为常规自定义属性添加到您的 CSS 中，这样就可以轻松地将这些值作为内联样式重复使用。

@theme {
  --color-mint-500: hsl(178, 72%, 50%);
}

.my-border {
  border: 5px solid var(--color-mint-500);
}

<script setup lang="ts"></script>
<template>
  <div class="bg-mint-500 text-mint-500">hello world</div>
  <div class="w-32 h-32 my-border"></div>
</template>
<style scoped></style>

删除已弃用的程序

v4中删除了 v3 中已弃用且多年来未记录的所有实用程序。以下是已删除的内容以及现代替代方案的列表：

Deprecated	Replacement
`bg-opacity-*`	Use opacity modifiers like `bg-black/50`
`text-opacity-*`	Use opacity modifiers like `text-black/50`
`border-opacity-*`	Use opacity modifiers like `border-black/50`
`divide-opacity-*`	Use opacity modifiers like `divide-black/50`
`ring-opacity-*`	Use opacity modifiers like `ring-black/50`
`placeholder-opacity-*`	Use opacity modifiers like `placeholder-black/50`
`flex-shrink-*`	`shrink-*`
`flex-grow-*`	`grow-*`
`overflow-ellipsis`	`text-ellipsis`
`decoration-slice`	`box-decoration-slice`
`decoration-clone`	`box-decoration-clone`

更多v4改变细节，参考官网升级文档：

https://tailwindcss.com/docs/upgrade-guide

posted @ 2025-03-09 20:01 Zhentiw 阅读(773) 评论(0) 收藏举报

刷新页面返回顶部

Answer1215