tailwindcss存在的意义非常好，可以减少我们对一些基础样式的定义和重复样式设置的冗余，引入tailwind，我们可以多级拼接class，而不用多余去定义class类。
1.首先install tailwind
2.为了使用方便，个人增加如下配置 tailwind.config.js：
module.exports = {
purge: {
enable: process.env.NODE_ENV === 'production',
content: ['./index.html', './src/**/*.{vue,ts,tsx}'],
},
theme: {
extend: {
zIndex: {
'-1': '-1',
},
colors: {
primary: {
DEFAULT: '#00a8b2',
// dark: primaryColorDark,
},
secondary: 'var(--color-secondary)',
},
spacing: {
px: '1px',
1: '0.25rem',
},
screens: {
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
'2xl': '1600px',
},
},
}
}
3.添加tailwind.css:
:root {
--color-secondary: #ecc94b;
/* ... */
}
@tailwind base;
@tailwind components;
@tailwind utilities;
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
4.基础用法
<button class="bg-red-500 hover:bg-red-700 ...">
Hover me
</button>
