Consolidate app styles into Tailwind build

This commit is contained in:
rajchales-monito
2026-08-06 17:32:16 +02:00
parent 0058493a54
commit 74146c1ad8
5 changed files with 5 additions and 4 deletions
+3 -2
View File
@@ -5,7 +5,8 @@ Purpose: maintain the MaalFlows live chat widget and admin app.
## Project Shape ## Project Shape
- Main application file: `server.js`. - Main application file: `server.js`.
- Frontend assets: `public/widget.js`, `public/admin.js`, `public/admin.css`, `public/admin.html`. - Frontend assets: `public/widget.js`, `public/admin.js`, `public/admin.html`, `public/preview.html`.
- CSS source: `src/styles/tailwind.css` imports specialized admin styles from `src/styles/admin.css` and builds the single served stylesheet `public/tailwind.css`.
- Runtime: Node.js without a framework, SQLite through `better-sqlite3`. - Runtime: Node.js without a framework, SQLite through `better-sqlite3`.
- Local check command: `npm.cmd run check`. - Local check command: `npm.cmd run check`.
- Production app is proxied by nginx on `app.black-week.cz` to `127.0.0.1:3400`. - Production app is proxied by nginx on `app.black-week.cz` to `127.0.0.1:3400`.
@@ -57,7 +58,7 @@ npm.cmd run build:css
Rules: Rules:
- Treat `src/styles/tailwind.css` as the master style source from now on. - Treat `src/styles/tailwind.css` as the master style source from now on.
- `public/admin.css` is legacy/specialized CSS. Do not add new generic component styling there; migrate repeated UI patterns into Tailwind component classes instead. - `src/styles/admin.css` contains legacy/specialized admin CSS that is imported into the Tailwind build. Do not create or link standalone CSS files for app UI; migrate repeated UI patterns into `src/styles/tailwind.css` component classes instead.
- New screens and redesigned sections should be built with Tailwind utility classes or reusable classes from `@layer components`. - New screens and redesigned sections should be built with Tailwind utility classes or reusable classes from `@layer components`.
- Prefer reusable Tailwind component classes in `@layer components` over one-off CSS for repeated controls. - Prefer reusable Tailwind component classes in `@layer components` over one-off CSS for repeated controls.
- Repeated controls should share the same structure: icon before text, centered text, chevron on the right, consistent icon size/color/alignment, height, padding, border, radius, hover, and focus states. - Repeated controls should share the same structure: icon before text, centered text, chevron on the right, consistent icon size/color/alignment, height, padding, border, radius, hover, and focus states.
-1
View File
@@ -6,7 +6,6 @@
<title>MaalFlows Admin</title> <title>MaalFlows Admin</title>
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/tailwind.css"> <link rel="stylesheet" href="/tailwind.css">
<link rel="stylesheet" href="/admin.css">
</head> </head>
<body> <body>
<main class="shell"> <main class="shell">
+1 -1
View File
File diff suppressed because one or more lines are too long
+1
View File
@@ -1,4 +1,5 @@
@import "tailwindcss"; @import "tailwindcss";
@import "./admin.css";
@theme { @theme {
--color-brand: #0f8f6f; --color-brand: #0f8f6f;