Having an issue with applying a bg tailwind class to style an element using an API. The class text is added to the classlists of my element but the style doesn't apply. Below are the relevant code snippets:
//_app.js component
import "../index.css";
import Navigation from "../components/Navigation/Navigation";
import navItems from "../data/NavItems.json";
function MyApp({ Component, pageProps, datas }) {
console.log(datas);
return (
<>
<Navigation items={navItems} bg={datas[0]} />
<Component {...pageProps} />
</>
);
}
MyApp.getInitialProps = async () => {
const datas = await fetch(
"https://*.co/rest/v1/colors?select=color",
{
headers: {
apikey:"*",
Authorization:
"*",
},
}
)
.then((datas) => datas.json())
.then((value) => value);
return { datas };
};
export default MyApp;
Usage of the class in the navigation component:
//Navigation component
import NavItems from "./NavItems";
import SearchBar from "./SearchBar";
const Navigation = ({ items, bg }) => {
return (
<nav className={`left-0 right-0 h-[80px] fixed shadow-[0px_4px_14px_rgba(0,0,0,0.08)] flex justify-between items-center p-[10px] ${bg.color}`}>
<SearchBar />
<NavItems items={items} />
</nav>
);
};
export default Navigation;
Any suggestions on how to resolve this issue?
Note: The bg colors from the API can be dynamic and not specific. Adding these colors to tailwind.config.js may not be helpful.