SuperAPI AI 工具集

tailwindcss

前端与建站

查看项目

更新于 10-16 06:12

技能介绍

用途:这是一份 Tailwind CSS v4 的实践规范技能,用于在涉及 Tailwind 的任务中遵循“实用类优先、自定义 CSS 作为逃生舱”的原则,仅在无需 CSS 推理的琐碎类添加时可跳过。

主要能力:覆盖 v4 的 CSS 优先配置体系,包括 @theme 设计令牌、@utility 自定义工具类、@custom-variant 自定义变体,以及主题配置、类编写、布局、尺寸间距、排版、背景效果、变换动画、框架集成等参考文档。

使用方式:入口为单条 @import "tailwindcss";,提供 preflight 重置、主题变量与全部工具类,不再使用 v3 的 @tailwind base/components/utilities。Vite 安装 @tailwindcss/vite 插件,PostCSS 安装 @tailwindcss/postcss,CLI 使用 npx @tailwindcss/cli -i input.css -o output.css。v4 无 tailwind.config.js,配置全部写在 CSS 的 @theme 中;需移除 postcss-import 与 autoprefixer,且不要搭配 Sass、Less 或 Stylus。

适用场景:前端项目中的样式编写、主题定制、响应式与容器查询、暗色模式、组件类组合及 React/Vue/Svelte 等框架集成。

限制:资料未提供收费、价格与效果数据;具体 API 细节需查阅对应参考文档,本简介不展开完整代码示例。