[bug]: Add webkit optimizations to global CSS configuration

[Abdel-Monaam-Aouini]

Describe the bug

Overview

The current global CSS configuration would benefit from additional webkit-specific optimizations to enhance cross-browser compatibility, mobile device support, and overall rendering quality.

Suggested Changes

Add the following webkit and cross-browser optimizations to the base layer of the global CSS configuration:

@layer base {
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    -webkit-overflow-scrolling: touch;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  input, textarea, button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}

Benefits

1. Improved Text Rendering

   • Better font smoothing across browsers
   • Optimized legibility for all text elements

2. Enhanced Mobile Experience

   • Proper text sizing on mobile devices
   • Improved touch scrolling behavior
   • Removed default tap highlights
   • Better form element appearance on iOS

3. Better Cross-Browser Consistency

   • Normalized appearance across different browsers
   • Consistent form element styling

Implementation

This can be added to the existing globals.css template that's generated when initializing a new project. These changes are purely additive and won't affect existing functionality.

Additional Context

These optimizations are commonly used in production applications and follow best practices for cross-browser compatibility. They address common issues with text rendering and mobile device interactions.

Related Resources

• Apple's -webkit-font-smoothing documentation
• MDN text-rendering documentation

Affected component/components

config

How to reproduce

:)

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

mobile

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[CharanMN7]

@Abdel-Monaam-Aouini Just curious, Why is this not part of Tailwind CSS? (I have absolutely no idea if it is..)