相信很多小伙伴在使用 vue2 的时候,在 options API 结构开发，写样式的时候是很痛苦的，template 结构层在最上面，中间夹着逻辑层，然后才到样式层，当你想写样式的时候，还要上下来回跳，当然你可以在结构层写内联样式，但是一旦你的样式繁杂多起来，看起来就是一坨东西，后期维护的实在难以看下去！为了解决这一痛点，tailwindcss 的特性香的不行！
特点:
1. 它的样式比较简单，让你写最少的语句完成你想要的样式。
比如：
- display: flex = flex ....
- margin-top: 0.25rem = mt-1
- font-size: 1rem; line-height: 1.5rem = text-base
- margin-left: 0.25rem; margin-right:0.25rem = mx-1 (my-1 同理)
- overflow: hidden;text-overflow: ellipsis;white-space: nowrap; = truncate(文本溢出)
*补充：
- 自定义样式
w-[100rem] h-[100rem]* 或者 bg-[#165DFF] 自定义样式 - 覆写/添加样式
// tailwind.config.js
module.exports = {
theme: {
textColor: theme => theme('colors'),
textColor: {
'primary': '#3490dc',
'secondary': '#ffed4a',
'danger': '#e3342f',
}
}
}
2. 上面的单位可以发现它都是 rem(rem 是一个相对单位，相对根元素字体大小的单位),因此使用此框架字体边距等等在各种屏幕适配上会比较统一。
3. 响应式设计。 （ps:利用这个特点在写官网兼容移动端非常方便）
| 断点前缀 | 最小宽度 | CSS |
|---|---|---|
| sm | 640px | @media (min-width: 640px) { ... } |
| md | 768px | @media (min-width: 768px) { ... } |
| lg | 1024px | @media (min-width: 1024px) { ... } |
| xl | 1280px | @media (min-width: 1280px) { ... } |
| 2xl | 1536px | @media (min-width: 1536px) { ... } |
注意:移动端优先原则(使用无前缀的功能类来定位移动设备，并在较大的断点处覆盖它们)
// 即在移动端( <640px )默认用ml-1 在屏幕( 640px < x < 768px )用ml-2 以此类推...
<div class="ml-1 sm:ml-2 md:ml-3">距离左边的距离</div>
4. 暗黑模式
若需要暗黑模式，你只需要在tailwind.config.js中配置
module.exports = {
darkMode: 'class',
// more options...
}
接着在需要的样式中加上 dark:
<div class="w-full h-full bg-white dark:bg-gary-500"></div>
