reactjs 来自我的React组件库的Tailwind主题配置未被主应用程序的Tailwind选中

w8f9ii69  于 2023-04-29  发布在  React
关注(0)|答案(1)|浏览(119)

我有一个React组件库和一个NextJS应用程序。他们都使用TailwindCSS。
该应用程序使用库中的组件,并很好地呈现了组件,除了来自tailwind的主题配置。js文件。
我正在使用Nx monorepo,以防它在这里发挥作用,但我非常怀疑它。
我错过了什么?
应用程序的next.config。js:

//@ts-check

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { withNx } = require('@nrwl/next/plugins/with-nx');

/**
 * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: true,
  }
};

module.exports = withNx(nextConfig);

App的顺风。config.js:

module.exports = {
  presets: [
    'libs/moonlight-neon-ui/tailwind.config.js'
  ],
  content: [
    'apps/ac-dcp/**/*.{html,js,jsx,tsx,ts}',
    'libs/moonlight-neon-ui/src/**/*.{html,js,jsx,tsx,ts}'
  ],
  theme: {
    extend: {}
  },
  plugins: [],
}

莉比的顺风config.js:

module.exports = {
  content: [
    'libs/moonlight-neon-ui/src/**/*.{html,js,jsx,tsx,ts}'
  ],
  theme: {
    fontFamily: {
      jost: ['Jost', 'Poppins', 'Verdana', 'sans-serif'],
    },
    extend: {
      colors: {
        'background': '#141414',

        'hlt': '#5f5f5f9e',
        'hlb': '#121212',
        'bgt': '#202227',
        'bgb': '#3b3d43',
        'bght': '#2a2c33',
        'bghb': '#43464d',
        
        'cbg': '#1c1e23',
        'cbgb': '#24262a',

        'glow': '#fbb615bf',

        'p1': '#f26e25',
        'p1h': '#f26e259C',
        'p2': '#fbb615',
        'p2h': '#fbb6159C',
        'pb': '#1a1a1a',
        'pw': '#f3f3f3',

        's1': '#ef3e23',
        's2': '#f37b21',
        'sb': '#231f20',
        'sw': '#fff',

        // 979797 > 500
        // 262626 > 900
      }
    },
  },
  plugins: [],
};
yqkkidmi

yqkkidmi1#

按照the documentation,你需要将预置文件require()到消费者tailwind.config.js中,这样预置就有了配置对象值:

presets: [
  require('libs/moonlight-neon-ui/tailwind.config.js'),
],

请注意,您可能需要调整传递给require()的路径。

相关问题