vite 不构建 tailwind css

Question

我使用安装了 tailwind 和其他工具npm install -D tailwindcss postcss autoprefixer vite

我使用创建了 tailwind 和 postcss 配置文件npx tailwindcss init -p

tailwind.config.js包含：

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js包含：

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

我的 CSS 文件存在于 css\tailwind.css 中并包含：

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

CSS 文件使用链接到我的 HTMl 页面<link href="/css/tailwind.css" rel="stylesheet" >

当我运行 vite 时，我的应用程序启动时没有构建错误，但未生成顺风输出。

Answer 1

这对我有用。一旦你完成了 Tailwindcss 在其文档中所说的内容，在你的vite.config.js（我在 JavaScript 文件上尝试过这个。我不确定这是否以同样的方式在 TypeScript 上工作）导入 tailwindcss：

import tailwindcss from 'tailwindcss'

然后添加 tailwindcss 作为 PostCSS 插件，如下所示：

css: {
  postcss: {
    plugins: [tailwindcss],
  },
}

完成后，您的vite.config.js外观将如下所示：

/*Other imports*/
import tailwindcss from 'tailwindcss'

export default defineConfig({
  plugins: [],
  resolve: {
    /*something*/
  },
  css: {
    postcss: {
      plugins: [tailwindcss],
    },
  },
});

Answer 2

您需要调整一些设置，感觉已经非常接近了。

1. 编辑 Tailwind.config.js

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 使用“npm run dev”命令启动 Vite 构建脚本。

// Open terminal
npm run dev

3. （可选）将演示 h1 属性复制到索引文件中并进行测试

<h1 class="text-3xl text-blue-700">Testing</h1>