LEsson15:My tailwindcss classes are not working

[ritesh798]

Header element not getting horizontal in a row and also the font is not the same as shown in video. i have applied all the classes as taught in lesson

Header.js

import { ConnectButton } from "web3uikit"
import Link from "next/link"

export default function () {
    return (
        <nav>
            <h1 className="py-4 px-4 font-bold text-3xl">NFT Marketplace</h1>
            <div className="flex flex-row items-center">
                <Link href="/">
                    <a className="mr-4 p-6 ">NFT Marketplace</a>
                </Link>
                <Link href="/sell-nft">
                    <a className="mr-4 p-6">SELL NFT</a>
                </Link>
                <ConnectButton moralisAuth={false} />
            </div>
        </nav>
    )
}

tailwind.config.css

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{html,js}"],
    theme: {
        extend: {},
    },
    plugins: [],
}

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

App.js

import "../styles/globals.css"
import { MoralisProvider } from "react-moralis"
import Header from "../components/Header"

function MyApp({ Component, pageProps }) {
    return (
        <MoralisProvider initializeOnMount={false}>
            <Header />
            <Component {...pageProps} />
        </MoralisProvider>
    )
}

export default MyApp

[ritesh798]

@alymurtazamemon can you help me with this

[Marklin2289]

you should go to tailwindcss/nextjs docs to check on taiwind.config.js setup.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}