Next.JS 中的 TailwindCSS 在 Webkit 中无法正确呈现
Posted
技术标签:
【中文标题】Next.JS 中的 TailwindCSS 在 Webkit 中无法正确呈现【英文标题】：TailwindCSS in Next.JS not rendering properly in Webkit 【发布时间】：2020-02-12 19:34:49 【问题描述】：我在带有 postcss 和 autoprefixer 的 Next.JS 项目中使用 TailwindCSS。这里的问题是它在适用于 android 的桌面和 Chrome 以及 Firefox 中呈现良好。在 ios 中，尽管在 Safari 和 chrome 上，UI 都会变得一团糟。
我尝试了很多自动前缀配置。他们都没有工作。这个问题只存在于 webkit。我想可能是因为 flex，但同一页面上的其他 flex 工作正常。
这是重现错误的最小 repo。
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">₹store.price</span>
<span className="text-gray-500 line-through ml-2">₹store.originalPrice</span>
</div>
<span className="text-darkgray text-sm">+ ₹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 ★</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>
【问题讨论】：
【参考方案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 中无法正确呈现的主要内容，如果未能解决你的问题，请参考以下文章
在 Next.js 项目中的 Tailwind 中配置颜色会破坏所有颜色
为啥文本颜色在 Tailwind css + next.js 项目中不起作用