CSS and fonts are not working on NextJS production #3627

indahud · 2021-02-21T09:01:01Z

indahud
Feb 21, 2021

I am using TailwindCSS in my NextJS project and I am using vercel for deployment. I followed TailwindCSS official website guide for installation. However there is one weird issue I am going through.

CSS and fonts are not working on production if I use seprate component. But they work locally.
If I return NameList divs directly in Home function, everything is working perfectly on both locally and on production. Any ideas what is wrong here??

// index.js File
import NameList  from "../designs/NameList"

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


// NameList.js File
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

Ophelia2 · 2021-02-26T04:50:43Z

Ophelia2
Feb 26, 2021

This is what I usually do: UPSers

Put the fonts in public/static somewhere

In the same folder as the fonts put a CSS file where the fonts are declared

CSS file example /public/fonts/style.css:

@font-face {
font-family: 'Italian No1';
src: url('ItalianNo1-Black.eot');
src: url('ItalianNo1-Black.eot?#iefix') format('embedded-opentype'), url('ItalianNo1-Black.woff2') format('woff2'), url('ItalianNo1-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
}
Import this css in _document.js (docs):

render() {
return (

        <body>
            <Main/>
            <NextScript/>
        </body>
    </Html>
)

}

0 replies

simonswiss · 2021-03-01T05:11:00Z

simonswiss
Mar 1, 2021

Hi @indahud 👋

I'd need to see more of the code to help, but my bet is that you have the purge template paths set incorrectly in your Tailwind config.

Are you able to share your setup (or a minimal reproduction) in a GitHub repo?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

CSS and fonts are not working on NextJS production #3627

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

CSS and fonts are not working on NextJS production #3627

Uh oh!

indahud Feb 21, 2021

Replies: 2 comments

Uh oh!

Uh oh!

Ophelia2 Feb 26, 2021

Uh oh!

simonswiss Mar 1, 2021

indahud
Feb 21, 2021

Ophelia2
Feb 26, 2021

simonswiss
Mar 1, 2021