"default" is not exported by "tailwind.config.js"

Question

I want to use a theme variable for Tailwind inside the Nuxt code for Storybook. Everything looks fine in development but when I build Storybook, I get an error "default" is not exported by "tailwind.config.js".

I tried to follow what is written here but I still get errors. Could anybody help me with a good solution for this?

vite.config.js

import path from 'node:path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'tailwind.config.js': path.resolve(__dirname, 'tailwind.config.js'),
    },
  },
  optimizeDeps: {
    include: [
      'tailwind.config.js',
    ],
  },
  build: {
    commonjsOptions: {
      include: ['tailwind.config.js', 'node_modules/**'],
    },
  },
})

tailwind.config.js

// /** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      mobileS: '320px',
      mobileM: '375px',
      mobileL: '425px',
      tablet: '500px',
    },
  },
}

inside the component

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

const screens = resolveConfig(tailwindConfig).theme?.screens
console.log(screens)

Answer 1

tailwindcss added native ESM (and TypeScript) support in v3.3.

https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-type-script-support.

In my case, I migrated the tailwind.config.js by changing imports & exports:

Before:

const colors = require('tailwindcss/colors');
const plugin = require("tailwindcss/plugin");

module.exports = { ... }

After:

import colors from "tailwindcss/colors";
import plugin from "tailwindcss/plugin";

export default { ... }

within my vite codebase, I was then able to access config values like this

import resolveConfig from "tailwindcss/resolveConfig";

import tailwindConfig from "../../tailwind.config.js";

const { theme } = resolveConfig(tailwindConfig);

theme.colors.gray[500]