admin管理员组文章数量:1312678
I've done some research but can't find anything that relates to an issue I am having. I am using Tailwind, Typescript, and Next JS. My app works fine on Chrome, but I am having an issue with all my media queries where all the mobile breakpoints appear while viewing in desktop view.
For example, on my about page when viewing on Safari it shows my div with all elements within as a flex column and all text and the image centered inside. This is supposed to be the mobile view, where as chrome shows it as normal as a row without any text centered. Anyone know what this could be? Does Safari not sync well with Tailwind?
Chrome:
Safari:
about.tsx
// PLUGINS
import { motion } from "framer-motion"
// COMPONENTS
import Image from 'next/image';
// ABOUT
export default function About() {
return (
<div className="flex justify-center items-center w-full pt-20 pb-10 bg-gradient-to-b from-zinc-800 to-zinc-600">
<motion.div className="w-11/12 max-w-[1200px] bg-zinc-800 text-white p-5 gap-5 flex justify-center items-center sm:flex-row flex-col shadow-2xl border border-white-200" initial={{ opacity: 0 }} whileInView={{ opacity: 1, transition: { duration: 2.5 } }} viewport={{ once: true }}>
<div className="w-[1600px] bg-cover h-[400px] [mask-image:linear-gradient(to_right,transparent,black_20%,black_80%,transparent)] hidden sm:block" style={{ backgroundImage: "url('/imgs/david_closeup.jpg')", backgroundPositionX: "50%"}}></div>
<Image
src="/imgs/david_closeup.jpg"
alt="Image of David Glass"
width={320}
height={160}
className="block sm:hidden object-cover [mask-image:linear-gradient(to_right,transparent,black_20%,black_80%,transparent)] w-md sm:w-sm"
priority // Improves LCP by preloading
/>
<div className="flex flex-col sm:text-left text-center overflow-hidden">
<h1 className="text-2xl px-5 font-thin">About</h1>
<h2 className="font-bold text-xl px-5 pt-5">A TITLE</h2>
<motion.p className="px-5 py-5" initial={{ y: 100 }} whileInView={{ y: 0, transition: { duration: 1 } }} viewport={{ once: true }}>Versatile in many forms of music making, David Glass has
THIS IS TEXT
</motion.p>
</div>
</motion.div>
</div>
);
}
tailwind.config.ts
import type { Config } from "tailwindcss";
export default {
darkMode: ["class"],
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
animation: {
marquee: "marquee 5s linear infinite",
},
keyframes: {
marquee: {
"0%": { transform: "translateX(0)" },
"100%": { transform: "translateX(-100%)" },
},
},
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
}
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
}
}
},
plugins: [require("tailwindcss-animate")],
} satisfies Config;
global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
/* font-family: Arial, Helvetica, sans-serif; */
}
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}
.MyGradient {
mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1) 20%,
rgba(0, 0, 0, 1) 90%,
rgba(0, 0, 0, 0)
);
}
I've done some research but can't find anything that relates to an issue I am having. I am using Tailwind, Typescript, and Next JS. My app works fine on Chrome, but I am having an issue with all my media queries where all the mobile breakpoints appear while viewing in desktop view.
For example, on my about page when viewing on Safari it shows my div with all elements within as a flex column and all text and the image centered inside. This is supposed to be the mobile view, where as chrome shows it as normal as a row without any text centered. Anyone know what this could be? Does Safari not sync well with Tailwind?
Chrome:
Safari:
about.tsx
// PLUGINS
import { motion } from "framer-motion"
// COMPONENTS
import Image from 'next/image';
// ABOUT
export default function About() {
return (
<div className="flex justify-center items-center w-full pt-20 pb-10 bg-gradient-to-b from-zinc-800 to-zinc-600">
<motion.div className="w-11/12 max-w-[1200px] bg-zinc-800 text-white p-5 gap-5 flex justify-center items-center sm:flex-row flex-col shadow-2xl border border-white-200" initial={{ opacity: 0 }} whileInView={{ opacity: 1, transition: { duration: 2.5 } }} viewport={{ once: true }}>
<div className="w-[1600px] bg-cover h-[400px] [mask-image:linear-gradient(to_right,transparent,black_20%,black_80%,transparent)] hidden sm:block" style={{ backgroundImage: "url('/imgs/david_closeup.jpg')", backgroundPositionX: "50%"}}></div>
<Image
src="/imgs/david_closeup.jpg"
alt="Image of David Glass"
width={320}
height={160}
className="block sm:hidden object-cover [mask-image:linear-gradient(to_right,transparent,black_20%,black_80%,transparent)] w-md sm:w-sm"
priority // Improves LCP by preloading
/>
<div className="flex flex-col sm:text-left text-center overflow-hidden">
<h1 className="text-2xl px-5 font-thin">About</h1>
<h2 className="font-bold text-xl px-5 pt-5">A TITLE</h2>
<motion.p className="px-5 py-5" initial={{ y: 100 }} whileInView={{ y: 0, transition: { duration: 1 } }} viewport={{ once: true }}>Versatile in many forms of music making, David Glass has
THIS IS TEXT
</motion.p>
</div>
</motion.div>
</div>
);
}
tailwind.config.ts
import type { Config } from "tailwindcss";
export default {
darkMode: ["class"],
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
animation: {
marquee: "marquee 5s linear infinite",
},
keyframes: {
marquee: {
"0%": { transform: "translateX(0)" },
"100%": { transform: "translateX(-100%)" },
},
},
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
}
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
}
}
},
plugins: [require("tailwindcss-animate")],
} satisfies Config;
global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
/* font-family: Arial, Helvetica, sans-serif; */
}
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}
.MyGradient {
mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1) 20%,
rgba(0, 0, 0, 1) 90%,
rgba(0, 0, 0, 0)
);
}
- Thanks. Could you also check the Safari console to see if it shows any errors? For example, if it couldn't load your CSS styles or something like that? TailwindCSS is just a processor; the final result is always native CSS, both in development and production modes. So, once the native CSS is ready, it should work in all browsers as it would with regular CSS. – rozsazoltan Commented Jan 31 at 15:19
- Maybe: github/tailwindlabs/tailwindcss/discussions/12463 – rozsazoltan Commented Jan 31 at 15:24
- @rozsazoltan - interesting ok thanks. it looks like safari console is not showing any errors, nor am i seeing any red eslint in my sources similar to the author of the reddit post in his sources. Also, I dont think I have nested CSS elements unless I am misunderstanding some terminology since I am only using tailwind and not CSS or any nested css elements. Assuming the problem is because of an outdated safari..? I have 16.1 from Oct 2022. I will try to update and see if there is a difference. – DeBoer753 Commented Jan 31 at 15:47
- 1 @rozsazoltan - Thank you! I updated MacOS and its now working on Safari – DeBoer753 Commented Jan 31 at 16:56
1 Answer
Reset to default 1The issue occurs in Safari version 16.x. It is recommended to update Safari to at least version 17.x or later.
Source: tailwindlabs/tailwindcss #12463
本文标签： typescriptTailwind media queries don39t work properly on SafariStack Overflow
版权声明：本文标题：typescript - Tailwind media queries don't work properly on Safari - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741912198a2404509.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论