@tpzdsp/eslint-config-dsp/tailwindcss/utilities.css

re-usable config for ESLint, Prettier and semantic-release

@utility max-w-page {
  max-width: 1020px;
}

/* Not defined in @theme so no utility class is generated.
   Use var(--focus-ring-width) in component CSS where a border (not outline) is needed for focus.
   In almost all cases an outline is prefered for focus though. */
:root {
  --focus-ring-width: 3px;
}

@utility outline-focus {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: 0;
}

@layer base {
  @media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

html,
body {
  @apply text-base;
}

@layer components {
  /* GDS width container (centred, padded, capped at 960px content width) */
  .page-wrapper {
    @apply w-full max-w-page mx-auto px-gds-3 sm:px-gds-6;
  }
}