adds tailwind css support

Clay-Ferguson · Oct 24, 2024 · 7a922f9 · 7a922f9
1 parent 03d7a89
commit 7a922f9
Show file tree

Hide file tree

Showing 12 changed files with 687 additions and 165 deletions.
diff --git a/src/main/resources/public/css/imports/button.scss b/src/main/resources/public/css/imports/button.scss
@@ -1,5 +1,3 @@
-/* Warning: setting any kind of left margin won't work becasue the btn-group? style of bootstrap overrides it in button groups */
-
 .askDeleteQuestion {
     padding: 5px !important;
     cursor: pointer;
@@ -147,8 +145,6 @@
     margin-right: 0;
 }
 
-// we tack this onto bootstrap btn-group, becasue without it, buttons stretch wider than normal when 
-// wrapped to a new line (position) that where the row isn't full and has space to stretch. 
 .btnGroup {
     display: inline;
 }

diff --git a/src/main/resources/public/css/imports/media-queries.scss b/src/main/resources/public/css/imports/media-queries.scss
@@ -62,7 +62,6 @@ Media Queries below are per Bootstap 4 standard */
     }
 }
 
-//this size is non-standard and larger than anything bootstrap considers.
 @media (min-width: 1500px) {
     .modal-lg {
         width: 1498px;
@@ -72,4 +71,4 @@ Media Queries below are per Bootstap 4 standard */
     .container {
         max-width: 1400px;
     }
-}
+}
diff --git a/src/main/resources/public/css/imports/tabs.scss b/src/main/resources/public/css/imports/tabs.scss
@@ -73,8 +73,6 @@
 
 .mainTabPanel {
     //setting a max-width here ruins the centering horizontally on the page
-    //WARNING: I think the bootstrap 'main' entity is what is setting the width here and it didn't work to chagne it here.
-    // max-width: 750px;
 
     //I'd prefer to have NO margin, but the top margin is getting forced so I'll add a bottom margin for consistency for now
     margin-bottom: $smallGap;

diff --git a/src/main/resources/public/css/quanta.scss b/src/main/resources/public/css/quanta.scss
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @import "variables.scss";
 
 $profileImgSize: 200px;

diff --git a/src/main/resources/public/package.json b/src/main/resources/public/package.json
@@ -47,11 +47,14 @@
     "@types/d3": "^7.4.0",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^4.0.4",
+    "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
     "eslint": "^9.6.0",
+    "postcss": "^8.4.47",
     "sass": "^1.66.1",
+    "tailwindcss": "^3.4.14",
     "typescript": "5.5.2",
-    "vite": "^5.2.6",
+    "vite": "^5.4.10",
     "vite-plugin-circular-dependency": "^0.4.1"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"

diff --git a/src/main/resources/public/postcss.config.js b/src/main/resources/public/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    }
+}
diff --git a/src/main/resources/public/src/comp/LayoutDemo.ts b/src/main/resources/public/src/comp/LayoutDemo.ts
@@ -19,6 +19,10 @@ export class LayoutDemo extends Main {
         }
 
         const children = [];
+        children.push(new Div("Tailwind CSS", {
+            className: "tw-bg-blue-500 tw-p-4 tw-rounded"
+        }));
+
         for (let i = 0; i < 10; i++) {
             children.push(new Div("Brick" + i, {
                 className: "brick brickWidth100px brickInline",

diff --git a/src/main/resources/public/src/comp/core/Checkbox.ts b/src/main/resources/public/src/comp/core/Checkbox.ts
@@ -29,8 +29,6 @@ export class Checkbox extends Comp {
                 type: "checkbox",
                 className: "form-check-input clickable"
             }, null, this.valueIntf),
-            // warning without this label element the entire control fails to render, and this is
-            // apparently related to bootstrap itself.
             new Label(this.label || "", {
                 className: "form-check-label clickable " + (this.label ? "checkboxLabel" : ""),
                 htmlFor: cbInput.getId(),

diff --git a/src/main/resources/public/src/comp/core/Selection.ts b/src/main/resources/public/src/comp/core/Selection.ts
@@ -8,8 +8,6 @@ export class Selection extends Comp {
 
     constructor(attribs: any, private label: string = null, public selectionOptions: any[] = null, public moreClasses: string, private outterClasses: string, private valueIntf: ValueIntf) {
         super(attribs, (valueIntf?.getState ? valueIntf?.getState() : null) || new State<any>(null));
-        // w-25 = width 25%
-        // https://hackerthemes.com/bootstrap-cheatsheet/#m-1
     }
 
     override preRender(): boolean | null {

diff --git a/src/main/resources/public/tailwind.config.js b/src/main/resources/public/tailwind.config.js
@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  prefix: 'tw-',
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
diff --git a/src/main/resources/public/vite.config.ts b/src/main/resources/public/vite.config.ts
@@ -55,6 +55,9 @@ export default defineConfig({
                 quietDeps: true
             },
         },
+
+        // Added as part of the tailwindcss setup
+        postcss: './postcss.config.js',
     },
     base: "/dist"
 });