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>