用途:Tailwind CSS 是实用优先的 CSS 框架,用工具类直接在标记中组合样式,快速构建自定义设计,减少手写 CSS。
主要能力:提供布局(Flexbox、Grid、容器)、间距、尺寸、排版、颜色、边框、阴影、透明度、过渡等工具类;支持移动优先的响应式断点(sm 640px、md 768px、lg 1024px、xl 1280px、2xl 1536px);支持 hover、focus、active、disabled、group-hover、peer-checked 等状态变体;支持深色模式(darkMode 设为 class 或 media);可通过 tailwind.config.js 扩展主题颜色、字体、间距、圆角,并添加自定义工具类与插件;提供 @apply 抽取可复用组件类;官方插件包括 @tailwindcss/forms、@tailwindcss/typography、@tailwindcss/aspect-ratio。
使用方式:以 Vite 为例,安装 npm install -D tailwindcss postcss autoprefixer,初始化 npx tailwindcss init -p,在 tailwind.config.js 的 content 中配置文件路径,并在 CSS 中加入 @tailwind base; @tailwind components; @tailwind utilities;。
适用场景:快速搭建网页与组件样式、响应式布局、深色模式界面、设计系统主题定制。
限制:需正确配置 content 路径以清除未使用样式;避免过度使用 @apply 与任意值;具体版本、收费与平台支持暂未提供。