構建 Next.JS 和 tailwindcss

Question

我將 TailwindCSS 和 NextJs 用於我的應用程序。 當我npm run dev時一切正常，但是當我npm run build然后npm run start ，我有一些類不工作。 例如，在此代碼中， h-20 / text-white不起作用，但其他順風類都可以正常工作......

<div class="flex text-white font-semibold cursor-pointer">
<div class="flex-1 h-20 center-hv text-center bg-blue-primary hover:bg-blue-hover button-shadow">
    <div>
        <div>Acheter 200 €</div>
    </div>
</div> 
</div>

有我的confs：

//next.config.js

module.exports = {
    images: {
      domains: ["picsum.photos"],
    },
    env: {
      customKey: 'my-value',
    }
  }

//postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

//tailwind.css

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundColor: theme => ({
        ...theme('colors'),
        'blue-primary': '#A9C4D2',
        'blue-secondary': '#bbd9e8',
        'blue-hover': '#74afcd',
        'alert-info': '#d5e9f3',
        'alert-warning': '#ffd585',
        'alert-danger': '#ffb3b3'
      }),
      textColor: theme => ({
        ...theme('colors'),
        'blue-primary': '#A9C4D2',
        'blue-secondary': '#bbd9e8',
        'blue-hover': '#74afcd',
        'alert-info': '#d5e9f3',
        'alert-warning': '#ffd585',
        'alert-danger': '#ffb3b3'
      }),
    },
    flex: {
      '1': '1 1 0%',
      '2': '2 2 0%',
      '3': '3 3 0%',
      '4': '4 4 0%',
      '5': '5 5 0%',
      auto: '1 1 auto',
      initial: '0 1 auto',
      inherit: 'inherit',
      none: 'none',
    }
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

//jsconfig.json

{
    "typeAcquisition": {
        "include": ["jest"]
    }
}

//_app.js

import Navigation from '../componsants/navigation/Navigation'
import '../styles/globals.css'
import 'tailwindcss/tailwind.css'

function MyApp({ Component, pageProps }) {

  return (
    <>
      <div className="mtb">
        <Navigation />
        <Component {...pageProps} />
      </div>
    </>
  )
}

export default MyApp

不知道大家有沒有想法？ 我關注了順風文檔，但看起來還不夠啊啊啊

謝謝

Answer 1

如果某些課程不工作，而另一個工作 = 檢查你的tailwind.css

此外，您還有Nextjs - Tailwind示例

PS你的代碼測試

Answer 2

我在另一篇文章和測試中找到了答案因為我有一些組件在條件渲染中並且在構建我的應用順風時不要創建類

要解決此問題，您可以：

• 刪除tailwind conf中的清除（但它應該是臨時的）
• 創建組件並聲明你必須的所有類