我有一个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: [],
};
1条答案
按热度按时间yqkkidmi1#
按照the documentation,你需要将预置文件
require()
到消费者tailwind.config.js
中,这样预置就有了配置对象值:请注意,您可能需要调整传递给
require()
的路径。