SuperAPI AI 工具集

tailwind4-expert

前端与建站

查看项目

更新于 10-16 01:49

技能介绍

用途:tailwind4-expert 面向 Tailwind CSS 4.0+ 与 CSS-First 架构,用于配置主题、从 v3 迁移到 v4,以及实现现代设计系统。资料强调以原生 CSS 变量替代繁重的 JavaScript 构建步骤,并借助基于 Rust 的 Oxide 引擎实现快速编译(资料称增量构建可低于 10ms)。

主要能力:一、CSS-First 配置,将设计令牌统一写入 @theme,放弃 tailwind.config.js;二、性能优化,使用 Rust 引擎;三、现代 CSS 特性,包括原生容器查询、3D 变换与 @utility(无需插件);四、以 CSS 变量为基础的严格令牌工作流,保证设计系统一致性。资料列出的 4.0 主要收益:零 JS 配置、内置容器查询(如 @container 与 @md:grid-cols-2)、动态工具类(如 grid-cols-(--my-grid-count))、原生 3D 变换(如 rotate-x-45、perspective-1000)以及默认可组合性。

使用方式:资料给出的迁移工具为 npx @tailwindcss/upgrade;配置在 CSS 中通过 @theme 定义令牌,功能类中可用 var(--color-*) 引用,容器查询变体写作 @md:/@lg:,自定义工具类使用 @utility。资料还给出一个组合容器查询、3D 变换与 @theme 变量的 React 组件示例。

适用场景:主题与设计令牌管理、v3 到 v4 迁移、需要容器查询与 3D 效果的现代前端界面。限制:资料未提供收费方式、价格、平台支持范围与具体兼容版本等细节;文中性能数据来自其自述,需自行验证。原文以 Tailwind CSS 4.0+ 与 Lightning CSS 为优化目标。