I have a project built in React with TailwindCSS, autoprefixer and postcss, but the problem is: for some reason I really can’t figure out why some CSS classes like “outline” just aren’t rendering properly on iOS, not on Safari specifically. Everything is normal in Android devices. We are running the production build in cPanel and I ran out of ideas to solve this problem. Here are the settings archives:

package.json

{
  "name": "forms-geracao",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emailjs/browser": "^4.3.3",
    "@mui/material": "^5.15.16",
    "@stripe/react-stripe-js": "^2.7.1",
    "@stripe/stripe-js": "^3.5.0",
    "@tabler/icons": "^3.3.0",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^15.0.6",
    "@testing-library/user-event": "^14.5.2",
    "axios": "^1.6.7",
    "croppie": "^2.6.5",
    "decode-uri-component": "^0.4.1",
    "dompurify": "^3.1.2",
    "framer-motion": "^11.1.7",
    "i18next": "^23.11.3",
    "i18next-browser-languagedetector": "^7.2.0",
    "i18next-http-backend": "^2.5.2",
    "iconsax-react": "^0.0.8",
    "js-cookie": "^3.0.5",
    "js.cookie": "^0.0.4",
    "jwt-decode": "^4.0.0",
    "path-browserify": "^1.0.1",
    "react": "^18.3.1",
    "react-bootstrap": "^2.10.2",
    "react-compare-image": "^3.4.0",
    "react-dom": "^18.3.1",
    "react-draggable": "^4.4.6",
    "react-dropzone": "^14.2.3",
    "react-easy-crop": "^5.0.7",
    "react-i18next": "^14.1.1",
    "react-icons": "^5.2.0",
    "react-iconsax": "^0.9.1",
    "react-intersection-observer": "^9.10.1",
    "react-masonry-css": "^1.0.16",
    "react-modal": "^3.16.1",
    "react-pro-sidebar": "^1.1.0",
    "react-router-dom": "^6.23.1",
    "react-scripts": "^5.0.1",
    "react-scroll": "^1.9.0",
    "react-slick": "^0.30.2",
    "react-switch": "^7.0.0",
    "react-youtube": "^10.1.0",
    "semantic-ui-css": "^2.5.0",
    "semantic-ui-react": "^2.1.5",
    "slick-carousel": "^1.8.1",
    "tailwindcss-animated": "^1.0.1",
    "web-vitals": "^3.5.2",
    "webpack-node-externals": "^3.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": [
    "since 2010"
  ],
  "devDependencies": {
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.41",
    "tailwindcss": "^3.4.3"
  }
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */

export const content = [
  "./src/**/*.{js,jsx,ts,tsx}",
];
export const theme = {
  extend: {
    fontFamily: {
      title: 'lemon-milk',
      paragraph: 'ms-yi-baiti',
    },
  }
};
export const plugins = [
  require('tailwindcss-animated'),
  require('autoprefixer'),
];

postcss.config.js

import autoprefixer from 'autoprefixer';

export const module = {
  rules: [
    {
      test: /.css$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            plugins: () => [autoprefixer()]
          }
        }
      ]
    }
  ]
};

I tried everything I could, updating packages, installing autoprefixer and postcss, rewriting code…