Getting started

What is inside

Quick start

Open index.html directly - pages use the Tailwind browser build. For production, compile a small CSS file with the Tailwind CLI:

npm install
npm run build:css   # writes assets/css/tailwind.css
# then replace the browser script tag with:
<link rel="stylesheet" href="assets/css/tailwind.css">

Folder structure

brand-name-11/
├── index.html            home page (Card Grid)
├── documentation.html
├── admin/                dashboard, analytics, orders, calendar, kanban ...
├── tools/ components/ helpers/ utilities/   70 pages x 20 examples
├── examples/             41 example pages
├── forms/                full forms
├── effects/  layouts/  icons/
└── assets/
    ├── css/  theme.css, ui.css, template.css, effects.css
    ├── js/
    └── img/   SVG artwork

Change colours, fonts and corners

Everything visual comes from the tokens in assets/css/theme.css. Change a value and every page follows:

:root {
  --wt-primary: #7c3aed;
  --wt-primary-rgb: 124, 58, 237;
  --wt-secondary: #c026d3;
  --wt-accent: #22d3ee;
  --wt-radius: 0.625rem;
  --wt-font-heading: "Kanit", system-ui, sans-serif;
}

Dark mode: the moon button switches data-ui-theme on the <html> element and remembers the choice. Set data-ui-theme="dark" in the markup to make dark the default.

How the Tailwind CSS version works

Tailwind CSS utilities (browser build, plus a ready config for the Tailwind CLI) with a small component layer.

• Utilities are Tailwind classes (flex items-center gap-4). Components such as btn, card and modal come from assets/css/ui.css, written with the Tailwind theme tokens.
• Theme colours are registered with @theme, so bg-primary/25, text-muted and border-primary work everywhere.
• Interactive parts (dropdowns, modals, tabs ...) use data-ui-* attributes handled by assets/js/ui.js.
• Icons: Bootstrap Icons font. Fonts: Google Fonts (Kanit, Prompt).

Browser support

Older browsers still show every page; only newer effects (such as @property animations) fall back to static styles.

Credits

• Tailwind CSS - MIT licence
• Bootstrap Icons - MIT licence
• Google Fonts - SIL Open Font License
• All illustrations in assets/img are original SVG artwork made for this template.