SYNC: Merge pull request #22 from dbgate/feature/tailwind-poc

packages/web/index.html.tpl

@@ -20,6 +20,7 @@
     <link rel="stylesheet" href="dimensions.css" />
     <link rel="stylesheet" href="bulma.css" />
     <link rel="stylesheet" href="icon-colors.css" />
+    <link rel="stylesheet" href="build/tailwind.css" />
     <link rel="stylesheet" href="build/bundle.css" />
     <link rel="stylesheet" href="build/fonts/materialdesignicons.css" />
     <link rel="stylesheet" href="build/diff2html.min.css" />

packages/web/package.json

@@ -25,8 +25,10 @@
     "@rollup/plugin-node-resolve": "^13.0.5",
     "@rollup/plugin-replace": "^3.0.0",
     "@rollup/plugin-typescript": "^8.2.5",
+    "@tailwindcss/postcss": "^4.1.18",
     "@tsconfig/svelte": "^1.0.0",
     "ace-builds": "^1.36.5",
+    "autoprefixer": "^10.4.23",
     "chart.js": "^4.4.2",
     "chartjs-adapter-moment": "^1.0.0",
     "chartjs-plugin-datalabels": "^2.2.0",
@@ -44,12 +46,14 @@
     "json-stable-stringify": "^1.0.1",
     "localforage": "^1.9.0",
     "lodash": "^4.17.21",
+    "postcss": "^8.5.6",
     "randomcolor": "^0.6.2",
     "resize-observer-polyfill": "^1.5.1",
     "rollup": "^2.57.0",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svelte": "^7.2.2",
     "rollup-plugin-terser": "^7.0.2",
     "sirv-cli": "^1.0.0",
@@ -59,6 +63,7 @@
     "svelte-markdown": "^0.1.4",
     "svelte-preprocess": "^4.9.5",
     "svelte-select": "^4.4.7",
+    "tailwindcss": "^4.1.18",
     "tslib": "^2.3.1",
     "typescript": "^4.4.3",
     "uuid": "^3.4.0"

packages/web/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+};

packages/web/rollup.config.js

@@ -9,6 +9,7 @@ import typescript from '@rollup/plugin-typescript';
 import replace from '@rollup/plugin-replace';
 import css from 'rollup-plugin-css-only';
 import json from '@rollup/plugin-json';
+import postcss from 'rollup-plugin-postcss';
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -34,6 +35,21 @@ function serve() {
 }
 
 export default [
+  // Separate entry for Tailwind CSS processing
+  {
+    input: 'src/tailwind.css',
+    output: {
+      file: 'public/build/tailwind.css',
+    },
+    plugins: [
+      postcss({
+        extract: true,
+        minimize: production,
+        sourceMap: !production,
+      }),
+    ],
+  },
+
   {
     input: 'src/query/QueryParserWorker.js',
     output: {

packages/web/src/main.ts

@@ -1,3 +1,4 @@
+import './tailwind.css';
 import App from './App.svelte';
 import './utility/connectionsPinger';
 import './utility/changeCurrentDbByTab';

packages/web/src/tailwind.css

@@ -0,0 +1,7 @@
+@layer theme, base, components, utilities;
+
+/* Keep theme variables (recommended) */
+@import "tailwindcss/theme.css" layer(theme) prefix(tw);
+
+/* Utilities only — NO preflight import */
+@import "tailwindcss/utilities.css" layer(utilities) prefix(tw);

packages/web/tailwind.config.js

@@ -0,0 +1,7 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/**/*.{html,js,svelte,ts}',
+    './public/**/*.html',
+  ],
+};