TailwindCss的vue3安装使用

按照官网的安装教程，属性最后无法生效，这是自我改良版，添加了额外步骤，但是每次引入新的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