使用 Tailwind 构建 Vite Vanilla 不起作用

Question

I created a vanilla js project with Vite and installed Tailwind as the docs says.我使用 Vite 创建了一个 vanilla js 项目，并按照文档所述安装了 Tailwind。 When I run in dev mode the classes works, but when I build the dist folder and serve that build it doesn't.当我在开发模式下运行时，类可以工作，但是当我构建 dist 文件夹并提供该构建时，它不会。

My postcss.config.js is this我的 postcss.config.js 是这个

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

And my tailwind config is this我的顺风配置是这样的

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

Answer 1

You can follow these steps to resolve the issue:您可以按照以下步骤解决问题：

Remove the code from your main.js file (part of Vite's template).从您的main.js文件（Vite 模板的一部分）中删除代码。
You may also want to remove the #app block from the styles.css (part of Vite's template).您可能还想从styles.css （Vite 模板的一部分）中删除#app块。
Add the following line to your index.html :将以下行添加到您的index.html ：
```
 <link rel="stylesheet" href="/style.css">
```
Now in the <body> , you can use Tailwind like this:现在在<body>中，您可以像这样使用 Tailwind：
```
 <div class="text-2xl">Hello, World!</div>
```

PS: thanks to this video (from 6:11 to 7:36) for the solution. PS：感谢这个视频（从 6:11 到 7:36）的解决方案。

使用 Tailwind 构建 Vite Vanilla 不起作用

问题描述

1 个解决方案

解决方案1
1 2022-01-15 21:00:25

使用 Tailwind 构建 Vite Vanilla 不起作用

问题描述

1 个解决方案

解决方案1 1 2022-01-15 21:00:25

解决方案1
1 2022-01-15 21:00:25