如何使用tailwindcss将样式文件夹移动到nextjs typescript中的src文件夹？

Posted 2023-03-07

【中文标题】如何使用tailwindcss将样式文件夹移动到nextjs typescript中的src文件夹？

【英文标题】：How to move styles folder to src folder in nextjs typescript with tailwindcss?

【发布时间】：2021-09-25 00:08:15

【问题描述】：

我正在使用带有 typescript 和 tailwindcss 的 nextjs。我想将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 文件夹，我想让我的文件夹结构更简单。谢谢

【问题讨论】：

这是否回答了您的问题：Object.fromEntries is not a function error when using chakra-ui and next.js？ Object.fromEntries() 仅从 Node.js v12 开始支持。

【参考方案1】：

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

这在我的情况下有效。我猜这是某种缓存问题。显然，您需要更改您的tailwind.config.js，其中内容应检查./src/**/*.js,jsx,ts,tsx 而不是./pages/**/*.js,jsx,ts,tsx。

【讨论】：

很好的发现，它也在为我缓存。感谢您的回答。

【参考方案2】：

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

【讨论】：

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

【参考方案3】：

在将我的文件移动到src 下以清理我的根目录后，我遇到了同样的问题。我从 Tailwind Labs 的 this example repo 复制了 tailwind.config.js 的配置选项，发现它对我有用。

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