Construir Next.JS e tailwindcss

0

Pergunta

Eu uso TailwindCSS e NextJs para o meu aplicativo. Tudo está funcionando quando eu npm run dev mas quando eu npm run build em seguida, npm run start Eu tenho algumas classes que não estão funcionando. Por exemplo, neste código, h-20 / text-white não trabalho, mas outros tailwind classes estão funcionando perfeitamente...

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

Não é o meu 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

Eu não sei se você tem alguma idéia ? Eu segui o vento de cauda docs, mas parece que não é suficiente ahah

Thx

javascript next.js reactjs tailwind-css
2021-11-23 22:50:03
2
0

Se algumas classes não estão funcionando, e outra de trabalho = verifique a sua tailwind.css

Além disso, você tem o exemplo Nextjs - Tailwind

P. S. o Seu código de teste

2021-11-25 11:03:21
0

Eu encontrei a resposta em um outro post e testes Porque eu tenho alguns componentes que são conditionnal de renderização e enquanto a construção do meu app vento a favor não criar as classes

Para resolver isso, você pode :

  • Excluir o expurgo no vento de cauda conf (mas isso deve ser temporário)
  • Criar componentes e declarar todas as classes que você tem que
2021-11-25 10:51:20

Em outros idiomas

Esta página está em outros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................