Tailwind css is not working on Safari browser

[CodeByStella]

Body

Hello everyone,

I recently built a website using Next.js and Tailwind CSS. The site works perfectly across all browsers except Safari 18. When I open it in Safari, many of the layouts appear broken.

I initially suspected an issue with WebKit, but after checking, the code seems fine. When I open the Developer Tools in Safari and navigate to the CSS file in the _next directory under the “Sources” tab, I noticed something interesting — if I make any change to that CSS file (even just adding an empty line), all the layouts suddenly render correctly.

It seems like the styles are not being fully loaded or applied at first.
Has anyone experienced something similar or found a reliable solution?
I’ve been trying to resolve this all afternoon without success, so any insights would be greatly appreciated.

Thank you in advance! 🙏

Guidelines

• I have read and understood this category's guidelines before making this post.

[CodeByStella]

[khalidh1b]

The Next.js GitHub issue: “Turbopack Not Compiling Tailwind CSS Changes in Safari” reports Tailwind + Next causing style issues in Safari.
GitHub

Blog on debugging Tailwind CSS with Next.js: “Debugging Tailwind CSS and Next.js” on LogRocket; good for catching config / loading issues.
LogRocket Blog

Reddit post: Tailwind v4 causing layout break on Safari (specifically forms input styles); shows browser‑specific quirks.
Reddit

[tmilost]

1. Safari CSS Caching/Parsing Issue:
   Safari (especially older versions) can have strict CSS parsing and may ignore or misapply certain dynamically generated styles. Sometimes, editing a file forces a reload/parse that fixes it.

2. Check CSS File Delivery:

   • Make sure your server serves CSS with correct headers (especially Content-Type: text/css and encoding).
   • Try disabling compression or minification to see if it's causing partial CSS delivery.
   • Ensure there are no unexpected characters or BOM at the start of your CSS files.

3. Tailwind/Next.js Specifics:

   • Update both Tailwind CSS and Next.js to their latest versions if possible; sometimes, bugs in build tools cause these issues.
   • Purge your CSS to only include necessary styles (Tailwind sometimes generates huge files).
   • Check for custom plugins/postprocessors that could be generating incompatible CSS for Safari.

4. Force Safari to Redraw Styles:
   You can use a simple script to force a redraw. Example:

   document.body.offsetHeight; // Forces reflow

   Or, even triggering a minimal update to your CSS via JS, though this is a workaround.

5. Polyfills for CSS Features:
   Some Tailwind features (like flex, grid, or advanced selectors) don’t work the same way in older Safari. Try replacing advanced CSS with more basic alternatives, or use autoprefixer.

6. Check Console for Errors:
   Any CSS or JS errors in Safari's console may hint at the problem.

Community Experience:
This bug is known (similar issues have been reported with Next.js sites on Safari) and is usually fixed by:

• Upgrading library versions
• Adjusting build/minification settings
• Ensuring CSS is not overly large or malformed

What you should try next:

• Upgrade Next.js and Tailwind.
• Use Next.js's built-in Image and CSS optimization.
• Serve CSS without minification for troubleshooting.
• Test with a basic build to isolate if it’s a Tailwind or Next.js config issue.

If you provide your tailwind.config.js, CSS build setup, and additional info, more targeted help could be shared.

[CodeByStella]

Thanks for your help. I will be appreciate if you could provide more exact steps. Here I am sharing detail.

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  env: {
    API_URL: process.env.API_URL || "http://localhost:3001",
  },
};

module.exports = nextConfig;

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "0px",
        md: "0px",
        sm: "0px",
        DEFAULT: "0px",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    /* Primary as brand red */
    --primary: 356 70% 50%; /* approx #d32f2f */
    --primary-foreground: 0 0% 100%;
    /* Secondary can be blue for calculate */
    --secondary: 221.2 83.2% 53.3%;
    --secondary-foreground: 210 40% 98%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 0 71% 95%; /* pale red hover #fdecea */
    --accent-foreground: 356 70% 30%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 356 70% 50%;
    --radius: 0rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 356 70% 50%;
    --primary-foreground: 210 40% 98%;
    --secondary: 217.2 91.2% 59.8%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 356 30% 20%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 356 70% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    background-color: #fafafa;
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", Arial, sans-serif;
  }

  /* Hide number input spinners (WebKit) */
  input[type='number']::-webkit-outer-spin-button,
  input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  /* Hide number input spinners (Firefox) */
  input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
  }

  /* Compact scrollbar styles */
  /* For WebKit browsers (Chrome, Safari, Edge) */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  /* For Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
  }

  /* Toast animation */
  @keyframes slide-in {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  .animate-slide-in {
    animation: slide-in 0.3s ease-out;
  }
}

@media screen and (min-width: 1024px) {
  .custom_main_container{
    height: calc(100vh - 100px) !important;
  }
}

package.json

{
  "name": "business-system-client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@prisma/client": "^5.7.1",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.5",
    "axios": "^1.12.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "hyperformula": "^3.0.1",
    "jspdf": "^2.5.1",
    "jwt-decode": "^3.1.2",
    "lucide-react": "^0.294.0",
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.48.2",
    "recharts": "^2.8.0",
    "tailwind-merge": "^2.2.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

[tmilost]

There are several potential issues and considerations with your Tailwind CSS and Next.js configuration, especially regarding Safari compatibility. Few things to check 😃

1. CSS Variable Usage in Tailwind Config Colors

You’re using Tailwind custom colors like:

border: "hsl(var(--border))",
input: "hsl(var(--input))",
...

This means your CSS uses variables (--border, etc.) declared in globals.css.
Potential issue:

• CSS Variables require correct scoping and compatibility: Some older Safari versions don’t handle custom properties (var(--something)) well, especially inside HSL/Color functions or if the variable is undefined at the time of style application.
• If styles break on Safari but are fine elsewhere, double-check that every variable is always present on the root element(s).

What to check:

• In Safari DevTools, inspect if --border, --input, etc. are showing up correctly on :root or .dark elements.
• Try replacing hsl(var(--border)) with a standard color (e.g., #e5e7eb) as a test. If it works, likely a CSS variable bug.

2. Advanced Animation and Keyframes

Your config uses custom keyframes and animation:

keyframes: { "accordion-down": ... }
animation: { "accordion-down": ... }

Potential issue:

• Dynamic or non-standard keyframe/animation properties may behave differently in Safari.
• Safari can misinterpret custom properties like var(--radix-accordion-content-height) unless the value is defined and properly inherited.

3. Minification/Postcss

Your postcss.config.js is correct:

plugins: { tailwindcss: {}, autoprefixer: {} }

But Safari sometimes mishandles minified files—disable minification or try a production build with full CSS (without minification) to test.

4. Import Paths for Tailwind’s content Option

You have:

content: [
  './pages/**/*.{ts,tsx}',
  './components/**/*.{ts,tsx}',
  './app/**/*.{ts,tsx}',
  './src/**/*.{ts,tsx}',
],

Potential issue:

• If global CSS or layout components are outside these folders, Tailwind may purge too aggressively or miss styles.
• For Next.js 13+, make sure your layouts and global CSS are referenced in the pages or components listed.

5. Next.js & Tailwind Version

Your versions are:

• next: "14.0.4"
• tailwindcss: "^3.3.0"

Both are recent, but some bugs may exist in specific point releases, especially with the app directory and non-standard CSS.
Try: Upgrading Tailwind to latest (v4 if available) and see changelogs for Safari fixes.

6. Safari Flex/Grid Issues

Some Tailwind features (like gap utilities, flex, grid) often break in older Safari.

• Try replacing advanced layouts with CSS fallbacks for Safari:
  Example: Use margin-based instead of gap-* in flex/grid for Safari.

7. CSS Variable HSL (Known WebKit Bug)

Safari (especially v15–v18) sometimes fails to apply colors from hsl(var(--something)) correctly if:

• The variable is updated after initial render
• The variable isn’t set at the right level (must be on :root or inherited parent)

What you can do:

• Try changing one variable in DevTools; if the layout fixes itself, it’s almost certainly a live variable update bug.
• Try using RGB or HEX values instead for debugging purposes.

8. General Build/Delivery

• Ensure your CSS files are served with correct Content-Type.
• Check for BOM or non-standard characters at the start of files.
• Disable gzip/minification for troubleshooting.

---