Question

我正在使用 NextJS 和 TailwindCSS。对于部署，我正在使用 vercel。如果我直接在 index.js 文件中使用 CSS 和字体，则它们可以正常工作。如果我使用不同的组件并将它们导入 index.js 文件，CSS 和字体将不起作用。但它们在 localhost 上运行良好。我真的不明白我在这里做错了什么。这是我的代码。

// 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

如果我在 Home 中返回 NameList 个 div，则本地和生产环境中的一切都运行良好。

Answer 1

我将 NameList.js 文件移动到 /components 文件夹中。一切都按预期进行。

Tailwindcss CSS 和字体不适用于生产

1 个答案: