Sonra inşa Et.JS ve tailwindcss

0

Soru

Uygulamam için TailwindCSS ve NextJs kullanıyorum. Her şey çalışıyor npm run dev ama ne zaman ben npm run build sonra npm run start Çalışmayan bazı derslerim var. Örneğin, bu kodda, h-20 / text-white işe yaramıyor ama diğer arka rüzgar sınıfları mükemmel çalışıyor...

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

İşte benim konf'lerim :

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

Bir fikrin var mı bilmiyorum ? Tailwind dokümanlarını takip ettim, ama yeterli değil gibi görünüyor ahah

Thxcomment

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

Bazı sınıflar çalışmıyorsa ve başka bir çalışma = sınıfınızı kontrol edin. tailwind.css

Ayrıca, Nextjs - Tailwind örneğiniz var

P. S. Kod testiniz

2021-11-25 11:03:21
0

Cevabı başka bir gönderide buldum ve test ettim Çünkü koşullu render üzerinde olan bazı bileşenlerim var ve uygulamamı oluştururken tailwind sınıfları oluşturmuyor

Bunu çözmek için şunları yapabilirsiniz :

  • Tailwind conf'daki temizlemeyi silin (ancak geçici olmalıdır)
  • Bileşenleri oluşturun ve yapmanız gereken tüm sınıfları bildirin
2021-11-25 10:51:20

Diğer dillerde

Bu sayfa diğer dillerde

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