如何在Qwik组件中导入Tailwind配置值？

问题原因 #

你的tailwind.config.js使用了CommonJS规范（require/module.exports），但Qwik项目基于ES模块环境运行，浏览器中不存在Node.js的require全局函数，直接导入会触发报错。

解决方案 #

方案一：将Tailwind配置转为ES模块格式

修改tailwind.config.js，改用ES模块的import和export语法，同时保留Tailwind所需的完整配置：

// tailwind.config.js
import defaultTheme from 'tailwindcss/defaultTheme';

const { sm, md, lg, xl } = defaultTheme.screens;

// 导出断点数值
export const sm = parseInt(sm.replace('px', ''), 10);
export const md = parseInt(md.replace('px', ''), 10);
export const lg = parseInt(lg.replace('px', ''), 10);
export const xl = parseInt(xl.replace('px', ''), 10);

// 导出Tailwind核心配置（必须保留，否则Tailwind无法正常工作）
export default {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

在Qwik组件中导入：

import { sm, md, lg, xl } from '../../tailwind.config.js';

注意：确保项目根目录的package.json中包含"type": "module"，这样Node.js会将.js文件识别为ES模块。

方案二：创建独立的断点配置文件

如果不想修改原Tailwind配置文件，可以新建一个单独的工具文件（比如src/utils/breakpoints.js）：

// src/utils/breakpoints.js
import defaultTheme from 'tailwindcss/defaultTheme';

const { sm, md, lg, xl } = defaultTheme.screens;

export const sm = parseInt(sm.replace('px', ''), 10);
export const md = parseInt(md.replace('px', ''), 10);
export const lg = parseInt(lg.replace('px', ''), 10);
export const xl = parseInt(xl.replace('px', ''), 10);

在Qwik组件中导入该工具文件：

import { sm, md, lg, xl } from '../utils/breakpoints.js';

内容的提问来源于stack exchange，提问作者Mohammad Miras