Construire Next.JS et tailwindcss

0

La question

J'utilise TailwindCSS et NextJs pour mon application. Tout fonctionne quand je npm run dev mais quand je npm run build alors npm run start J'ai certaines classes qui ne sont pas de travail. Par exemple dans ce code, h-20 / text-white ne pas travailler, mais d'autres tailwind classes sont parfaitement de travail...

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

Il y a mes 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

Je ne sais pas si vous avez des idées ? J'ai suivi tailwind docs, mais on dirait qu'il n'est pas assez ahah

Thx

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

Si certaines classes ne sont pas de travail, et une autre de travail = vérifier votre tailwind.css

Aussi, vous avez l'exemple Nextjs - Tailwind

P. S. Votre code de test

2021-11-25 11:03:21
0

J'ai trouvé la réponse dans un autre post et de test Parce que j'ai des composants qui se trouvent sur conditionnal rendu et lors de la construction de mon application tailwind ne pas créer les classes

Pour résoudre ce problème, vous pouvez :

  • Supprimer la purge en tailwind conf (mais il devrait être temporaire)
  • Créer des composants et de déclarer toutes les classes, vous devez
2021-11-25 10:51:20

Dans d'autres langues

Cette page est dans d'autres langues

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