Skip to content

tailwind-quickstart

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

tailwind-quickstart

README.md

PrimeUI Pro TaskBoard Angular Tailwind Quickstart

A minimal Angular application for starting with PrimeUI Pro TaskBoard for Angular using copied Tailwind UI parts and native HTML controls. It does not install PrimeNG or load the PrimeOne theme.

Run the App

From this directory:

corepack pnpm install
corepack pnpm dev

Set your PrimeUI Pro license key in src/environments/environment.ts:

export const environment = {
    primeuiLicense: 'your-license-key'
};

Keep your key out of version control. Open the local URL printed by the Angular CLI.

What the Example Shows

  • Explicit TaskBoard, Tailwind, style, and license setup
  • A controlled TaskBoard with reorderable columns and tasks
  • Add, edit, and delete actions through TaskBoard's exposed methods
  • A native HTML dialog and form controls styled with Tailwind utilities
  • Editable Tailwind card and column-header UI parts
  • Application-defined TaskBoard tokens with light and dark modes

Project Map

src/
├── main.ts                             Keep: license registration and bootstrap
├── styles.css                          Tailwind import, fixed theme tokens, and TaskBoard variables
├── app/components/primeui/taskboard/  Keep: editable Tailwind TaskBoard UI parts
├── app/components/shell/              Optional: quickstart topbar and footer
├── app/services/AppThemeService.ts    Optional: light and dark mode state
├── app/demo/taskboard/                Replace: board, native editor, and fixture data
└── app/app.ts                          Replace: one-page quickstart composition

No PrimeNG Dependency

The application uses native button, input, select, textarea, and dialog elements. package.json does not include primeng or @primeuix/themes.

Only @primeui/taskboard-style/style.css is registered in angular.json. The PrimeOne stylesheet is not used; fixed color, surface, focus, radius, and TaskBoard variables are defined in src/styles.css.

Adapt the Quickstart

The task model, columns, and fixture tasks are in src/app/demo/taskboard/data.ts. Replace those values with data from your store or API. Persistence stays in your application; update your store or backend when accepting board changes.

To replace the example, update src/app/app.ts, then delete src/app/demo/taskboard when it is no longer imported. Keep src/app/components/primeui/taskboard for the Tailwind card and header surfaces, or replace them with your own TaskBoard content.

Tailwind UI Parts

The TaskBoard UI parts in src/app/components/primeui/taskboard are copied into and owned by this application. Regenerate the complete Tailwind set with:

corepack pnpm dlx @primeui/cli add taskboard --framework angular --ui tailwind --output-dir src/app/components/primeui

This quickstart keeps only the advanced card and standard column header used by its page.

Commands

corepack pnpm dev
corepack pnpm build
corepack pnpm preview

Documentation