During the development of my project using Tailwind CSS, I focused on desktop compatibility and ensured responsiveness with Safari and Google Chrome. However, upon switching to DevTools, I encountered issues that persisted when testing on mobile devices.
For instance, when viewing on an iPhone 7+, only the class h-vh70 seemed to be applied:
<div class="h-vh30 sm:h-vh50 md:h-vh70 w-screen flex justify-center items-end">
<img src="./src/img/banner 1.png" alt="" />
</div>
A closer look at my tailwind.config.js file revealed the following adjustments:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
//my html files
],
theme: {
extend: {
height: {
vh30: "30vh",
vh50: "50vh",
vh70: "70vh",
},
},
},
plugins: [require("tailwindcss-textshadow"), require("autoprefixer")],
};