Tailwind CSS配置失效排查：content字段及构建问题咨询

无法让Tailwind CSS在我的Vue3项目中正常工作，怀疑是配置文件存在问题，以下是我的操作流程：

• 安装Tailwind并执行初始化：
  

• 初始tailwind.config.js配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/components/DropdownVue/DropdownVue.vue"], // 已包含Dropdown组件文件
  theme: {
    extend: {},
  },
  plugins: [],
};

• 创建src/index.css并引入Tailwind模块：

@tailwind base;
@tailwind components;  // 已引入Tailwind模块
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Noto Serif", serif, Ariel, Helvetica, sans-serif;
  background: #d7d7d7;
}

img {
  width: 100%;
  object-fit: contain;
}

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap");

• 执行构建得到output.css，并在public/index.html中引入：

<link href="/dist/output.css" rel="stylesheet">

但此时Tailwind仍无法工作，我将tailwind.config.js的content字段修改为如下内容，问题依旧存在：

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

请问：修改配置文件后是否需要重新执行构建？我的操作到底哪里出现了错误？

附package.json配置：

{
  "name": "stripe-payment-vue3",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-brands-svg-icons": "^6.2.1",
    "@fortawesome/free-regular-svg-icons": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@fortawesome/vue-fontawesome": "^3.0.2",
    "@headlessui/vue": "^1.7.9",
    "@heroicons/vue": "^2.0.14",
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.1.6",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "autoprefixer": "^10.4.13",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.4"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

内容的提问来源于stack exchange，提问作者Eric Andre