使用 Tailwind 构建 Vite Vanilla 不起作用

Question

使用 Tailwind 构建 Vite Vanilla 不起作用

Mar*_*zek 5 javascript tailwind-css vite

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

我的 postcss.config.js 是这样的

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

Run Code Online (Sandbox Code Playgroud)

我的顺风配置是这样的

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Suf*_*ian 6

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

从main.js文件（Vite 模板的一部分）中删除代码。
您可能还想#app从styles.css（Vite 模板的一部分）中删除该块。
将以下行添加到您的index.html中：
```
<link rel="stylesheet" href="/style.css">
```
Run Code Online (Sandbox Code Playgroud)
现在在中<body>，您可以像这样使用 Tailwind：
```
<div class="text-2xl">Hello, World!</div>
```
Run Code Online (Sandbox Code Playgroud)

PS：感谢这个视频（从6:11到7:36）的解决方案。

归档时间：	4 年前
查看次数：	3546 次
最近记录：	3 年，5 月前