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

Question

i'm using nextjs with typescript and tailwindcss. I want to move styles folder to src folder, i already added baseUrl with value src options in my tsconfig.json file, but I got an error like this :

    ./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

and how i move styles folder to src folder, i want to make my folder structure simpler. thank you

Answer 1

config files must be stored in main root like next.config.js . but style files can be stored in src directory. read this doc: https://tailwindcss.com/docs/guides/nextjs

Answer 2

I had the same problem after moving my files under src to clean up my root directory. I copied the config options for tailwind.config.js from this example repo from Tailwind Labs and found that it worked for me.

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

Answer 3

Delete the .next folder, then run the dev server again (with npm run dev ).

This worked in my case. I'm guessing it's some kind of caching issue. Obviously you'll need to change your tailwind.config.js where the content should check ./src/**/*.{js,jsx,ts,tsx} rather than ./pages/**/*.{js,jsx,ts,tsx} .