Rendering: Elements using tailwind.css appear to cause issues in rendering

Answered

Karakachan dog posted this in #help-forum

Karakachan dogOP

2023-06-20T12:53:19.000Z

So, I've tried to create a navigation bar using Typescript, Next.js and tailwind.css. When I run the project, the navigation bar element appears to flicker throughout the screen. You can consult the image attached to get a better overview of the issue. I have attached my code below. Any help would be appreciated.

import Image from 'next/image';

export default function Home() {
  return (
    <nav className='bg-gray-800'>
      <div className='container mx-auto px-4'>
        <h1>Navigation Bar</h1>
      </div>
    </nav>
  
  );
}

Answered by aardani

yeah just remove the rest of the selector, leaving the @tailwind part

View full answer

12 Replies

@Karakachan dog So, I've tried to create a navigation bar using Typescript, Next.js and tailwind.css. When I run the project, the navigation bar element appears to flicker throughout the screen. You can consult the image attached to get a better overview of the issue. I have attached my code below. Any help would be appreciated. `import Image from 'next/image'; export default function Home() { return ( <nav className='bg-gray-800'> <div className='container mx-auto px-4'> <h1>Navigation Bar</h1> </div> </nav> ); }`

aardani

2023-06-20T12:56:34.000Z

the image doesn't flicker.. ?

or did you meant the repeating background?

@aardani the image doesn't flicker.. ?

Karakachan dogOP

2023-06-20T12:57:15.000Z

The repeating background

aardani

2023-06-20T12:57:46.000Z

its from global.css/scss in your root app/pages flder

@aardani its from global.css/scss in your root app/pages flder

Karakachan dogOP

2023-06-20T12:57:57.000Z

How do i fix it?

aardani

2023-06-20T12:58:05.000Z

remove the repeating background in global.css?

Karakachan dogOP

2023-06-20T12:58:41.000Z

So this is my globals.css code:

<@&913086567042674719> base;
<@&913086567042674719> components;
<@&913086567042674719> utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

aardani

2023-06-20T12:59:19.000Z

yeah just remove the rest of the selector, leaving the @tailwind part

Answer

Karakachan dogOP

2023-06-20T12:59:46.000Z

Yes, it has worked! Thanks a lot

Karakachan dogOP

2023-06-20T13:33:09.000Z

@aardani I have another problem if you dont mind to solve it

@Karakachan dog <@194128415954173952> I have another problem if you dont mind to solve it

aardani