SuperAPI AI 工具集

tailwindv4

前端与建站

查看项目

更新于 10-16 09:28

技能介绍

用途:该技能面向使用 Tailwind CSS v4 的前端开发,覆盖新项目搭建、从 v3 迁移、自定义主题、OKLCH 颜色、设计令牌与 CSS 变量、响应式与暗色模式、Vite 构建优化、自定义工具类与动画。

主要能力:以 CSS-first 配置替代传统 JavaScript 配置,使用 @theme 指令定义主题;采用 OKLCH 颜色格式与语义化命名(primary、secondary 等);支持容器查询、3D 变换等 v4 新特性;提供按主题加载的参考文档,包括 setup、theme、colors、utilities、responsive、animations、migration。

使用方式:安装 Tailwind v4 与 Vite 插件;在 CSS 入口使用 @import 'tailwindcss' 而非 @tailwind 指令;通过 @theme 定义主题与 CSS 变量;用工具类编写组件,并实现暗色模式与响应式布局。输出时通常给出 @theme 配置、组件示例、暗色模式与响应式模式及简要设计说明。

限制与约束:不应使用 tailwind.config.js(v4 已弃用)、旧 @tailwind base/components/utilities 语法、RGB/HSL 新自定义颜色,也不应在已有工具类时另写自定义 CSS,或忽略暗色模式、在存在主题值时使用任意值。具体安装命令、版本号与价格等资料暂未提供。