Tailwindcss CSS and fonts are not working on production

Question

I am using NextJS and TailwindCSS. For deployment i am using vercel. CSS and fonts are working if I use them directly in index.js file. CSS and fonts are not working if I use different component and import them in index.js file. But they are working fine on localhost. I dont really understand what I am doing wrong here. Here's my code.

// index.js 
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import NameList  from "../designs/NameList"

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


// NameList.js
const NameList = () => {
  return (
    <div>
      <div className="border-gray-400 border-2">
        <h5 className="max-w-md mb-2 text-3xl font-heading font-extrabold leading-none sm:text-4xl">
          <div className="flex">Name</div>
        </h5>
      </div>
    </div>
  )
}

export default NameList

If i return NameList divs in Home, everything is working perfectly on both local and production.

Answer 1

I moved my NameList.js file into /components folder. And everything is working as expected.