rajch_ales/MaalFlows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Consolidate app styles into Tailwind build

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
AGENTS.md
+3 -2
View File
@@ -5,7 +5,8 @@ Purpose: maintain the MaalFlows live chat widget and admin app.
## Project Shape
- 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`.
- Local check command: `npm.cmd run check`.
- 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:
- 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`.
- 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.