tailwindcss存在的意義非常好，可以減少我們對(duì)一些基礎(chǔ)樣式的定義和重復(fù)樣式設(shè)置的冗余详民，引入tailwind，我們可以多級(jí)拼接class，而不用多余去定義class類赞季。
1.首先install tailwind
2.為了使用方便，個(gè)人增加如下配置 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.基礎(chǔ)用法
<button class="bg-red-500 hover:bg-red-700 ...">
Hover me
</button>
