> For the complete documentation index, see [llms.txt](https://klassdocs.gitbook.io/klassapp-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://klassdocs.gitbook.io/klassapp-documentation/docs/css-consolidation-plan.md).

# CSS Consolidation Plan — KlassApp

> **Superseded for stack/tooling context.** Tailwind is now **v4.3.3** (CSS-first) and the bundler is **Vite 8** (Phase 3.5). Canonical SoT: `.cursor/rules/frontend.mdc`. Keep this plan for the consolidation *actions* (cards, grids, Toshi extract, landing triage); ignore Mix / Tailwind v1 / DaisyUI-upgrade framing below as historical.

## Current Landscape (updated Jul 2026)

| File / surface                     | Type                          | Role                                                   |
| ---------------------------------- | ----------------------------- | ------------------------------------------------------ |
| `resources/css/tailwind.css`       | Source (Tailwind v4 `@theme`) | Local Tailwind via `@vite` + `@tailwindcss/vite`       |
| `resources/assets/sass/app.scss`   | Source → Vite                 | Global app styles (plain CSS post–Phase 2b)            |
| `public/build/`                    | Vite hashed assets            | Production JS/CSS from `npm run build`                 |
| `public/css/dashboard-refresh.css` | Hand-written                  | Dashboard refresh tokens / shell / KPI                 |
| Toshi UI                           | Package + published CSS       | `toshi-ui.css` via `vendor:publish --tag=toshi-ui-css` |
| Landing pages                      | Blade + Play CDN              | `landing.blade.php` / `landing2.blade.php`             |

## Constraint (historical)

~~**DaisyUI requires Tailwind v3.** The project is on Tailwind v1…~~ **Obsolete.** Project is on Tailwind **v4.3.3**. DaisyUI adoption remains a separate product decision; do not treat v1→v3 upgrade language as current work.

**Recommendation (still useful):** Prefer existing utilities + `dashboard-refresh.css` custom properties as the theming layer unless a new component library is explicitly scoped.

## Categorization

| #  | Rule / Pattern                                     | Location                                  | Action                | Reason                                          |
| -- | -------------------------------------------------- | ----------------------------------------- | --------------------- | ----------------------------------------------- |
| 1  | `:root` CSS variables (brand tokens)               | `dashboard-refresh.css:9-23`              | **Keep**              | Token layer for all brand values                |
| 2  | `.dashboard-shell` (DM Sans + layout)              | `dashboard-refresh.css:25-31`             | **Keep**              | Clean, modern, used by dashboards               |
| 3  | `.dashboard-kpi-*` (cards, values, labels)         | `dashboard-refresh.css:191-250`           | **Keep**              | Working, properly themed                        |
| 4  | `.dashboard-themed-sidebar`                        | `dashboard-refresh.css:282+`              | **Keep**              | DM Sans applied correctly                       |
| 5  | `body { font-family }`                             | `dashboard-refresh.css`                   | **Keep**              | Fixes M1                                        |
| 6  | Button patterns (4 variants)                       | admin styles + inline                     | **Consolidate**       | Audit L3 — unify into CSS classes               |
| 7  | Empty state wordings                               | Dashboard blades                          | **Standardize**       | Audit L2 — one pattern                          |
| 8  | Card padding (3 values)                            | Dashboard blades                          | **Unify**             | Audit M2 — use consistent Tailwind              |
| 9  | Grid systems (2 competing)                         | Dashboard blades                          | **Unify**             | Audit M3 — pick one approach                    |
| 10 | Hardcoded px values (14+)                          | Dashboard blades                          | **Migrate**           | Audit M4 — use Tailwind scale                   |
| 11 | Chart canvas height                                | Dashboard blades                          | **Fix**               | Audit L1 — responsive height                    |
| 12 | Toshi inline styles                                | agent-toshi / package                     | **Extract**           | Prefer published `toshi-ui.css`                 |
| 13 | Toshi widget position                              | Livewire + CSS                            | **Extract**           | Fixed/absolute per known Livewire reparenting   |
| 14 | Landing page (2 versions)                          | `landing.blade.php`, `landing2.blade.php` | **Triage**            | Audit M6 — pick canonical first                 |
| 15 | Landing CTAs aria-label                            | Landing blades                            | **Add**               | Audit M7                                        |
| 16 | Testimonial alt text                               | Landing blades                            | **Add**               | Audit L4                                        |
| 17 | Typewriter motion                                  | Landing blades                            | **Fix**               | Audit L5 — prefers-reduced-motion               |
| 18 | Vite build artifacts                               | `public/build/`                           | **Leave**             | Regenerated by `npm run build`, don't hand-edit |
| 19 | Legacy compiled `public/css/app.css` / `admin.css` | Artifacts                                 | **Leave / deprecate** | Historical Mix outputs; layouts use `@vite`     |

## Execution Order

### Phase A — Admin Dashboard (address M2, M3, M4, L1, L2, L3)

1. Unify card padding to `p-5` (Tailwind spacing scale)
2. Pick one grid system: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4`
3. Replace hardcoded inline padding/margin with Tailwind classes
4. Fix chart canvas: `h-64` instead of fixed `250px`
5. Standardize empty states: `"No {item} yet."`
6. Consolidate button patterns into CSS classes based on dashboard-refresh.css tokens

### Phase B — Toshi Widget (address M5, L6)

1. Prefer package + published `toshi-ui.css` over Blade-only inline styles
2. Keep shared tokens in dashboard-refresh / package CSS
3. Use `position: fixed/absolute` for layout-critical Toshi chrome (Livewire reparenting)

### Phase C — Landing Page (address M6, M7, L4, L5)

1. Wait for canonical version decision
2. Add aria-labels, alt text, prefers-reduced-motion

## Files NOT to modify by hand

* `public/build/**` — Vite hashed output
* Any `node_modules/` or `vendor/` CSS (except republish via Artisan for package assets)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://klassdocs.gitbook.io/klassapp-documentation/docs/css-consolidation-plan.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.