Enable preflight and create base styles for client

Reimplement `elements` styles as TW-style CSS and put in `base` layer
Convert variables in sidebar body styles to Tailwind values and move to
base layer

src/styles/sidebar/_base.scss

+@use 'tailwindcss/base';
+
+@layer base {
+  html,
+  body {
+    @apply h-full;
+  }
+
+  body {
+    @apply bg-white font-sans text-base text-color-text;
+  }
+
+  // TODO: Find all component-src uses of <a> elements directly and update to
+  // use `Link` component (for styling) or verify that they don't rely on this
+  // element style
+  a {
+    // Ensure the tag has width in order for :focus styling to render correctly.
+    @apply inline-block;
+    // Give links a radius to allow :focus styling to appear similar to that of buttons
+    @apply rounded-sm;
+    @apply text-brand no-underline;
+  }
+
+  a:active,
+  a:focus {
+    @apply no-underline;
+  }
+
+  a:hover {
+    @apply text-brand-dark no-underline;
+  }
+
+  // TODO: Research history of this and whether it's still appropriate
+  p {
+    hyphens: auto;
+  }
+}

src/styles/sidebar/elements.scss

-@use '@hypothesis/frontend-shared/styles/mixins/focus';
-
-@use '../variables' as var;
-
-// basic standard styling for elements
-a {
-  @include focus.outline-on-keyboard-focus;
-  // Ensure the tag has width in order for :focus styling to render correctly.
-  display: inline-block;
-  color: var.$color-link;
-  text-decoration: none;
-  // Give links a radius to allow :focus styling to appear similar to that of buttons
-  border-radius: var.$border-radius;
-}
-
-a:active,
-a:focus {
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: none;
-  color: var.$color-link-hover;
-}
-
-p {
-  hyphens: auto;
-
-  & + p {
-    margin: 1em 0 0;
-  }
-}
-
-ol {
-  list-style-type: decimal;
-  padding-left: 3em;
-}
-
-svg {
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-}

src/styles/sidebar/sidebar.scss

-@use '../variables' as var;
-@use '../mixins/utils';
-
-// Base styles
-// -----------
-@use '../reset';
-@use './elements';
+@use './base';
 
 // Shared styles
 // -----------------
@@ -58,18 +52,4 @@
 // Local utility classes
 @use '../util';
 
-@tailwind base;
-@tailwind utilities;
-
-// Top-level styles
-// ----------------
-
-body {
-  @include utils.font--medium;
-  height: 100%;
-
-  background-color: var.$color-background;
-  color: var.$color-text;
-  font-family: var.$sans-font-family;
-  font-weight: normal;
-}
+@use 'tailwindcss/utilities';

tailwind.config.mjs

@@ -8,8 +8,26 @@ export default {
     './dev-server/ui-playground/components/**/*.js',
     './node_modules/@hypothesis/frontend-shared/lib/**/*.js',
   ],
-  theme: {},
-  corePlugins: {
-    preflight: false, // Disable Tailwind's CSS reset in the `base` layer
+  theme: {
+    extend: {
+      colors: {
+        'color-text': {
+          DEFAULT: '#202020',
+          light: '#737373',
+        },
+      },
+      fontFamily: {
+        sans: [
+          '"Helvetica Neue"',
+          'Helvetica',
+          'Arial',
+          '"Lucida Grande"',
+          'sans-serif',
+        ],
+      },
+      fontSize: {
+        base: ['13px', '1.4'],
+      },
+    },
   },
 };