CODEWITHSUNDEEP
reactjsnext.jsmaterial-uitailwind-cssnext.js13
Denis Ivanov
Denis Ivanov

Reputation: 21

Issue with tailwind styles not applying immediately in a nextJs 13 project

I am experiencing an issue where if I reload my page my text font changes and flickers due to css styles applying sequencially. I am using Next Js 13 with Material UI and Tailwind css.

Gif of issue

I am expecting all my tailwind css to load before the page is showed to the user but am unable to do so.

My file structure is as follows

globals.css

@tailwind base;
@tailwind components;
@tailwind 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,
html,
:root {
  height: 100%;
  width: 100%;
}

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

tailwind config

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  important: '#__next',
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}
export default config

layout

import './globals.css'
import type { Metadata } from 'next'


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

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

Page.tsx

import React from 'react';
import StartButton from './components/StartButton';
import { Container, Typography } from '@mui/material';

const Home: React.FC = () => {
  return (
    <Container 
      disableGutters 
      maxWidth={false} 
      className="flex flex-col items-center justify-center h-screen w-full bg-green-800"
    >
      <Typography variant="h1" gutterBottom className="text-6xl text-white mb-4 animate__animated animate__bounce">
        Poker Game
      </Typography>
      <StartButton />
    </Container>
  );
};

export default Home;

startButton.tsx

"use client"
import { useRouter } from 'next/navigation';
import { ButtonBase, Typography } from '@mui/material';
import axios from 'axios';
import React from 'react';

const StartButton: React.FC = () => {
  const router = useRouter();

  const startGame: VoidFunction = async () => {
    try {
      const response = await axios.post('https://your-api.com/start-game');
      const gameId = response.data.gameId;
      router.push(`/game/${gameId}`);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <ButtonBase 
      onClick={startGame}
      className="w-24 h-24 rounded-full flex items-center justify-center transition-transform transform hover:scale-105"
      style={{ backgroundImage: "url('/start-game-chip.png')", backgroundSize: 'cover', backgroundPosition: 'center' }}
    >
      <Typography variant="subtitle1" component="div" className="text-white font-bold">
        Start Game
      </Typography>
    </ButtonBase>
  );
};

export default StartButton;

Upvotes: 2

Views: 472

Answers (1)

Florian Lefebvre
Florian Lefebvre

Reputation: 1

Are you in dev mode ? ("next dev")

Things with loading happen in dev mode that do not happen in production. Try running "next build" and "next start" (or simply "nom run build" and "nom run start" if you've used the CLI). You should see a difference.

Upvotes: 0

Related Questions