按照官網的安裝教程，屬性最后無法生效，這是自我改良版，添加了額外步驟，但是每次引入新的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