tailwind: 常用 cheatsheet/idea
自己的使用总结
cheatsheet
| 功能 | 用法 |
|---|
| 引入 | @tailwind base;
@tailwind components;
@tailwind utilities;
|
| 动态类名 | // @title: Tailwind classes used predict
// @description: DO NOT DELETE THIS COMMENT
// @enums: 'bg-red-100', 'bg-red-200', 'bg-red-300'
/**
| @title | Tailwind classes used predict
| @description | DO NOT DELETE THIS COMMENT
| @enums | 'bg-red-100', 'bg-red-200', 'bg-red-300'
**/
|
| @apply 复用类名 | .shadow-able-card {
@apply shadow-md transition-colors hover:bg-gray-200 hover:shadow-lg;
}
|
| @layer 复写现有的 | @layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
}
@layer components {
.btn-blue {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
}
@layer utilities {
.filter-none {
filter: none;
}
.filter-grayscale {
filter: grayscale(100%);
}
}
|
| theme，全局 | .content-area {
height: calc(100vh - theme(spacing.12));
}
|
| 子选择器(tw:3.x+) | .child-styles {
@apply *:px-2;
}
|
| w-5/h-5=size-5 | .wh-5{
@apply size-5;
}
|
常用工具
后期考虑加工成 presets/plugins 等形式，供各项目使用。
已经添加到自己的 presets中去了
.fcb {
@apply flex items-center justify-between;
}
.fcc {
@apply flex items-center justify-center;
}
.abs-center {
@apply absolute inset-0 m-auto;
}
.trans-center {
@apply absolute -left-1/2 -top-1/2 translate-x-1/2 translate-y-1/2;
}
.idea 列表
| 想法 | 代码 |
|---|
| tailwind-layouts模块，可以实现常用layout | |
| tailwind-shortcuts | 配置范围即可: [1, 100] -> ✅ 已经实现
.x-1 { @apply flex gap-1 }
.x-100 { @apply flex gap-100 }
.y-1 { @apply flex flex-col gap-1 }
.y-100 { @apply flex flex-col gap-100 }
|
参考