犹豫没有用vue-cli脚手架，自己配置的webpack+vue3，在配置tailwindCSS时走了点弯路，在此记录一下历程

官方教程

 Installation: Tailwind CLI - Tailwind CSS

首先安装

npm install -D tailwindcss

 生成配置文件

npx tailwindcss init

tailwind.config.js文件内的配置，该文件与node_modules同级

以前只配了｛html,js｝，后来发现要把vue写上去才会生效

module.exports = {
  content: ["./src/**/*.{html,js,vue}","./src/*.{html,js,vue}"],
  theme: {
   
    extend: {
      maxWidth: {
        dd: "102px",//使用方法：max-w-dd
      },
      width: {
        aa:'99px'//使用方法：w-aa
      },
      colors: {
       //使用方法：text-gg text-gg-light text-gg-dark
        gg: {
          light: '#aca',
          DEFAULT: '#f00',
          dark: '#fca',
        }
      },
      fontSize: {
        caca: ['1.75rem', { lineHeight: '1rem' }],//使用方法：text-caca
      },
    },
  },
  plugins: [],
}

可以在package.json中新增命令

"tw":"npx tailwindcss -i ./src/css/normal.css -o ./src/css/tw.css --watch"

其中normal.css内容仅仅是

@tailwind base;
@tailwind components;
@tailwind utilities;

tw.css是已经编译完毕的，可在代码中用import引入

normal.css代码举例

@tailwind base;
@tailwind components;
@layer components {
  .aceng {
    @apply bg-red-500  font-bold py-2 px-4  rounded-xl;
  }
  .bceng{
    @apply aceng ;
    @apply bg-red-100;
  }
  .wsj{color:#f00;}
  .alitagblue{background-color:#d5e6fa;color:#6482b4;font-weight:bold;}
  .lanbtn{
    @apply rounded-sm p-1 text-center text-white;
    background-color:#3874f6;
  }
  .yellowtag{
        background: #fff5d9;
          color: #96635f;
          border: 1px solid #ffe8a8;
          height: 118px;
          padding: 10px 20px 6px 20px;
  }
  .lvse{
    background-color:#f6fff8;
    color:#57bf48;
    font-weight:bold;
  }
}

@tailwind utilities;

关于@tailwind utilities的使用，可能是需要搭配scss