SuperAPI AI 工具集

tailwindcss

前端与建站

查看项目

更新于 10-15 17:27

技能介绍

用途:本资料是 Tailwind CSS v4(2025年1月发布)的开发指南,讲如何用实用类(utility class)高效编写样式,适用于前端组件与页面开发。

主要能力与原则:实用优先,用工具类替代自定义 CSS;移动优先,先用响应式修饰符从小屏向上扩展;重复模式抽成组件;统一使用 Tailwind 间距刻度;通过主题扩展保持品牌一致。

涵盖内容:Flexbox、Grid、定位等布局类;padding、margin、space 等间距类;文本大小、字重、行高与颜色类;响应式断点(如 md:、lg:、sm:grid-cols-2)、container 与 max-w 居中容器;按钮、卡片、表单输入等组件模式;hover、focus、active、group-hover、disabled 等状态变体;深色模式(dark: 类,或媒体查询 prefers-color-scheme)。

自定义与配置:支持任意值语法(如 top-[117px]、bg-[#1da1f2]);@apply 指令;v4 采用 CSS 优先配置,在 app/globals.css 中用 @import "tailwindcss"; 与 @theme 定义颜色、间距、字体、断点等变量;v3 的 tailwind.config.js 仍受支持。官方插件可安装 @tailwindcss/forms、@tailwindcss/typography、@tailwindcss/aspect-ratio、@tailwindcss/container-queries。

性能与限制:v4 自动检测并扫描模板文件,无需 content 配置;完整构建约 100ms,较 v3 快约 3.5 倍;浏览器要求 Safari 16.4+、Chrome 111+、Firefox 128+。建议统一间距、默认考虑移动端、少用 @apply、提前规划深色模式。

资料未提供收费、价格与具体项目集成步骤等信息。