Tailwind
- tailwind推荐的排序方式，第三方类名>布局类名>装饰类名；
prettier-plugin-tailwindcss 这个插件可以自动格式化 Tailwind 类名排序，就能得到工整的类名
- 复用 css,使用
@apply设置几个常用的布局
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
.margin-center {
@apply mx-auto my-0;
}
.flex-center {
@apply flex items-center justify-center;
}
.absolute-center {
@apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
}
}
export const card = 'border rounded-md p-4'
- 善用选择器，
- 鼠标悬停
hover:、聚焦 focus:
- 表单提交
required, invalid, disabled
- 选择第一个孩子
first:，最后一个孩子 last:，奇数 odd:，偶数 `even:
- 父元素悬停触发子元素样式
group
- tailwind 是分层的，基础层、组件层和实用程序层:Adding Custom Styles
- 学习 unocss，使用布尔类型封装组件,极简传参，
<Button primary sm>Primary SM</Button>
// 配置 `vscode` 的 `setting.json`
"tailwindCSS.experimental.classRegex": [
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
["classnames\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
["classNames\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
"(?:enter|leave)(?:From|To)?=\\s*(?:\"|')([^(?:\"|')]*)",
"(?:enter|leave)(?:From|To)?=\\s*(?:\"|'|{`)([^(?:\"|'|`})]*)",
":\\s*?[\"'`]([^\"'`]*).*?,",
["(?:twMerge|twJoin)\\(([^;]*)[\\);]", "[`'\"`]([^'\"`;]*)[`'\"`]"],
"tailwind\\('([^)]*)\\')",
"(?:'|\"|`)([^\"'`]*)(?:'|\"|`)",
"(?:const|let|var)\\s+[\\w$_][_\\w\\d]*\\s*=\\s*['\\\"](.*?)['\\\"]"
]
参考文章