为什么在构建我的 vite 项目时 tailwindcss 不起作用？

Question

vanilla-ts我使用模板创建了一个 Vite 项目npm create vite@latest。

我添加了 tailwindcss 并npm install -D tailwindcss postcss autoprefixer通过 初始化了配置文件npx tailwindcss init -p。

我postcss.config.js的如下：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

我的tailwind.config.js如下：

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

在src目录中，我有我的main.ts和style.css文件。我将 tailwind 的指令添加到我的style.css文件中：

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

在我的main.ts脚本中，我导入style.css：

import './style.css';

function getElement<T extends HTMLElement>(query: string): T {
  const element = document.querySelector<T>(query);
  if (!element) throw new Error(`Element not found: ${query}`);
  return element;
}

const app = getElement<HTMLDivElement>('#app');
app.innerHTML = '>:(';

当我这样做时npm run dev，它工作得完美无缺。但是，在使用 构建项目时npm run build，未应用 tailwind。

请原谅我的天真，但我错过了什么？

Answer 1

这是一个老问题，这可能无法解决您在这里遇到的确切问题，但我在npm run dev.

我的项目是相同的 - 设置一个新的 Vite vue 3 项目，运行相同的npm命令来安装和设置 Tailwind，唯一的区别是使用 JS 而不是 TS。

对我有用的是.vue在我的文件中添加文件tailwind.config.js。需要进行一些挖掘，但Tailwind vite 安装指南Vue上的选项卡说也可以这样做，只是不是很明显。

npm run dev您可以在添加此行之前TailwindCSS 给我的错误消息中看到这一点：

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

tailwind.config.js文件.vue添加了：

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