写界面用这Skill理工具类

用 TailwindCSS 实用类编写响应式样式。

tailwindcss 是指导 Tailwind 工具类样式的 Skill。它把布局、文字、间距与响应规则放在模板或组件上,并核重复样式和多尺寸呈现。

移动优先表示先定义基础样式,再在条件满足时增加大尺寸规则。sm 这类名字通常表示最小宽度条件,不是“只给手机用”,实际值还需看项目配置。

原文偏好直接使用工具类,也禁止生产中使用 apply,这是一种写作与维护约定,不是所有 Tailwind 项目的统一禁令。配置方式和 JIT 描述还需核所用版本,旧指南不能直接套到新项目。

适合整理已有 Tailwind 界面的样式。本文未改组件或检查版本;抽组件要按共同职责,不只看类名重复,条件类合并也可能冲突。尺寸、暗色、焦点与内容变化应实际检查,类名齐全不等于行为正确。

分类:编程开发

来源仓库:mindrally/skills

适合用来做什么

  • 如何使用 TailwindCSS 实现一个响应式导航栏?
  • TailwindCSS 中如何应用主题颜色?

安装 tailwindcss

npx skills add https://www.iskills.cc/skills/mindrally/skills/tailwindcss/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 tailwindcss 的用途与原始说明

浏览全部 Skill 指南