构建 Next.JS 和 tailwindcss

Posted 2023-03-07

技术标签:

【中文标题】构建 Next.JS 和 tailwindcss【英文标题】：Build Next.JS and tailwindcss 【发布时间】：2022-01-02 09:54:12 【问题描述】：

我在我的应用程序中使用 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

不知道大家有没有什么想法？我关注了顺风文档，但看起来还不够啊啊啊

谢谢

【问题讨论】：

【参考方案1】：

我在另一个帖子和测试中找到了答案因为我有一些在条件渲染上的组件，并且在构建我的应用顺风时不要创建类

要解决这个问题，您可以：

删除顺风配置中的清除（但它应该是临时的）创建组件并声明你必须的所有类

【讨论】：

【参考方案2】：

如果某些课程不工作，而另一个工作 = 检查您的 tailwind.css

另外，你有例子Nextjs - Tailwind

附： Your code test