犹豫没有用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: {},
  },
  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引入