tailwind + vue

1. 在根目录下生成 tailwind 配置文件

   npx tailwind init --full
2. 修改 package.json 的 postcss 选项

     "postcss": {
       "plugins": {
         "tailwindcss": "./tailwind.config.js",
         "autoprefixer": {}
       }
     },

3. 导入样式到 App.vue 下

   <style>
   @import "../node_modules/tailwindcss/base.css";
   @import "../node_modules/tailwindcss/components.css";
   @import "../node_modules/tailwindcss/utilities.css";
   </style>

4. 刷新页面测试是否生效了
5. 在 tailwind.config.js 修改颜色等，做定制

   theme: {
       screens: {
         sm: '640px',
         md: '768px',
         lg: '1024px',
         xl: '1280px',
       },
       colors: {
         transparent: 'transparent',
   
         black: '#000',
         white: '#fff',
         gray: {
           // 100: '#f7fafc',
           200: '#e8e8ea',
           300: '#e5e5e5',
           // 900: '#1a202c',
         },
         red: {
           default: '#db0300',
           dark: '#c40400',
         },
       },