Sanity.io [vite] Internal server error: [postcss] Cannot read properties of undefined (reading 'config') error

Question

Spinning up the sanity studio gets me this error. The page spins up just fine in local host. Any help fixing this would be greatly appreciated enter image description here

here is the error in full:

[plugin:vite:css] [postcss] Cannot read properties of undefined (reading 'config')
    at getTailwindConfig (/Users/adamsmith/Desktop/codingprojects/portfolio/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:84:63)
    at /Users/adamsmith/Desktop/codingprojects/portfolio/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:96:92
    at /Users/adamsmith/Desktop/codingprojects/portfolio/node_modules/tailwindcss/lib/processTailwindFeatures.js:46:11
    at plugins (/Users/adamsmith/Desktop/codingprojects/portfolio/node_modules/tailwindcss/lib/index.js:38:63)
    at LazyResult.runOnRoot (/Users/adamsmith/Desktop/codingprojects/portfolio/portfolio-build/node_modules/postcss/lib/lazy-result.js:339:16)
    at LazyResult.runAsync (/Users/adamsmith/Desktop/codingprojects/portfolio/portfolio-build/node_modules/postcss/lib/lazy-result.js:393:26)
    at LazyResult.async (/Users/adamsmith/Desktop/codingprojects/portfolio/portfolio-build/node_modules/postcss/lib/lazy-result.js:221:30)
    at LazyResult.then (/Users/adamsmith/Desktop/codingprojects/portfolio/portfolio-build/node_modules/postcss/lib/lazy-result.js:206:17)
    at processTicksAndRejections (node:internal/process/task_queues:96:5

This is the contents of my tailwind.config.js file

@type {import('tailwindcss').Config} 
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('tailwind-scrollbar')
  ],
}

toadlyfe · Answer 1 · 2023-01-24T18:36:11.187

29

I ended up creating a tailwind.config.js file in the sanity folder with the following information. It fixed it.

module.exports = {
  content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}',
],
  theme: {
    extend: {},
  },
  plugins: [],
}

edited Jan 24 '23 at 18:36

answered Dec 14 '22 at 18:42

toadlyfe

411
1
3
7

score 3 · Answer 2 · answered Dec 29 '22 at 08:43

When you create the tailwindcss, Ensure that the content array is not empty, do add the following:

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}',

  ],

  theme: {
    extend: {},
  },
  plugins: [],
}

score 3 · Answer 3 · answered Jan 22 '23 at 10:17

In my case create tailwind.config.js file in the sanity folder and add the code below in that created file

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}',

  ],

  theme: {
    extend: {},
  },
  plugins: [],
}

Punit Kumar Saini · Answer 4 · 2023-02-09T03:41:39.667

3

After moving the tailwind.config.js file into the Sanity folder, Sanity worked, but the front end caused the error. To make it work have two copies of the tailwind CSS file one for the root directory and one inside the Sanity folder.

edited Feb 09 '23 at 03:41

answered Feb 05 '23 at 04:27

Punit Kumar Saini

31
2

score 2 · Answer 5 · edited Jun 27 '23 at 02:08

The solution I came to was to make a postcss.config.js and a tailwind.config.js file within the sanity folder. Many of the solutions only mention one which can sometimes solve your issue, though I found this to be a better solution. Try this then npm run dev or sanity start while in the sanity folder.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [require('tailwind-scrollbar')({ nocompatible: true })],
};

postcss.config.js

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

score 1 · Answer 6 · answered Jan 27 '23 at 16:22

1

I had the same error, changing tailwind.config.js file location to under the "sanity-backend" folder, fixed an error for me.

answered Jan 27 '23 at 16:22

Chris

11
2

score 0 · Answer 7 · edited Feb 21 '23 at 05:07

0

try to run with sanity dev instead of sanity start. If it doesn't work create tailwind.config.js in sanity-folder and add the following code

module.exports = {
    content:[
        './pages/**/*.{js,ts,jsx,tsx}','./components/**/*.{js,ts,jsx,tsx}','./app/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

edited Feb 21 '23 at 05:07

Suraj Rao

29,388
11
94
103

answered Feb 21 '23 at 05:05

Joker38

7
5

score 0 · Answer 8 · edited May 09 '23 at 17:05

0

Create a postcss.config.js file in the sanity folder and add

module.exports = {}

edited May 09 '23 at 17:05

Moritz Ringler

9,772
9
21
34

answered May 07 '23 at 19:48

Hamzah Syed

1
1

score 0 · Answer 9 · edited Jul 21 '23 at 22:50

0

just create a "postcss.config.cjs" file and add module.exports = {}; this should fix your problem.

edited Jul 21 '23 at 22:50

Lajos Arpad

64,414
37
100
175

answered Jul 17 '23 at 15:46

Aliston Gomes

1
1

Aliston Gomes · Answer 10 · 2023-09-01T18:22:49.440

0

in the case of Linux operating systems create a file with .cjs which says common js file. postcss.config.cjs and add module.exports={}

edited Sep 01 '23 at 18:22

answered Sep 01 '23 at 18:21

Aliston Gomes

1
1

Sanity.io [vite] Internal server error: [postcss] Cannot read properties of undefined (reading 'config') error

10 Answers10