Styling does not seem to apply to inner components in NEXTJS

I am attempting to create a ChatGPT replica using Next.js and Tailwind CSS. My focus is currently on the main chat screen, where each message is displayed using a separate Message component with its own styling. However, I am facing an issue where the styling for the Message component is not being applied at all despite trying various solutions.

chatpage.js

import Head from 'next/head';
import { ChatSidebar } from '@/components /ChatSidebar';
import { useState } from 'react';
import { streamReader } from 'openai-edge-stream';
import { v4 as uuid } from 'uuid';
import { Message } from '@/components /Message';

export default function Home() {
  const [incomingMessage, setIncomingMessage] = useState('');
  const [messageText, setMessageText] = useState('');
  const [newChatMessages, setNewChatMessages] = useState([]);

  const handleSubmit = async e => {
    e.preventDefault();
    setNewChatMessages(prev => {
      const newChatMessages = [
        ...prev,
        {
          _id: uuid(),
          role: 'user',
          content: messageText,
        },
      ];
      return newChatMessages;
    });
    console.log(messageText);
    const response = await fetch('/api/chat/sendMessage', {
      method: 'POST',
      headers: {
        'content-type': 'application/json',
      },
      body: JSON.stringify({ message: messageText }),
    });
    const data = response.body;

    if (!data) {
      return;
    }

    const reader = data.getReader();
    await streamReader(reader, async message => {
      console.log('Message: ', message);
      setIncomingMessage(s => `${s}${message.content}`);
    });
  };
  return (
    <>
      <Head>
        <title>New Chat</title>
      </Head>
      <div className="grid h-screen grid-cols-[260px_1fr]">
        <ChatSidebar />
        <div className="flex flex-col bg-gray-700">
          <div className="flex-1 text-white">
            {newChatMessages.map(message => (
              <Message
                key={message._id}
                role={message.role}
                content={message.content}
              />
            ))}
            {!!incomingMessage && (
              <Message role="assistant" content={incomingMessage} />
            )}
          </div>
          <footer className="bg-gray-800 p-8">
            <form onSubmit={handleSubmit}>
              <fieldset className="flex gap-2">
                <textarea
                  value={messageText}
                  onChange={e => setMessageText(e.target.value)}
                  placeholder="Send a message..."
                  className="w-full resize-none rounded-md bg-gray-700 px-5 py-1 text-white"
                ></textarea>
                <button className="btn" type="submit">
                  Send
                </button>
              </fieldset>
            </form>
          </footer>
        </div>
      </div>
    </>
  );
}

message component js

import { useUser } from '@auth0/nextjs-auth0/client';
import Image from 'next/image';
export const Message = ({ role, content }) => {
  const { user } = useUser();
  return (
    <div
      className={`grid grid-cols-[30px_1fr] gap-5 p-5${
        role === 'assistant' ? ' bg-gray-600' : ''
      }`}
    >
      <div>
        {role === 'user' && !!user && (
          <Image
            src={user.picture}
            width={30}
            height={30}
            alt="User profile picture"
            className="rounded-sm shadow-md shadow-black/50"
          />
        )}
        {role === 'assistant' && <div>avatar</div>}
      </div>
      <div>{content}</div>
    </div>
  );
};

I am determined to resolve the issue with the Message component's styling.

Answer №1

After discovering the error, it turned out that there was an extra trailing whitespace in my components folder that wasn't present in tailwind.config.js. I simply removed the whitespace from the folder name and everything started working correctly. Lesson learned: pay attention to naming conventions in your nextjs tailwind projects.

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

Adjust background image size to fit the dimensions of the foreground content

I have a div where an image and content are inside. I am trying to make the background image adjust its size based on the content within it, rather than showing the full image size with empty space. My current styling uses flexbox: .section { height: ...

Programmatically setting focus in Ionic

In my Ionic and Angular component, I am attempting to programmatically set focus after the page has loaded. Here is the code: item.component.html: <ion-row> <ion-col col-5> <ion-item > <ion-label&g ...

The left side of my image doesn't quite reach the edges of the screen as desired

Even after setting the padding and margin in the parent container to 0, the image is still not filling to the edges. Here is the image. This snippet of code shows my JavaScript file: import styles from './css/Home.module.css'; export default fun ...

Tips for automatically increasing row ID when adding a new row in MUI Data Grid

Trying to populate rows in my Data Grid component from MUI Kit without having to handle unnecessary unique ids. I attempted increasing the id number based on rows.length, but I consistently get 0 for some unknown reason. This is the code snippet: const ...

Using Rails to reference an image in CSS

My application on Heroku, built with Rails, features a striking image as the background on the landing page. Since Heroku's file system is read-only, I made the decision to store these images (selected randomly) on AWS S3. In my .css(.scss) code, the ...

Count of elements in one flexbox row

Having a flexbox container with multiple items in row-wrap format, is there a way to use JavaScript to determine the number of items in each row? Essentially, finding out at what point they wrap. For instance- <div class="container"> <div clas ...

Unable to send messages through contact form - Issue with HTML/CSS

I had successfully achieved the desired outcome before, but now I am facing difficulties replicating it. The linked image displays my intended result versus what is currently happening. https://i.stack.imgur.com/QUCuN.png What could be causing this issue ...

What is preventing me from creating accurate drawings on canvas?

I'm currently working on a paint application and facing an issue. When I place the painting board on the left side of the screen, everything works fine and I can draw without any problems. However, when I move it to the right side of the screen, the m ...

Issues arise when attempting to alter the background image using jQuery without browserSync being activated

I am facing an issue with my slider that uses background-images and BrowserSync. The slider works fine when BrowserSync is running, but without it, the animations work properly but the .slide background image does not appear at all. Can someone help me ide ...

Preventing the dropdown options from appearing in Angular when clearing the input field

In a reusable component, I implemented some simple logic to clear the value of a select input when the 'x' button is clicked. select.component.ts @Input() selectFormControlName: string; @Input() selectAbstractControl: AbstractControl; ... ...

Using Prisma and NextJS to define entity types with 1-1 Self-Relation and establishing a 1-1 relationship with another entity type

I am currently working on building a model that involves a 1-1 self-relation and a 1-1 relation with another entity. Below is the code snippet representing the model: model Client { id String @id @default(uuid()) name String country String ...

Leveraging the ng-hide property of one controller to adjust the ng-style attribute of another controller through a centralized global controller

Seeking assistance with accessing the boolean value of ng-hide from one controller in order to alter CSS properties of another controller utilizing a global controller. Here is the jsfiddle link: https://jsfiddle.net/dqmtLxnt/ HTML <div ng-controller= ...

On the first load, Next.js retrieves a token from an API and saves it for later use

Currently working on an application with next.js, the challenge lies in retrieving a guest token from an API and storing it in a cookie for use throughout the entire application. My goal is to have this token set in the cookie before any page is loaded. H ...

Show one line of text at a time with a pause in between each one

On my HTML page, I am looking to showcase text lines in succession with a delay. The unique condition is that when the second line appears, the color of the first line should change. Then, as the third line emerges, the color of the second line should also ...

Enhance your Material UI Button with Advanced Text Alignment Options for Compact Screens

As a beginner in React and Material-UI, I'm attempting to customize a set of buttons within my app bar with background images for a cleaner look. Drawing inspiration from various online examples, I've managed to style them to my liking on larger ...

Animation does not trigger before switching pages

I'm attempting to create an animation that occurs before the page transitions. After finding a jQuery script on this site and tweaking it to match my HTML, I realized the code works in a fiddle but not on my actual page. Any assistance would be greatl ...

The Vercel error indicates that the file or directory '/var/task/node_modules/shiki/themes/one-dark-pro.json' does not exist

import { serialize } from 'next-mdx-remote/serialize'; import readingTime from 'reading-time'; import remarkGfm from 'remark-gfm'; import rehypeSlug from 'rehype-slug'; import rehypeAutolinkHeadings from 'rehype ...

Launching a Turborepo Next.js Application on Azure Static Web App

Currently, I am trying to deploy a Next.js site within a Turborepo monorepo onto an Azure Static Web App using GitHub actions and a custom build step. The Next.js site is set up to use a standalone output with standard configurations. However, the deployme ...

Utilizing hover effects and timeouts to conditionally show React components

I encountered a challenging React layout dilemma. It's not a complex issue, but rather difficult to articulate, so I made an effort to be as clear as possible. The data I have maps individual components in the following way: map => <TableRow na ...

What are effective ways to eliminate script tags from a webpage?

I have implemented tags on my website that users can use to interact with the site. My goal is to figure out how to make the browser only read text from a specific file I write, without any HTML. This should be restricted to certain sections of my websit ...