色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

NextJS順風(fēng)造型出錯(cuò)

CSS
傅智翔2年前8瀏覽0評論

當(dāng)我使用分開的組件時(shí)，結(jié)果看起來很奇怪，就像這樣 獨(dú)立組件代碼:

<>
      <Head>
        <title>Staycation | Home</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <meta name="description" content="We provide what you need to enjoy your holiday with family. House, Villa, Resort booking administration." />
        <meta name="og:title" content="Staycation | Home" />
        <meta name="og:description" content="We provide what you need to enjoy your holiday with family. House, Villa, Resort booking administration." />
      </Head>
      <div className="min-h-screen">
        <NavbarComponent />
        <HeroSection />
        <MostPickedSection />
        <CategoriesSection />
        <TestimonialSection />
        <FooterComponent />
      </div>
    </>

Weird Result

如果我直接把組件放進(jìn)去而不分開，結(jié)果會很好

<Head>
        <title>Staycation | Home</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <meta name="description" content="We provide what you need to enjoy your holiday with family. House, Villa, Resort booking administration." />
        <meta name="og:title" content="Staycation | Home" />
        <meta name="og:description" content="We provide what you need to enjoy your holiday with family. House, Villa, Resort booking administration." />
      </Head>
      <div className="min-h-screen">
        <NavbarComponent />
        <div className="flex flex-col-reverse md:flex-row container-item mt-4 md:mt-16">
          <div className="flex flex-col justify-between flex-1">
            <div className="flex md:block flex-col items-center">
              <h1 className="mt-5 md:mt-0 font-bold text-center md:text-left text-2xl md:text-5xl text-primaryColor" style={{ lineHeight: '170%' }}>
                FORGOT BUSY WORK,
                <br />
                START NEXT VACATION
              </h1>
              <p className="w-4/5 md:w-2/5 mx-auto md:mx-0 mt-2 font-light text-center md:text-left text-xs md:text-base text-greyColor" style={{ lineHeight: '170%' }}>
                We provide what you need to enjoy your holiday with family. Time to make another memorable moments.
              </p>
              <button type="button" className="w-4/5 md:w-1/3 py-4 md:py-4 mt-3 md:mt-8 md:font-medium text-xs md:text-base rounded-md shadow-2xl transition-all duration-75 hover:opacity-80 text-whiteColor bg-secondaryColor">
                Show Me Now
              </button>
            </div>
            <div className="hidden md:flex justify-between items-center w-2/3">
              <HeroItem icon="/icons/Travellers.svg" title="10.203" description="Travellers" />
              <HeroItem icon="/icons/Treasures.svg" title="781" description="Treasures" />
              <HeroItem icon="/icons/Cities.svg" title="1.492" description="Cities" />
            </div>
          </div>
          <div className="flex justify-end flex-1">
            <img src="../images/Hero.png" alt="Hero" className="w-full md:w-4/5 mt-2 md:mt-0" />
          </div>
        </div>
        <MostPickedSection />
        <CategoriesSection />
        <TestimonialSection />
        <FooterComponent />
      </div>

Good Result如果我再次將代碼從非分離的組件更改為分離的組件(在得到好的結(jié)果后)，它將返回到好的結(jié)果 我希望你們能明白我的意思，我對此很困惑

可能有幾個(gè)原因:

您可能需要重啟項(xiàng)目以進(jìn)行編譯。 您可能需要檢查您的順風(fēng)指令是否在styles/globals.css中。 檢查tailwind.config.js文件，查看HeroSection組件是否在contents數(shù)組的指定路徑中。 我也有同樣的問題，這解決了我的問題(我用的是react tho)

將組件擴(kuò)展名從。jsx到。射流研究…

或者

包括。tailwind.config.js中的jsx

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};