Currently, I am working on a Next.js project utilizing Tailwind CSS. During the build process, I load in a default configuration, but I also need to wait for an API response to retrieve custom styles from an endpoint.
Below is my current setup, but it seems like I might be approaching this the wrong way as I am encountering webpack errors:
Error: Cannot find module './services/getThemeStyles'
// ./tailwind.config.js
// Default styles
const theme = require('./lib/themes/default/tailwind/tailwind.config');
// Website custom styles
const custom = require('./services/getThemeStyles');
module.exports = {
...theme, // Deep merge of theme and custom
content: ['./lib/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
};
// ./services/getThemeStyles.ts
// Fake temporary endpoint; would fetch data from an API when live.
const theme = require('/data/theme');
export default async function getThemeStyles(): Promise<any> {
return new Promise((resolve) => {
setTimeout(() => {
resolve(theme);
}, 1);
});
}
// ./data/theme.ts
const Theme = {
extend: {
colors: {
'banner-background': 'rgb(220,220,0)'
}
}
}
export default Theme;
Has anyone encountered this issue before or can provide assistance?
Edit
I have revised my approach by setting up a Node server to make data retrieval more authentic. As a result, my tailwind.config.js now appears as follows:
const fetch = require('node-fetch');
const merge = require('merge-deep');
module.exports = (async function() {
let theme = require('./lib/themes/default/tailwind/tailwind.config');
const response = await fetch('http://localhost:5000/data');
const data = await response.json();
return {
...merge(theme, data),
content: ['./lib/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
}
})();
However, I am facing an issue where I cannot use await before fetch because it is not within an async function, causing the module to be exported before the request is completed.