Construi Next.JS și tailwindcss

0

Problema

Eu folosesc TailwindCSS și NextJs pentru aplicația mea. Totul este de lucru atunci când am npm run dev dar când am npm run build apoi npm run start Am niste clase care nu sunt de lucru. De exemplu, în acest cod, h-20 / text-white nu lucrez dar alte vântului de coadă clase sunt perfect de lucru...

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

Există mea 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

Nu știu dacă aveți orice idei ? Am urmat vântului de coadă docs, dar se pare ca nu e suficient ahah

Thx

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

Dacă unele clase nu sunt de lucru, și un alt lucru = verifica tailwind.css

De asemenea, aveți exemplu Nextjs - a vântului de coadă

P. S. codul de testare

2021-11-25 11:03:21
0

Răspunsul l-am găsit într-un alt post și testarea Pentru că am niște componente care sunt pe conditionnal randare și în timp ce construirea aplicația mea a vântului de coadă nu crea clase

Pentru a rezolva acest lucru, puteți :

  • Șterge epurare din coadă a vântului conf (dar ar trebui să fie temporar)
  • Crea componente și declararea toate clasele trebuie să
2021-11-25 10:51:20

În alte limbi

Această pagină este în alte limbi

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