Import tailwind to achieve full visual consistency with labs

package.json

@@ -7,15 +7,20 @@
 		"build": "rollup -c -w"
 	},
 	"devDependencies": {
+		"@oddbird/popover-polyfill": "^0.4.4",
 		"@rollup/plugin-commonjs": "^24.0.0",
 		"@rollup/plugin-node-resolve": "^15.0.0",
 		"@rollup/plugin-terser": "^0.4.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
+		"autoprefixer": "^10.4.20",
 		"labs": "git@github.com:leaningtech/labs.git",
+		"postcss": "^8.4.47",
 		"rollup-plugin-css-only": "^4.3.0",
+		"rollup-plugin-postcss": "^4.0.2",
 		"rollup-plugin-svelte": "^7.1.2",
-		"svelte": "^4.2.7"
+		"svelte": "^4.2.7",
+		"tailwindcss": "^3.4.9"
 	},
 	"type": "module"
 }

rollup.config.js

@@ -0,0 +1,57 @@
+import { spawn } from 'child_process';
+import svelte from 'rollup-plugin-svelte';
+import postcss from 'rollup-plugin-postcss';
+import commonjs from '@rollup/plugin-commonjs';
+import terser from '@rollup/plugin-terser';
+import resolve from '@rollup/plugin-node-resolve';
+import css from 'rollup-plugin-css-only';
+import autoprefixer from 'autoprefixer';
+import tailwindcss from 'tailwindcss';
+
+const production = !process.env.ROLLUP_WATCH;
+
+export default {
+	input: 'src/main.js',
+	output: {
+		sourcemap: true,
+		format: 'iife',
+		name: 'app',
+		file: 'build/bundle.js'
+	},
+	plugins: [
+		svelte({
+			compilerOptions: {
+				// enable run-time checks when not in production
+				dev: !production
+			}
+		}),
+		// we'll extract any component CSS out into
+		// a separate file - better for performance
+		postcss({
+			extract: true,
+			plugins: [
+				tailwindcss,
+				autoprefixer,
+			],
+		}),
+
+		// If you have external dependencies installed from
+		// npm, you'll most likely need these plugins. In
+		// some cases you'll need additional configuration -
+		// consult the documentation for details:
+		// https://github.com/rollup/plugins/tree/master/packages/commonjs
+		resolve({
+			browser: true,
+			dedupe: ['svelte'],
+			exportConditions: ['svelte']
+		}),
+		commonjs(),
+
+		// If we're building for production (npm run build
+		// instead of npm run dev), minify
+		production && terser()
+	],
+	watch: {
+		clearScreen: false
+	}
+};

src/global.css

@@ -1,5 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
 
+@tailwind base;
+
 body
 {
 	font-family: Archivo, sans-serif;

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+