resolveConfig -> Module not found: Can't resolve 'process'

[daniboomerang]

What version of Tailwind CSS are you using?

3.0.23

What build tool (or framework if it abstracts the build tool) are you using?

For example: Next.js 12.1.0

What version of Node.js are you using?

For example: v16.8.0

What browser are you using?

For example: Chrome

What operating system are you using?

For example: macOS

Describe your issue

I'm trying to access to my Tailwind colors using resolveConfig

This is the helper getTailwindTheme that I've created:

import resolveConfig from 'tailwindcss/resolveConfig'
import { TailwindConfig } from 'tailwindcss/tailwind-config'
import { TailwindConfigDefault } from 'tailwindcss/tailwind-config-default'
import tailwindConfig from '../../../tailwind.config.js'

const {
  theme: { colors }
} = resolveConfig(tailwindConfig as unknown as TailwindConfig) as TailwindConfigDefault

const getThemeColors = () => colors

export { getThemeColors }

I get the following error:

./node_modules/@nodelib/fs.scandir/out/constants.js:4:0
Module not found: Can't resolve 'process'

Import trace for requested module:
./node_modules/@nodelib/fs.scandir/out/providers/async.js
./node_modules/@nodelib/fs.scandir/out/index.js
./node_modules/@nodelib/fs.walk/out/settings.js
./node_modules/@nodelib/fs.walk/out/index.js
./node_modules/fast-glob/out/readers/stream.js
./node_modules/fast-glob/out/providers/async.js
./node_modules/fast-glob/out/index.js
./node_modules/tailwindcss/lib/lib/setupTrackingContext.js
./node_modules/tailwindcss/lib/index.js
./tailwind.config.js
./src/lib/utils/getTailwindTheme.ts
./src/ui/components/Icon/Icon.tsx
./src/ui/components/index.ts
./src/web3/WalletConnector/WalletConnector.tsx
./src/ui/layout/components/MobileNavbar.tsx
./src/ui/layout/index.ts
./pages/_app.tsx

My nextjs webpack configuration:

webpack: (config, { isServer }) => {
    if (!isServer) {
      // don't resolve 'fs' module on the client to prevent this error on build --> Error: Can't resolve 'fs'
      config.resolve.fallback = {
        fs: false,
        path: false
      }
    }

    return config
  }

[thecrypticace]

Hey! Could you provide a reproduction repo by chance? Or at the very least all of the requires/imports used in your tailwind.config.js file? I'm looking at the stacktrace and I'm quite confused as to how/why setupTrackingContext.js is listed in there. It seems like there may be a require("tailwindcss") or something similar in your config file which is resulting in calls to node-builtins.

[daniboomerang]

Hello @thecrypticace !
Thanks for your fast answer!

We do use require in tailwind config

plugins: [require('tailwindcss'), require('precss'), require('autoprefixer')]|

Do you think this is the problem? How should we address this?
Thanks!

[thecrypticace]

Hah yep, that would be it! It appears that you are using the plugins array in the tailwind.config.js file for postcss plugins instead of Tailwind CSS plugins. This will indeed not work. Those plugins should be listed in your postcss config which you'd usually put in a postcss.config.js file. It would look something like this:

module.exports = {
  plugins: {
    'tailwindcss': {},
    'precss': {},
    'autoprefixer': {},
  },
}

Some configs may have an array of plugins instead of an object, may use require(…), etc… but that's where those plugins should go. This should, hopefully, resolve your issues.

[daniboomerang]

Amazing @thecrypticace
It works now

I have another question if you don't mind.

How do you type the colors object returned by resolveConfig?

I was expecting it to automatically detect the custom color defined in the tailwing.config.js file

so for instance in my tailwind.config.js I have

colors: {
        haiti: '#140E38',
        valhalla: '#1F174C',
        yellow: '#FFD438',
        nightrider: '#1C0C0C',
        bilobaflower: '#C599F1',
        meteorite: '#2D226E',
        violentviolet: '#3C0A5A',
        electricviolet: '#8D15EA',
        lightpurple: '#9854DB',
        strongpurple: '#340067',
        dodgerblue: '#2E68FF',
        navyblue: '#000E92',
        error: '#ff3503',
        common: '#150E3D',
        premium: '#0063EF',
        rare: '#670EBD',
        legendary: '#F19306',
        exotic: '#fc4967',
        red: '#FE0142'
      }

And I want Typescript to recognise colors['haiti'] but it doesn't

What's the recommended way to use typescript with tailwind.config?

Regards