0

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?

Harrison Cramer
  • 3,792
  • 9
  • 33
  • 61
  • Didn't really get you about the ESM/CommonJS part. When requiring the config in a JavaScript file, it should be using the default js loader, which has nothing to do with postcss-loader. Are you able to get there by doing something like `require('tailwindcss/resolveConfig')(require('./tailwind.config.js'))`? – Sin Mar 03 '22 at 00:02
  • If you are trying to reference Tailwind CSS config values from Vite, here is an article explaining how: https://lobotuerto.com/notes/import-tailwind-config-in-vite – zenw0lf Sep 17 '22 at 22:06

0 Answers0