La documentación de Tailwind establece que puede hacer referencia a variables dentro de su código Javascript a través del complemento resolveScript. Entonces, por ejemplo, el código en el cliente se vería así:

 import resolveConfig from 'tailwindcss/resolveConfig' import tailwindConfig from './tailwind.config.js' const fullConfig = resolveConfig(tailwindConfig) fullConfig.theme.width[4] // => '1rem'

Esta respuesta explica cómo se puede hacer esto con Vite (estoy usando Webpack). Estamos procesando Tailwind a través del cargador PostCSS Webpack, así:

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

Este complemento requiere que proporcione la ruta a su archivo de configuración de Tailwind para importarlo en el lado del cliente. Aún así, mi archivo de configuración de viento de cola se encuentra fuera de mi carpeta de origen para el cliente y está escrito en sintaxis CommonJS (por ejemplo, lo estoy exportando a través module.exports ). Por lo tanto, los intentos de importarlo como un módulo EcmaScript no tendrán éxito (estamos exportando nuestra configuración usando module.exports en lugar de export default en otras palabras).

¿Alguien sabe la solución para esto? Por ejemplo, ¿es posible cargar un archivo Tailwind de CommonJS en el cliente, o tendría que convertir la totalidad de mi proceso de paso de compilación a ESM?