应将表单公共样式用@apply抽成.form-input等自定义类并置于@layer components中，避免被PurgeCSS误删；@apply仅支持Tailwind原生工具类，不可嵌套自定义类；需显式声明dark:变体以适配暗色模式。
怎么用 @apply 提取表单元素的公共样式
直接在组件类里重复写 border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 很容易漏掉某一项，尤其改主题色或圆角时要全局搜。用 @apply 抽成自定义类是最省事的做法，但必须在 @layer components 里声明，否则生产构建可能被 PurgeCSS 清掉。
- 在
src/styles.css或主 CSS 入口里加@layer components { }包裹块 - 里面写
.form-input { @apply border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500; } - HTML 中直接用
class="form-input"，别再拼一堆 utility 类 - 注意：不能在
@layer utilities里用@apply引用其他 utility 类（比如@apply p-2 text-sm），Tailwind v3.3+ 会报错
为什么 @apply 里不能嵌套自定义类
@apply 只能展开 Tailwind 自带的原子类，不支持递归解析你写的 .form-input 这种类名。常见错误是想“复用样式”而写成 .form-textarea { @apply form-input h-24; }——这行不通，编译器不认识 form-input 是个啥。
- 错误现象：
[@apply] is not a valid utility class name - 正确做法：把共用部分再拆一层，比如抽个
.form-base放基础边框/尺寸/焦点态，.form-input和.form-textarea都@apply form-base（前提是form-base本身只含原生 utility） - 更稳的方式：用 CSS 自定义属性控制变量，比如
--form-border: 1px solid #d1d5db;，然后@apply border-[var(--form-border)]
input / select / textarea 的尺寸和垂直对齐怎么保持一致
原生表单控件默认 baseline 对齐，input 和 select 高度常不一致，textarea 行高又另算。光靠 h-10 不够，得统一盒模型和内边距逻辑。
-
input[type="text"], select, textarea都加上box-border（Tailwind 的box-border已默认启用，但显式写上更安心） - 避免混用
h-和py-：优先用h-10+px-3，而不是py-2 px-3再算总高 -
textarea要加resize-none和min-h-[2.5rem]（不是h-10），否则默认高度太小，用户输入时突然撑开 - 所有控件加
leading-tight控制行高，防止文字贴顶或下沉
暗色模式下表单边框和焦点环怎么自动切换
不能只靠 dark:border-gray-600，因为焦点环颜色也要变，而且 focus:ring 默认不响应 dark: 前缀，得手动配。
立即学习“前端免费学习笔记（深入）”；
- 在
@layer components里写：.form-input { @apply border border-gray-300 dark:border-gray-600 px-3 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400; } -
focus:ring必须显式写dark:focus:ring-*，否则暗色下还是亮色焦点环 - 如果用了
ring-offset（比如配合focus-within），也要同步加dark:ring-offset-变体，否则暗色下出现白边 - 验证状态如
invalid:border-red-500同理，dark:invalid:border-red-400别漏
@layer components 里类名的扫描逻辑——如果你把自定义类写在 JS 文件里的模板字符串里，或者用动态拼接的 class 名，它根本不会保留，样式就丢了。 
