使用Tailwind构建Vite Vanilla无法正常工作

Question

使用Tailwind构建Vite Vanilla无法正常工作

5

我使用Vite创建了一个原生JS项目，并按照文档的说明安装了Tailwind。当我在开发模式下运行时，类起作用，但是当我构建dist文件夹并提供该构建时，它就无法工作了。

我的postcss.config.js文件如下：

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

我的 tailwind 配置如下：

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

- Martin Pilaszek

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sufian · Accepted Answer

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

Remove the code from your main.js file (part of Vite's template).
You may also want to remove the #app block from the styles.css (part of Vite's template).

Add the following line to your index.html:

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

Now in the <body>, you can use Tailwind like this:
```
<div class="text-2xl">Hello, World!</div>
```

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