问题

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.

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)

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/**'],
    },
  },
})

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

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

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

答案1

得分: 1

tailwindcss 在 v3.3 版本中添加了原生 ESM（和 TypeScript）支持。

在我的情况下，我通过改变导入和导出来迁移了 `tailwind.config.js` ：

**之前：**

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

module.exports = { ... }

之后：

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

export default { ... }

在我的 Vite 代码库中，我可以像这样访问配置值：

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

const { theme } = resolveConfig(tailwindConfig);

theme.colors.gray[500]

<details>
<summary>英文:</summary>

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 &amp; exports: 

**Before:**

```javascript
const colors = require(&#39;tailwindcss/colors&#39;);
const plugin = require(&quot;tailwindcss/plugin&quot;);

module.exports = {&#160;... }

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]