Update Wwws_project

2025-01-28 07:21:52 +00:00
parent 3c49536301
commit e7953e7212
1 changed files with 127 additions and 0 deletions
--- a/Wwws_project.md
+++ b/Wwws_project.md
@@ -141,3 +141,130 @@ When the web page is load the localdb settings is updating, then the app get loc
  </body>
  </html>
 ```
+### tailwindcss
+
+In adlinapi/package.json a script must be run in real time to watch any modification in js html mustache to reprocess the wwws/appname/src/ as well than any wco used.
+This will generate /src/static/css/twstyle.css
+ 
+```
+$ tribe=tribename webapp=appname yarn src:css 
+```
+
+To customize webpage and wco, all is set into tailwindcss.config.js. The file tribename/objects/wwws/itm/webappname.json contain a property tailwindcsscontent updated with the list of wco to watch for tailwindcss.
+
+
+```
+** @type {import('tailwindcss').Config} */
+const colors = require('tailwindcss/colors');
+const confwww= require('../itm/webappname.json');
+//  content: ["../adminapi/objects/wwws/admin/src/**/*.{html,js,mustache}","../adminapi/objects/wco/apxid/*.{html,js,mustache}"],
+
+module.exports = {
+  content: confwww.tailwindcsscontent,
+  theme: {
+    fontFamily: {
+      sans: ["questrial", "sans-serif"],
+      serif: ["quicksand", "serif"],
+    },
+   /* extend: {
+      colors: {
+        primary: {
+          DEFAULT: "#2e7fc8", // Couleur primaire principale
+          dark: "#218787", // Variante sombre de la primaire
+          light: "#6aa84f", // Variante claire de la primaire
+        },
+        secondary: {
+          DEFAULT: "#ffc332", // Couleur secondaire principale
+          accent: "#fa6a31", // Accentuation secondaire
+        },
+        neutral: {
+          800: "#1f2937",
+          600: "#374151",
+          content: "#ffffff",
+        }
+      },
+    },*/
+  },
+  plugins: [require("@tailwindcss/typography"), require("daisyui")],
+  daisyui: {
+    themes: ["dark", "light", "apxtri"], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
+    darkTheme: "dark", // name of one of the included themes for dark mode
+    base: true, // applies background color and foreground color for root element by default
+    styled: true, // include daisyUI colors and design decisions for all components
+    utils: true, // adds responsive and modifier utility classes
+    prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
+    logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
+    themeRoot: ":root", // The element that receives theme color CSS variables
+    themes: [
+      {
+        //check https://daisyui.com/theme-generator/ to customize
+        apxtri: {
+          primary: "#2e7fc8",
+          "primary-focus": "#218787",
+          "primary-content": "#ffffff",
+          secondary: "#ffc332",
+          "secondary-focus": "#fa6a31",
+          "secondary-content": "#ffffff",
+          accent: "#6aa84f",
+          "accent-focus": "#218787",
+          "accent-content": "#ffffff",
+          neutral: colors.gray[800],
+          "neutral-focus": colors.gray[600],
+          "neutral-content": "#ffffff",
+          "base-100": "#ffffff", // Fond principal
+          "base-200": "#f9fafb", // Fond secondaire
+          "base-300": "#d1d5db", // Fond tertiaire
+          "base-content": "#1f2937", // Texte principal
+          info: "#2e7fc8",
+          success: "#6aa84f",
+          warning: "#ffc332",
+          error: "#fa6a31",
+        },
+      },
+    ],
+  },
+};
+
+```
+
+The dev tailwindcss is store in /wwws/appname/src/static/css/twdevstyle.css
+
+```
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import 'daisyui';
+
+@Layer base {
+    @font-face{
+        font-family: 'questrial';
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url(../fonts/questrial-regular-webfont.woff2) format('woff2');
+    }
+    font-family:"questrial", system-ui, sans-serif;
+    @font-face{
+        font-family:'quicksand';
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url(../fonts/Quicksand-Light.woff2) format('woff2');
+    }
+}
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+  ::-webkit-scrollbar-track {
+    background: #2d3748;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #4a5568;
+    border-radius: 4px;
+  }
+
+  .transition-width {
+    transition: width 0.3s ease;
+  }
+
+```