A CSS Reset for Web Apps

/**
 * Native Reset v1.0.0
 *
 * Assumes Tailwind's CSS reset has already been applied. If not, apply a modern
 * CSS reset, e.g. https://elad2412.github.io/the-new-css-reset.
 */

:root {
  /* Set an upper limit to zooming out. */
  max-width: ######;

  /* Improve font rendering. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Disable selecting the text inside UI elements. */
  -webkit-user-select: none;
  user-select: none;
  cursor: default;

  /* Hide the browser's default touch feedback. */
  -webkit-tap-highlight-color: transparent;
}

* {
  /**
   * Disable the "rubber-band" effect when overscrolling the page, which
   * moves the application chrome up and down.
   *
   * Note: this disables pull-to-refresh on mobile.
   */
  overscroll-behavior: none;

  /* Disable willy-nilly dragging of UI elements. */
  -webkit-user-drag: none;

  /**
   * Disable the default outline given to focused elements.
   *
   * Note: this must be replaced with proper, accessible focus states.
   */
  outline: none;
}

/* Make disabled elements actually disabled. */
:disabled {
  pointer-events: none;
}

/* Tailwind fails to remove these default styles. */
input,
textarea {
  background: none;
}