Tailwind 4.0 将会更快更好。
安装 Tailwind 版本 4 的包：
$ npm install tailwindcss@next @tailwindcss/vite@nextVite 配置:
import tailwindcss from '@tailwindcss/vite';import { defineConfig } from 'vite';export default defineConfig({ plugins: [tailwindcss()],});最后，在你的主 CSS 文件（app.css）中导入 Tailwind
@import "tailwindcss";那么，现在让我们关注一下 Tailwind 版本 4 中的新功能：
在以前的版本中，我们需要创建 tailwind.config.js 并在全局 CSS 文件中添加三个指令：
@tailwind base;@tailwind components;@tailwind utilities;现在，只需要一个指令，而且我们将使用带有特殊指令 @theme 的 CSS 变量来代替配置文件，如下所示：
@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 的类：
<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：
@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：
@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：
<div class="group"> <div class="group-has-[&:focus]:opacity-100"> <div class="group-has-focus:opacity-100"> </div></div>通过这种方式，你可以创建更灵活、更强大的样式组合，从而更好地适应复杂的设计需求。例如，当一个元素获得焦点时，使其父元素的透明度变为 100%。
这个新功能大大增强了 Tailwind CSS 的可组合性和灵活性，使开发者能够更加精细地控制样式和交互行为。
Tailwind CSS 4 是一个强大且多功能的工具，适用于希望简化工作流程和创建美观、响应式网站的 Web 开发人员。凭借其增强的性能、扩展的调色板、改进的定制、新的实用工具类以及对无障碍性的关注，Tailwind CSS 4 将成为开发人员工具包中的必备工具。无论你是在构建小型项目还是大型应用程序，Tailwind CSS 4 都提供了实现你的 Web 设计所需的功能和灵活性。
本文链接：http://www.28at.com/showinfo-26-90352-0.htmlTailwind 4.0 即将发布，看起来很不错！
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号