vue3 配置 tailwind 和 tailwind 用法

第一步

npm create vite@latest my-project -- --template vue
cd my-project

第二步

npm create vite@latest my-project -- --template vue
cd my-project

第三步

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

第四步

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

第五步

npm run dev

第六步

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>

追加颜色可以用 tw-text-[#自定义颜色]

<div class="tw-text-amber-400 text-xl">9</div>