Creación del layout principal e integración de los Page Components

Les dejo el código de los archivos:
.
MainLayout

import Header from "@components/Header";
import Nav from "@common/Nav";

export default function MainLayout({children}) {
    return(
        <>
        <div className="min-h-full">
            <Header/>
            <Nav />
            <main>
                <div className="max-w-7xl mx-auto py-6 sm:px-6">
                    {children}
                </div>
            </main>
        </div>
        </>
    )
};

.
jsconfig lo configure de la siguiente manera:

{
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
            "@styles/*": [
                "styles/*"
            ],
            "@pages/*": [
                "pages/*"
            ],
            "@common/*": [
                "pages/common/*"
            ],
            "@components/*": [
                "pages/components/*"
            ],
            "@layout/*": [
                "pages/layout/*"
            ],
            "@assets/*": [
                "assets/*"
            ],
        }
    }
}

.
Y finalmente _app.js

import '@styles/tailwind.css'
import MainLayout from '@layout/MainLayout'

function MyApp({ Component, pageProps }) {
  return(
    <>
    <MainLayout>
      <Component {...pageProps} />
    </MainLayout>
    </>
  )
}

export default MyApp

Si les aparece el header en blanco:

Necesitan agregar “jsx” al “content” del archivo “tailwind.config.js”:

const colors = require('tailwindcss/colors');

module.exports = {
  content: ['./src/**/*{html,js,jsx}'],
  theme: {
    colors: {
      ...colors,
    },
  },
};

Resultado:

Nunca menciono lo del API

TAILWIND_MODE=watch
NEXT_PUBLIC_API_URL=https://api.escuelajs.co
NEXT_PUBLIC_API_VERSION=v1

adjunto .env

Aqui hay algunas recomendaciones a la hora de agregar paths a nuestro archivo de configuraciones de tailwind.