I'm having trouble with the colors not displaying correctly on my NextJS Tailwind navbar

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: {},
  },
}

Answer №1

bg-gray-800 is not a class that will generate a CSS rule in Tailwind based on your configuration. The reason for this is because gray-800 or gray.800 is not recognized as a color value. This is due to the fact that you have defined colors within theme.colors, which will completely replace any default Tailwind colors used by bg-<color> utilities.

If you intended to supplement the existing color palette without overwriting it, you should consider defining your colors in theme.extend.colors. Here's an example of how you can do that:

const config: Config = {
    // …
    extend: {
      // …
      colors: {
        'blue-foo': '#1fb6ff',     // Represents clean water (avoid overriding `blue.*`)
        'green-foo': '#13ce66',    // Represents freshness and nature (avoid overriding `green.*`)
        'gray-dark': '#273444',    // Neutral color for balance 
        'gray-foo': '#8492a6',     // Lighter gray for a clean look (avoid overriding `gray.*`)
        'gray-light': '#d3dce6',   // Very light gray for purity
      },
    }
  },
  // …
}
export default config

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the significance of the command 'npm install -D sass'?

Recently, I've been delving into the world of using sass with Next.js. After scouring through various documents, I finally stumbled upon a solution that involved running npm install -D sass. While I'm familiar with the fact that npm stands for no ...

Could a complex, intricate clipping path be created using CSS 3?

Here is an example: Can this be achieved using only CSS? I wish to create two divs: A circle without any background or border. A div with a background. I aim to have point 1 clip the background from point 2. This will allow me to rotate the backgroun ...

Link to Reply Comment Feature in Wordpress

It seems like I've tried numerous solutions to fix my issue but haven't had any luck, so now I'm seeking help here. Despite trying methods that have worked for others, they do not seem to work for me. My problem lies with nested comments on ...

Choosing an option from a dropdown menu does not trigger the execution of an AngularJS function through Selenium

Currently, I am attempting to create a Selenium test that involves selecting an item from 2 dropdown menus and then clicking a button. However, I have encountered an issue where the second dropdown menu is populated based on an angularjs call depending on ...

What is the best way to limit a form to only allow 2 checkbox selections?

Seeking advice on implementing a form for a website giveaway featuring 3 prizes. Each participant should only be able to select 2 items from the list. I've already created a JavaScript-based form, but I'm concerned about its reliability since it ...

how to set up automatic login for a user after changing their password using passport-local-mongoose

Trying to automatically log in a user, but encountering an issue with the current 'update' function that looks like this exports.update = async (req, res) => { const user = await User.findOne({ resetPasswordToken: req.params.token, re ...

What is the best way to reset an angularJS form after it has been submitted

I am trying to figure out a way to clear form fields on a modal window after the user executes the save method. I have attempted using $setPristine in AngularJS, but it's not working as expected. Any suggestions on how to achieve this task? Here is t ...

A guide to correctly importing a Json File into Three.js

I've been working on some cool projects in Blender and wanted to showcase one using threejs. However, I'm facing an issue where the object isn't displaying properly. Can someone guide me on how to correctly load a JSON file with keyframe ani ...

I am unable to utilize the "create-react-app" command due to an issue with npm being unable to locate a specific file

No matter what I try, I just can't seem to get create-react-app to run. I attempted uninstalling node, reinstalling it, using yarn, cleaning the cache, and even creating with "npm init ..." but nothing seems to work. Microsoft Windows [version 10.0.19 ...

Generate a fresh array using the information extracted from a JSON file

I need assistance in extracting a new array from JSON data. The desired output should be an array containing "itog" values. [12860498,20156554,19187309] [ { "0": { "itog": 12860498, "return": ...

Using React-Router-Native to send an image as a parameter

I am encountering an issue while attempting to pass an image as a parameter in react-router-native and retrieve the data from location.state. Typically, I use the following code to display an image: import Icon from '../image/icon.png'; <Vie ...

Ensure that when a user clicks back on an image popup, the page stays in its current position

Is there a way to ensure that after closing a popup image, the browser returns to the same position where it was before? Currently, when I close the popup image, the page scrolls back to the top (as indicated by the red square in the example). However, I ...

Using the Fetch API in React to send a CSRF token to Django server

Currently, I am working on sending the csrf token that was generated Here is how the csrftoken generation occurs: const [cr , setCR] = useState('') const getcsrf = async () => { await fetch('http://localhost:8000/auth/gett ...

Discovering the most efficient route on a looped set of items

My question may not be fully comprehensible, but essentially it involves the following scenario: I have created an interactive presentation that displays static images in a sequence to generate an animation. By clicking the Play button, the animation prog ...

Incorporating a sidemenu into a DOM using Ionic2 and Angular2 Typescript

I am currently struggling to properly integrate the sidemenu from the app.ts file. app.html: <ion-menu [content]="content"></ion-menu> <ion-nav id="nav" [root]="rootPage" #content ></ion-nav> app.ts import {App, IonicApp,Page, ...

Ways to send properties using Links?

When attempting to pass the chart props through the Link react-router, I initially tried to do so via the route. However, this did not yield the expected result as each data has its own unique array number. Consequently, I determined that passing it throug ...

Implementing bi-directional data binding between sibling components in Vue.js

Is it possible to create a dual binding scenario with the typeahead plugin https://github.com/pespantelis/vue-typeahead, where the search terms of two typeaheads are linked? This means that regardless of which search box the user types into, both should ...

Switch the class on a specific div section

As you scroll to the top, a class named "blue" is added to the element with the ID of "div". However, when the scroll returns to the bottom, the "blue" class remains without being removed. Fiddle Link: http://jsfiddle.net/5d922roc $(window).scroll(fu ...

What steps should I follow to incorporate Mathjax into my Next.js application for rendering inline and displaying equations in Latex?

I am looking to implement Mathjax in my nextjs application. My nextjs version is 13 and I am using the app directory for routing. I want my code to be rendered on the server so that there is no need to rerender when a user opens the page. I have tried read ...

Combine multiple SCSS files located in various directories into a single CSS file by using NPM

In my project, there are SCSS files stored in a "static" directory. Additionally, I have application components located in a separate directory, each containing its own SCSS file. I am seeking a way to compile all of these SCSS files into a single .css fi ...