สร้าง Next.JS และ tailwindcss

0

คำถาม

ฉันใช้ TailwindCSS และ NextJs สำหรับแอ๊ปของฉัน. ทุกอย่างคือทำงานตอนที่ฉัน npm run dev แต่ตอนที่ฉัน npm run build แล้ว npm run start ฉันมีบางอย่าเรียนที่ไม่ได้ทำงานอยู่ สำหรับ exemple เข้ารหัส h-20 / text-white ไม่ได้ทำงานแต่อีก tailwind เรียนดีทำงาน...

<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

ฉันไม่รู้ถ้าคุณต้องมีความคิดอะไรอีกไหม ฉันตาม tailwind docs แต่มันดูเหมือนว่ามันไม่เพียงพอ ahah

Thx

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

ถ้ามีใครบางเรียนไม่ได้ทำงานอื่นทำงาน=เช็คของคุณ tailwind.css

แล้วคุณมีตัวอย่างเช่น Nextjs-Tailwind

พีเอส ของคุณทดสอบรหัส

2021-11-25 11:03:21
0

ฉันเจอคำตอบในอีกตั้งและการทดสอบ เพราะฉันมีส่วนประกอบนั่นอยู่บน conditionnal การแสดงผลและในขณะที่ตึกของแอพ tailwind ไม่สร้างเรียน

จะแก้ไขเรื่องนี้คุณสามารถ:

  • ลบล้างอยู่ใน tailwind conf(แต่มันควรจะเป็นชั่วคราว)
  • สร้างส่วนประกอบและประกาศว่ากองทั้งหมดคุณต้องเรียน
2021-11-25 10:51:20

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

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

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่