SuperAPI AI 工具集

tailwindcss

前端与建站

查看项目

更新于 10-16 02:29

技能介绍

用途:这是一份 Tailwind CSS v4 的开发指南,帮助开发者用工具类高效编写样式。

主要能力:涵盖 Flexbox、Grid、定位等布局,p/m、space-y 等间距,text/font/leading 等排版,text/bg/border 配色;支持 hover、focus、active、group-hover、disabled 等状态变体;提供 md、lg、sm 等移动优先断点与 container 居中容器;支持暗色模式、任意值(如 top-[117px])、@apply 指令与组件模式(按钮、卡片、表单输入)。

配置方式:v4 在 CSS 中进行配置,例如 @import "tailwindcss"; 后用 @theme 定义颜色、间距、字体与断点;v3 的 tailwind.config.js 仍受支持。官方插件可安装使用:npm install @tailwindcss/forms、npm install @tailwindcss/typography、npm install @tailwindcss/aspect-ratio、npm install @tailwindcss/container-queries。

性能与限制:资料称 v4 自动检测模板文件,无需手动配置 content;全量构建约比 v3 快 3.5 倍(约 100ms),使用 @property、color-mix() 等特性;浏览器要求 Safari 16.4+、Chrome 111+、Firefox 128+。资料未提供安装步骤、价格或授权信息。

适用场景:用工具类搭建响应式界面、组件库与需要暗色模式的项目。建议保持间距一致、移动优先、抽取组件、少用 @apply、优先在主题中定义品牌色。