Tailwindcss CSS and fonts are not working on production

user_14394648 0
Viewed 542

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.

tailwind-css next.js
2 Answers

Yes, Moving all the necessary files to /components work. Simple tailwind comes with a 5Mb package. In order to minimize the file size it will remove all the unused CSS in the package in build time. And it will keep CSS included in the folders mentioned in tailwind.config.js. That's what happens in your code. You got two options.

  1. You can move files to /components
  2. Create a dedicated folder and include all the necessary files and then include the folder in tailwind.config.js
user_99389970

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

user_143946480
Related