SuperAPI AI 工具集

tailwind-css

前端与建站

查看项目

更新于 10-15 21:47

技能介绍

用途:Tailwind CSS 是实用优先的 CSS 框架,直接在标记中组合单一用途的类来设置样式,适合构建 UI、响应式布局、深色模式以及 hover/focus 等交互状态。

主要能力:提供实用类(如 flex、items-center、gap-4、p-6、bg-white、rounded-xl、shadow-lg)、状态变体(hover:、focus:、active:、disabled:)、移动优先的响应式前缀(sm: 640px、md: 768px、lg: 1024px、xl: 1280px、2xl: 1536px)、深色模式(dark:)、Flexbox 与 Grid 布局、间距与尺寸控制、排版样式、卡片与容器样式,以及任意值语法(如 w-[327px]、bg-[#1da1f2]、grid-cols-[1fr_2fr])。

使用方式:在元素 class 中直接书写实用类,例如 <div class="flex items-center gap-4 p-6 bg-white rounded-xl shadow-lg">;响应式采用移动优先,先写基础样式再叠加 sm:/md: 等前缀;深色模式使用 dark: 前缀。

最佳实践:移动优先编写基础样式;避免 @apply,直接使用实用类并抽取组件;使用一致的间距刻度而非任意值;将布局、间距、颜色等类按逻辑分组。

限制:资料未提供安装命令、配置方式、收费与价格、平台支持等具体信息,暂未提供。