Add tailwind build and config support

gulpfile.mjs

@@ -10,12 +10,14 @@ import gulp from 'gulp';
 
 import serveDev from './dev-server/serve-dev.js';
 import servePackage from './dev-server/serve-package.js';
+import tailwindConfig from './tailwind.config.mjs';
 
 gulp.task('build-js', () => buildJS('./rollup.config.mjs'));
 gulp.task('watch-js', () => watchJS('./rollup.config.mjs'));
 
 gulp.task('build-css', () =>
-  buildCSS([
+  buildCSS(
+    [
       // Hypothesis client
       './src/styles/annotator/annotator.scss',
       './src/styles/annotator/highlights.scss',
@@ -27,14 +29,22 @@ gulp.task('build-css', () =>
 
       // Development tools
       './src/styles/ui-playground/ui-playground.scss',
-  ])
+    ],
+    { tailwindConfig }
+  )
 );
 
 gulp.task(
   'watch-css',
   gulp.series('build-css', function watchCSS() {
     gulp.watch(
-      ['node_modules/katex/dist/katex.min.css', 'src/styles/**/*.scss'],
+      [
+        'node_modules/katex/dist/katex.min.css',
+        'src/styles/**/*.scss',
+        'src/sidebar/components/**/*.js',
+        'src/annotator/components/**/*.js',
+        'dev-server/ui-playground/components/**/*.js',
+      ],
       gulp.task('build-css')
     );
   })

src/styles/annotator/annotator.scss

@@ -29,6 +29,9 @@
 // Make the shared package utility styles available
 @use '@hypothesis/frontend-shared/styles/util';
 
+@tailwind base;
+@tailwind utilities;
+
 // Styles for all top-level elements in shadow roots.
 :host > * {
   font-family: var.$sans-font-family;

src/styles/sidebar/sidebar.scss

@@ -58,6 +58,9 @@
 // Local utility classes
 @use '../util';
 
+@tailwind base;
+@tailwind utilities;
+
 // Top-level styles
 // ----------------
 

tailwind.config.mjs

+import tailwindConfig from '@hypothesis/frontend-shared/lib/tailwind.preset.js';
+
+export default {
+  presets: [tailwindConfig],
+  mode: 'jit',
+  purge: [
+    './src/sidebar/components/**/*.js',
+    './src/annotator/components/**/*.js',
+    './dev-server/ui-playground/components/**/*.js',
+  ],
+  theme: {},
+  corePlugins: {
+    preflight: false, // Disable Tailwind's CSS reset in the `base` layer
+  },
+};