When using Next.js, I have found that the global.css file only applies styles successfully when the code is pasted directly into the page.tsx file. However, when attempting to

I recently started exploring nextjs and came across this video
"https://www.youtube.com/watch?v=KzqNLDMSdMc&ab_channel=TheBraveCoders" This is when I realized that the CSS styles were not being applied to HeaderTop (the first component created)

HeaderTop

import React from "react";

import { BsFacebook, BsTwitter, BsInstagram, BsLinkedin } from "react-icons/bs";

const HeaderTop = () => {
  return (
    <div className="border-b border-gray-200 hidden sm:block">
      <div className="container py-4">
        <div className="flex justify-between items-center">
          <div className="hidden lg:flex gap-1">
            <div className="header_top__icon_wrapper">
              <BsFacebook />
            </div>
            <div className="header_top__icon_wrapper">
              <BsTwitter />
            </div>
            <div className="header_top__icon_wrapper">
              <BsInstagram />
            </div>
            <div className="header_top__icon_wrapper">
              <BsLinkedin />
            </div>
          </div>

          <div className="text-gray-500 text-[12px]">
            <b>FREE SHIPPING</b> THIS WEEK ORDER OVER - $55
          </div>

          <div className="flex gap-4">
            <select
              className="text-gray-500 text-[12px] w-[70px]"
              name="currency"
              id="currency"
            >
              <option value="USD $">USD $</option>
              <option value="EUR €">EUR €</option>
              <option value="INR">INR</option>
            </select>

            <select
              className="text-gray-500 text-[12px] w-[80px]"
              name="language"
              id="language"
            >
              <option value="English">English</option>
              <option value="French">French</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  );
};

export default HeaderTop;

localhost:3000/ ] (https://i.sstatic.net/w8uQ9.png)

These are the other files:

layout.tsx

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import HeaderTop from '@/componenets/HeaderTop'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <HeaderTop />
        {children}
      </body>
    </html>
  )
}

page.tsx

import Image from 'next/image'

import HeaderTop from '@/componenets/HeaderTop'
import HeaderMain from '@/componenets/HeaderMain'

export default function Home() {
  return (
    
    <main>
    </main>
  )
}

It works in the video, but starts working only when I copy the code from HeaderTop.tsx to page.tsx

page.tsx (After Edit)

import Image from 'next/image'
import { BsFacebook, BsTwitter, BsInstagram, BsLinkedin } from "react-icons/bs";
import HeaderTop from '@/componenets/HeaderTop'
import HeaderMain from '@/componenets/HeaderMain'

export default function Home() {
  return (
    
    <main>
      <div className="border-b border-gray-200 hidden sm:block">
      <div className="container py-4">
        <div className="flex justify-between items-center">
          <div className="hidden lg:flex gap-1">
            <div className="header_top__icon_wrapper">
              <BsFacebook />
            </div>
            <div className="header_top__icon_wrapper">
              <BsTwitter />
            </div>
            <div className="header_top__icon_wrapper">
              <BsInstagram />
            </div>
            <div className="header_top__icon_wrapper">
              <BsLinkedin />
            </div>
          </div>

          <div className="text-gray-500 text-[12px]">
            <b>FREE SHIPPING</b> THIS WEEK ORDER OVER - $55
          </div>

          <div className="flex gap-4">
            <select
              className="text-gray-500 text-[12px] w-[70px]"
              name="currency"
              id="currency"
            >
              <option value="USD $">USD $</option>
              <option value="EUR €">EUR €</option>
              <option value="INR">INR</option>
            </select>

            <select
              className="text-gray-500 text-[12px] w-[80px]"
              name="language"
              id="language"
            >
              <option value="English">English</option>
              <option value="French">French</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    </main>
  )
}

After making this change, it continues to work fine. I have tested it on different browsers and it remains stable until any modification is made. If I restart, and the code is not present in page.tsx, it fails.

localhost:3000/ https://i.sstatic.net/Sdibf.png

Does anyone have an idea why this is happening and how can it be fixed? Here is the complete project:

https://github.com/AbdulMoqueet/shopping-web-app

I attempted changing browsers to rule out cache issues, but the problem persisted. I resorted to copying the code to page.tsx file, which provided a temporary fix as long as no classes were added.

csstypescriptnext.jstailwind-css

Answer №1

It is likely that the issue lies with your tailwind.config.ts file not being configured properly. Make sure to update the paths in the content section to specify where you want tailwindcss to be applied.

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/modules/**/*.{js,ts,jsx,tsx,mdx}",
  ],
}

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

Challenges arise when trying to load CSS on an EJS page in conjunction with using res.redirect()

When using Express with EJS, my base route is set as follows: router.get("/", productsData.getProducts); The "productsData" is sourced from my controllers page and the code snippet within that page is as follows: exports.getProducts = (req, res, next) => ...

javascriptcssnode.jsexpressejs

Challenged with selecting an item within select2 due to the presence of a lower-down multiple select

Why am I unable to select options 2 & 3 when I open #s1? Instead, when I click on them, the cursor goes into #s2. How can I resolve this issue? I initially considered that it might be related to the z-index, but after attempting to adjust it, the prob ...

htmlcsstwitter-bootstrap-3jquery-select2

Changes will not reflect until a re-deployment is done on Next.js 13 and Sanity

Hey there! Currently, I'm using Next.js version 13 with server components by utilizing the /app directory along with Sanity Studio. Here's a snippet of my code: const Page = async () => { const query = groq`*[_type == "university"] ...

reactjsnext.jsserver-side-renderingsanitynext.js13

Ways to implement pointer event styling within a span element

Hi, I'm having trouble with styling and I can't seem to figure out how to resolve it. The style pointer-events: none doesn't seem to be working for me. Here is an example of my code: The style snippet: .noclick { cursor: default; ...

javascripthtmlcssangular

Why is there a discrepancy between the value displayed in a console.log on keydown and the value assigned to an object?

As I type into a text box and log the keydown event in Chrome, I notice that it has various properties (specifically, I'm interested in accessing KeyboardEvent.code). Console Log Output { altKey: false bubbles: true cancelBubble: false cancelable: t ...

javascripthtmlangulartypescriptgoogle-chrome-devtools

Vertically align the text

Is there a way to center this text vertically within the divs? I've attempted adjusting the position using relative/absolute, and modifying the top and left properties of the paragraph, but none of these methods have been successful. div.roxo{ ...

htmlcssalignment

The RemoveEventListener function seems to be malfunctioning within Angular2 when implemented with TypeScript

I am currently incorporating three.js into Angular2. The code I am using is quite straightforward, as shown below. this.webGLRenderer.domElement.addEventListener('mousedown', ()=>this.onMouseDown(<MouseEvent>event), false); this.webGLR ...

javascriptangulartypescript

What is causing the col-auto with the red border to exceed its available height?

For this code, I've utilized version 5 of Bootstrap. In full screen width, the col-auto with the red border seems to be taking up more space than its content. The yellow border marks the available content space inside. I'm curious about what migh ...

htmlcssbootstrap-5

What is the most effective method for declaring callbacks on objects in Typescript?

I am currently working on a sidebar menu component that is connected to a service holding items in the menu. This allows multiple sources to make alterations to the menu as needed. Each item in the menu currently follows the SidebarItem interface: export ...

javascripttypescriptinterfaceaurelia

Error Encountered when Trying to Utilize Vue Component Getter in TypeScript Mixin (Error Code: TS233

Here is the code snippet that I am currently working with: import {Component, Vue} from 'vue-property-decorator'; @Component({}) export default class MyMixin extends Vue { scrollToTop(): void { let scrollingWrapper: any = (this.$refs[th ...

typescriptvue.jsvue-componentmixins

Access dynamic content from Tinymce 4.x without any manual effort

Is there a way to extract the HTML content from a tinyMCE editor and display it on a page without using the tinyMCE editor itself? I know about the getcontent() function in tinyMCE, but is there another function, parameter, or plugin that can be used to ...

cssclasstinymceextract

The Firebase signInWithPopup functionality suddenly shuts down in a Next.js project

Incorporating the signInWithPopup function for signing in has been successful during the development stage on my local server. const firebaseAuth = getAuth(app); const provider = new GoogleAuthProvider(); const [{ user, cartShow, cartItems }, dispatc ...

javascriptreactjsfirebasenext.jsfirebase-authentication

What could be the reason for not receiving any response from my Firestore query?

Hey there! I'm delving into the world of Firebase for the first time and just set up the Firestore emulator. I've added some data that I want to fetch in my Nextjs app. Once I initialized firebase, this is what my component code looks like: funct ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Tips for bringing in a feature that is available in JavaScript but missing in TypeScript definitions and troubleshooting any resulting errors

Utilizing react-native-keyboard-aware-scroll-view, the library has the following exports in their code: export { listenToKeyboardEvents, KeyboardAwareFlatList, KeyboardAwareSectionList, KeyboardAwareScrollView } However, the index.d.ts file does n ...

reactjstypescriptreact-native

React - The `component` prop you have supplied to ButtonBase is not valid. Please ensure that the children prop is properly displayed within this customized component

I am attempting to use custom SVG icons in place of the default icons from Material UI's Pagination component (V4). However, I keep encountering this console error: Material-UI: The component prop provided to ButtonBase is invalid. Please ensure tha ...

javascriptreactjstypescriptsvgmaterial-ui

Ways to resolve the issue of incompatible parameters 'action' types in JavaScript

I'm encountering a common problem, but I can't figure out why this error is happening. After updating redux, I encountered the following error message: TS2322: Type '(state: ILanguage | undefined, action: PayloadAction<ILanguage>) =&g ...

reactjstypescriptreact-redux

What could be the reason behind my image displaying correctly in the majority of browsers, yet not in Internet Explorer

The HAML code below is what I have: %header .grid %a{:name => "top"} .logo %a{:href => root_path} =image_tag("logo3.png") .tagline .clearfloat %p Fast Facts About Your Website, Your Competitors And Best ...

htmlcssinternet-explorersusy-compass

Angular 7's Singleton Service Feature

My service setup looks like this: export abstract class ILoggingService { // abstract functions here } export class LoggingService implements ILoggingService { // service implementation } export class MockLoggingService implements ILoggingServic ...

angulartypescriptsingleton

Using line breaks in JSX

In my application, I save all the text in a settings.ts file. However, I am facing an issue where \n does not seem to add line breaks as expected. Are there any alternative methods to include breaklines in my text? My tech stack includes Next.js, Reac ...

htmlreactjsnext.jsjsx

File or directory does not exist: ENOENT error occurred while trying to scan 'pages'

Having trouble adding a sitemap to my nextjs app - when I go to http://localhost:3000/sitemap.xml, I get this error: Error: ENOENT: no such file or directory, scandir 'pages' https://i.sstatic.net/cxuvB.png The code in pages/sitemap.xml.js is a ...

javascriptreactjsnext.js