使用 Tailwind 构建 Vite Vanilla 不起作用答案

【问题标题】：Vite Vanilla build with Tailwind doesn't work使用 Tailwind 构建 Vite Vanilla 不起作用
【发布时间】：2021-12-27 02:52:42
【问题描述】：

我使用 Vite 创建了一个 vanilla js 项目，并按照文档所述安装了 Tailwind。当我在开发模式下运行时，类可以工作，但是当我构建 dist 文件夹并提供该构建时，它不会。

我的 postcss.config.js 是这个

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

我的顺风配置是这样的

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.js',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

【问题讨论】：

标签： javascript tailwind-css vite

【解决方案1】：

您可以按照以下步骤解决问题：

从您的 main.js 文件（Vite 模板的一部分）中删除代码。
您可能还想从 styles.css（Vite 模板的一部分）中删除 #app 块。

将以下行添加到您的 index.html：

<link rel="stylesheet" href="/style.css">

现在在<body>，您可以像这样使用 Tailwind：
你好世界！

PS：感谢this video（从 6:11 到 7:36）的解决方案。

【讨论】：