I've encountered an issue with my navbar where none of the specified colors are being displayed. The code snippet for the navbar is as follows:
Codes:
'use client'
import Head from 'next/head';
import Link from 'next/link';
import { useState } from 'react';
export default function Home() {
const [navbar, setNavbar] = useState(false);
return (
<div>
...
// Rest of the code goes here
</div>
);
}
Output of the navbar:
https://i.sstatic.net/9gcDL.png
I also attempted to define the button within the navbar but it didn't work either.
<button type="button" style={{backgroundColor: "#FFF"}} > Sample Button
...My package.json:
{
"name": "NextJs",
"version": "0.1.0",
...
// More content in the package.json file
}
tailwind.config.ts:
import type { Config } from 'tailwindcss'
const config: Config = {
...
// Configuration details for tailwindcss
}
export default config
tsconfig.json:
{
...
// Compiler options configuration
}
postcss.config.js:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}