Next.JS 中的 TailwindCSS 无法在 Webkit 中正确呈现

Question

我在带有 postcss 和自动前缀的 Next.JS 项目中使用 TailwindCSS。这里的问题是它在桌面和 Chrome Android 和 Firefox 中呈现良好。在 iOS 中，尽管在 Safari 和 chrome 中，UI 都搞砸了。

我尝试了很多自动前缀配置。 None 他们成功了。这个问题只存在于 webkit 中。我想可能是因为 flex，但同一页面上的其他 flex 工作正常。

这是重现错误的最小回购协议。

https://github.com/RohithCIS/tailwind-nextjs-webkit-issue

我附上了下面的图片。这是我的配置，感谢您的帮助。

// postcss.config.js
module.exports = {
    plugins: [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer')
    ]
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      borderRadius: {
        'xl': '30px'
      },
      colors: {
        grapefruit: '#da4453',
        bittersweet: '#e9573f',
        bluejeans: '#4a89dc',
        lavander: '#967adc',
        sunflower: '#f6bb42',
        grass: '#8cc152',
        pinkrose: '#d770ad',
        lightgray: '#e6e8ed',
        mint: '#37bc9b',
        aqua: '#3bafda',
        mediumgray: '#aab2bd',
        darkgray: '#434a54'
      }
    },
  },
  variants: {},
  plugins: []
}

// next.config.js
const withSass = require('@zeit/next-sass');

module.exports = withSass({});

<section className="flex flex-col items-center lg:mt-5">
    <div className="max-w-1200">
      <div className="flex flex-col lg:flex-row justify-between lg:p-3 w-full">
        {/* PREVIEW PANE */}
        <div style={{ flexBasis: 0, flexGrow: 3 }}>

          <CarouselProvider
            naturalSlideWidth={1}
            naturalSlideHeight={1}
            totalSlides={3}
            className="flex flex-col-reverse lg:flex-row"
          >
            <div className="flex flex-row lg:flex-col p-3 lg:p-0">
              <Dot slide={0} className="thumb-preview border border-gray-300 hover:border-pinkrose rounded lg:mb-3 mr-3 lg:mr-0">
                <img className="rounded object-cover h-full w-full" src="https://images.cbazaar.com/images/stones-embellished-royal-blue-saree-sadsfcns2198-u.jpg"></img>
              </Dot>
              <Dot slide={1} className="thumb-preview border border-gray-300 hover:border-pinkrose rounded lg:mb-3 mr-3 lg:mr-0">
                <img className="rounded object-cover h-full w-full" src="https://www.jivaana.com/cache/9d/90/rose-red-saree-and-blush-pink-crop-top_saree_red-baby-pink_151186283056-9d90b1cb5f0ccd4306a0ba39058f8571.jpg"></img>
              </Dot>
              <Dot slide={2} className="thumb-preview border border-gray-300 hover:border-pinkrose rounded lg:mb-3 mr-3 lg:mr-0">
                <img className="rounded object-cover h-full w-full" src="https://images.cbazaar.com/images/stones-embellished-royal-blue-saree-sadsfcns2198-u.jpg"></img>
              </Dot>
            </div>
            {/* <div>
            <img className="object-contain" src="https://images.cbazaar.com/images/stones-embellished-royal-blue-saree-sadsfcns2198-u.jpg"></img>
          </div> */}
            <div className="w-full lg:mx-3">

              <Slider>
                <Slide index={0}><ImageWithZoom src="https://images.cbazaar.com/images/stones-embellished-royal-blue-saree-sadsfcns2198-u.jpg"></ImageWithZoom></Slide>
                <Slide index={1}><ImageWithZoom src="https://www.jivaana.com/cache/9d/90/rose-red-saree-and-blush-pink-crop-top_saree_red-baby-pink_151186283056-9d90b1cb5f0ccd4306a0ba39058f8571.jpg"></ImageWithZoom></Slide>
                <Slide index={2}><ImageWithZoom src="https://images.cbazaar.com/images/stones-embellished-royal-blue-saree-sadsfcns2198-u.jpg"></ImageWithZoom></Slide>
              </Slider>
            </div>

          </CarouselProvider>
        </div>

        {/* DETAILS PANE */}
        <div style={{ flexBasis: 0, flexGrow: 4 }} className="flex flex-col p-5 pt-0 rounded-lg">
          <span className="text-base lg:text-xl text-darkgray">Blue Gray and Gold Coloured Netted Cotton Saree | Straight from Weavers</span>
          <div className="flex flex-col lg:flex-row">
            <div className="flex flex-col">
              <div className="flex justify-between flex-row-reverse items-start lg:flex-col">
                <div className='flex flex-row items-center'>
                  <StarRatingComponent className="text-3xl"
                    name="rate1"
                    starCount={5}
                    value={4}
                    starColor={'#d770ad'}
                  />
                  <span className="text-dark-gray ml-5 text-xs">231 Ratings<br />10 Reviews</span>
                </div>
                <div>
                  <div className="lg:mt-5">
                    <span className="text-4xl text-pinkrose">&#8377;{store.price}</span>
                    <span className="text-gray-500 line-through ml-2">&#8377;{store.originalPrice}</span>
                  </div>
                  <span className="text-darkgray text-sm">+ &#8377;100 Shipping</span>
                </div>
              </div>
              <span className="text-xs font-bold mt-3 lg:mt-5 p-1 text-darkgray">Select Variant</span>
              <div className="variants flex flex-row items-center text-darkgray">
                <div>
                  <input className="variant hidden" type="radio" name="variant" value="variant1" id="variant1" onChange={this.handleVariantChange} defaultChecked></input>
                  <label htmlFor="variant1">
                    <span className="text-xs border border-pinkrose p-1 mr-2 rounded cursor-pointer">With Kit</span>
                  </label>
                </div>
                <div>
                  <input className="variant hidden" type="radio" name="variant" value="variant2" id="variant2" onChange={this.handleVariantChange}></input>
                  <label htmlFor="variant2">
                    <span className="text-xs border border-pinkrose p-1 mr-2 rounded cursor-pointer">Without Kit</span>
                  </label>
                </div>
              </div>
            </div>
            <div className="flex flex-row lg:flex-col items-center justify-between lg:justify-center mt-5 lg:mt-0" style={{ flexGrow: 1 }}>
              <button className="text-white bg-pinkrose hover:bg-lavander hover:shadow-none p-3 rounded mb-3 shadow-lg w-full lg:w-48 mr-2 lg:mr-0">Add to Cart</button>
              <button className="text-white bg-pinkrose hover:bg-lavander hover:shadow-none p-3 rounded mb-3 shadow-lg w-full lg:w-48 ml-2 lg:ml-0">Buy Now</button>
            </div>
          </div>
          <div className="flex flex-col mt-5 text-darkgray">
            <span className="text-xs font-bold p-1">Description</span>
            <p className="p-1 text-sm">This is a beautiful netted cotton saree, with patch work along the zari embedded with beautiful gold and silver stone work. Comes with a contast blouse. The suggested designs below work really well with the saree.</p>
          </div>
        </div>
      </div>


      <div className="text-darkgray p-5 pt-0 flex flex-col lg:flex-row">

        {/* SPECS PANE */}
        <div style={{ flexBasis: 0, flexGrow: 3 }}>
          <span className="text-xs font-bold p-1">Specifications</span>
          <table className="border border-gray-400 border-collapse w-full mt-5">
            <thead>
              <tr>
                <th className="p-1 border-b border-gray-400 text-left text-sm bg-gray-200">Specification</th>
                <th className="p-1 border-b border-gray-400 text-left text-sm">Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="p-1 text-sm bg-gray-200">Length</td>
                <td className="p-1 text-sm">8 Yards</td>
              </tr>
              <tr>
                <td className="p-1 text-sm bg-gray-200">Cloth Type</td>
                <td className="p-1 text-sm">Netted Cotton</td>
              </tr>
            </tbody>
          </table>
        </div>

        {/* REVIEWS PANE */}
        <div className="mt-5 lg:p-5 lg:pt-0 lg:mt-0" style={{ flexBasis: 0, flexGrow: 4 }}>
          <span className="text-xs font-bold p-1">Reviews</span>
          <div className="flex flex-row py-5 items-start border-b border-gray-400">
            <div className="flex flex-col items-center">
              <img src="https://i.pravatar.cc/300" className="w-10 h-10 rounded-full" />
            </div>
            <div className="flex flex-col px-3 flex-grow">
              <span className="font-bold text-sm">Write Your Review</span>
              <span className="text-xs">John Doe</span>
              <input placeholder="Review Title" className="rounded bg-gray-200 text-sm mt-3 p-2"/>
              <textarea placeholder="Write your Review here" className="rounded bg-gray-200 text-sm mt-3 p-2" rows="3"/>

              <button className="rounded shadow-lg bg-pinkrose text-white px-2 py-1 w-1/3 lg:w-1/5 mt-3">Submit</button>
            </div>
          </div>
          <div className="flex flex-row py-5 items-start border-b border-gray-400">
            <div className="flex flex-col items-center">
              <img src="https://i.pravatar.cc/300" className="w-10 h-10 rounded-full" />
              <span className="px-2 mt-2 rounded bg-sunflower font-bold text-white text-sm">3.5&nbsp;&#9733;</span>
            </div>
            <div className="flex flex-col px-3">
              <span className="font-bold text-sm">Awesome Saree, Thoroughly Enjoyed Wearing It.</span>
              <span className="text-xs">John Doe</span>
              <p className="text-sm mt-1">
                This was a great saree. I gifted it to myself on my birthday. Prompt Delivery and Great Collection.
              </p>
            </div>
          </div>

        </div>
      </div>
    </div>
  </section>

Answer 1

找到问题了。 JS 中的 CSS 是问题所在。使用 Tailwind 的 flex-col 和这个，safari 缩小了内容以适应它。因此重叠。删除了 JS 中的 CSS 并将其移动到带有媒体查询的 Sass 文件中，并使用 next-sass.

加载它们

<div style={{ flexBasis: 0, flexGrow: 3 }}>
...
</div>
<div style={{ flexBasis: 0, flexGrow: 4 }}>
...
</div>

完全是我的错。

Next.JS 中的 TailwindCSS 无法在 Webkit 中正确呈现

TailwindCSS in Next.JS not rendering properly in Webkit

html

css

safari

next.js

tailwind-css