TailwindCSS in Next.JS not rendering properly in Webkit
Posted By: Anonymous
I am using TailwindCSS in a Next.JS project with postcss and autoprefixer. The issue here is it renders fine in Desktop and Chrome for Android, and Firefox. In iOS though both on Safari as well as chrome, the UI gets messed up.
I tried a lot of autoprefixer configs. None of them worked. This problem exists only with webkit. I thought maybe because of the flex, but other flexes on the same page work fine.
Here’s the Minimal repo to reproduce the error.
https://github.com/RohithCIS/tailwind-nextjs-webkit-issue
I have attached the images below.
Here’s my configs and thanks for the help.
// 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>
Solution
Found the problem. The CSS in JS was the problem. With Tailwind’s flex-col and this, safari shrunk the content to fit it. Hence the overlap. Removed CSS in JS and moved it to a Sass file with media queries and loaded them with next-sass.
<div style={{ flexBasis: 0, flexGrow: 3 }}>
...
</div>
<div style={{ flexBasis: 0, flexGrow: 4 }}>
...
</div>
Totally my fault.
Answered By: Anonymous
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.
