vite cli 工具创建的react+ts项目模板，要怎么改，才能使 tailwind.config.js 文件里面使用 require？报错是 is not defined。

Question

我想给我的ts项目增加 tailwind，tailwind官方教程里那个是纯 js 项目，连 tsconfig.json 都没的。

Answer 1

引用 皆我百晓生 小程序回复内容作答：

要在 tailwind.config.js 文件中使用 require，你需要使用 require() 而不是 import。在使用 require() 之前，请确保你的项目的根目录还有一个 postcss.config.js 文件，该文件将提供 PostCSS 的配置信息。

首先，在你的项目的根目录执行以下命令，以确保 tailwind 相关的依赖已被安装：

npm install tailwindcss postcss autoprefixer

然后，在根目录创建一个 postcss.config.js 文件，并添加以下内容：

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

接下来，在 tailwind.config.js 文件中，你可以使用 require() 引入 postcss.config.js 文件。示例代码如下：

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

现在，你应该能够在你的项目中成功使用 require() 并配置 Tailwind CSS 了。

如果你在使用 TypeScript，确保你的 tsconfig.json 文件中设置了 "esModuleInterop": true。例如：

{
  "compilerOptions": {
    "esModuleInterop": true,
    // 其他设置...
  },
  // 其他配置...
}

这样你就可以正常引入 require()，不再报错 "is not defined"。