按照官网的安装教程，属性最后无法生效，这是自我改良版，添加了额外步骤，但是每次引入新的tailwindcss属性 需要重新跑一次项目
npm下载tailwindcss
npm install -D tailwindcss
npx初始化tailwind配置
npx tailwindcss init
此时根目录会出现tailwind.config.js，对其复制以下内容：
/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./src/**/*.{html,js}"],theme: {extend: {},},plugins: [],
}然后src中的主css文件input.css(没有就创造)通过@tailwind指令引用：
@tailwind base;
@tailwind components;
@tailwind utilities;
在终端运行tailwind CIL
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
在根目录的index.html引用link生成的output.css
<link href="./output.css" rel="stylesheet">
接下来就可以随意使用tailwindcss：
<template><div class="text-3xl ">213</div><div class="text-3xl font-bold underline">213</div><h1 class="text-3xl font-bold underline">Hello world!</h1><h1 class="underline font-serif">Hwllo world!</h1>
</template>官方是这样写的 实际无法生效
我去查了下 还需要在package.json中配置构造指令：
{"scripts": {// ... existing scripts ..."tailwind": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"}
}如果index.html处在根目录中，或者用vue开发项目，或者使用了ts，还需要对tailwind.config进行修改：
export default {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}"],theme: {extend: {},},plugins: [],
}然后再次运行项目：
npm run project-name
或者直接运行如下指令：
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch