如何将Next.js TypeScript中的样式文件夹移动到src文件夹，并使用Tailwind CSS？

Question

我正在使用Next.js、TypeScript和Tailwind CSS。我想将styles文件夹移动到src文件夹中，我已经在tsconfig.json文件中添加了值为src的baseUrl选项，但是我收到了以下错误：

    ./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[5].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[5].use[2]!./node_modules/tailwindcss/tailwind.css
TypeError: Object.fromEntries is not a function

我想把样式文件夹移动到 src 文件夹下，以使我的文件结构更加简单化。谢谢。

- Sandhi

---

这个回答解决了你的问题吗：在使用chakra-ui和next.js时出现“Object.fromEntries不是函数”错误？Object.fromEntries()仅支持Node.js v12及以上版本。 - juliomalves

Answer 1

删除 .next 文件夹，然后再次运行开发服务器（使用 npm run dev 命令）。

这在我的情况下起作用了。我猜测这是某种缓存问题。显然，你需要更改你的 tailwind.config.js 文件内容，应该检查 ./src/**/*.{js,jsx,ts,tsx} 而不是 ./pages/**/*.{js,jsx,ts,tsx}。

- Grant Pitt

---

很好的发现，它也被缓存了。感谢你的答案。 - Hansel

Answer 2

在整理我的根目录下的文件，将它们移动到src后，我遇到了同样的问题。我从Tailwind Labs的这个示例仓库中复制了tailwind.config.js的配置选项，并发现它对我有效。

module.exports = {
  purge: {
    content: ['./src/**/*.{js,jsx,ts,tsx}', './next.config.js'],
  },
  ...

- Jacob Salway

---

这个问题在我使用的 2023 Next.js 模板中得到了解决，我将所有文件都移动到了 src 文件夹中以方便管理，但是 tailwindcss 出现了问题，不过这个方法解决了。谢谢！ - Rolando Niubó

这对我有用，但我也收到了一个警告：“在Tailwind CSS v3.0中，purge/content选项已更改。请参考此升级指南：https://tailwindcss.com/docs/upgrade-guide#configure-content-sources”。 - Robin Dalmy

Answer 3

配置文件必须存储在主根目录中，例如next.config.js。 但是样式文件可以存储在src目录中。 阅读此文档： https://tailwindcss.com/docs/guides/nextjs

- Alireza Amini

---

我已经尝试过保留文件，但仍然出现错误。 我通过删除node_modules并重新安装来修复了这个错误。 谢谢你的回答 :) - Sandhi