Tailwind's documentation states that you can reference variables inside your Javascript code via the resolveScript plugin. So, for example, the code on the client would look something like this:

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig)

fullConfig.theme.width[4] // => '1rem'

This answer explains how this can be done with Vite (I'm using Webpack). We're processing the Tailwind via the PostCSS Webpack loader, like this:

{
   loader: 'postcss-loader',
   options: {
      postcssOptions: {
        plugins: [
          require('tailwindcss')
        ]
      }
   }
}

This plugin requires that you provide the path to your Tailwind configuration file to import it on the client-side. Still, my tailwind configuration file lives outside my source folder for the client and is written in CommonJS syntax (e.g., I'm exporting it via module.exports). Therefore, attempts to import it as an EcmaScript module will not succeed (we are exporting our configuration using module.exports rather than export default in other words).

Does anyone know the fix for this? For example, is it possible to load a CommonJS tailwind file into the client, or would I have to convert the entirety of my build step process to ESM?