Add tailwind build and config support

gulpfile.mjs

@@ -10,31 +10,41 @@ 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([
-    // Hypothesis client
-    './src/styles/annotator/annotator.scss',
-    './src/styles/annotator/highlights.scss',
-    './src/styles/annotator/pdfjs-overrides.scss',
-    './src/styles/sidebar/sidebar.scss',
-
-    // Vendor
-    './node_modules/katex/dist/katex.min.css',
-
-    // Development tools
-    './src/styles/ui-playground/ui-playground.scss',
-  ])
+  buildCSS(
+    [
+      // Hypothesis client
+      './src/styles/annotator/annotator.scss',
+      './src/styles/annotator/highlights.scss',
+      './src/styles/annotator/pdfjs-overrides.scss',
+      './src/styles/sidebar/sidebar.scss',
+
+      // Vendor
+      './node_modules/katex/dist/katex.min.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
+  },
+};