Pegasus CSS

Pegasus historically shipped a set of CSS classes prefixed with pg- to provide compatibility across its supported CSS frameworks (Tailwind, Bootstrap, and Bulma). These classes are proxies for similar classes provided by the underlying frameworks themselves, and are created using the Sass @extend helper or Tailwind’s @apply helper.

Default Behavior (Tailwind)

By default, Pegasus outputs native Tailwind and DaisyUI classes in your templates.

For example, a button that previously used pg-button-primary will output btn btn-primary (a DaisyUI class). A title that used pg-title will output text-3xl font-bold mb-2 (Tailwind utilities).

This means you can style your app using the standard Tailwind and DaisyUI documentation directly, without needing to learn or look up the Pegasus-specific class names.

Legacy pg- Classes

If you prefer to continue using pg- prefixed classes, you can enable them by checking the “Use Pegasus CSS classes” checkbox in your project configuration. This will output the pg- classes in your templates instead of native Tailwind classes.

This is useful if:

• You are using Bootstrap or Bulma (where pg- classes are always used).
• You have an existing project with significant custom code using pg- classes and aren’t ready to migrate yet.

Migrating from pg- Classes to Native Classes

If you have an existing project using pg- classes and want to switch to native Tailwind/DaisyUI classes, there are two steps:

1. Uncheck “Use Pegasus CSS classes” in your project settings.

In your project on saaspegasus.com, go to Developer Setup → Advanced and uncheck Use Pegasus CSS classes. This tells Pegasus to output native Tailwind/DaisyUI classes in future builds.

2. Migrate your existing templates and JavaScript files.

Use the pegasus migrate-css command from the Pegasus CLI to convert any pg- classes in your own code to their native equivalents:

# Preview what would change
pegasus migrate-css --dry-run

# Do the migration
pegasus migrate-css

The command reads class mappings from your project’s assets/styles/pegasus/tailwind.css, so it should match the version of Pegasus your project was built with. See the pegasus-cli README for additional options (e.g. --css-file and --search-dir for non-standard project layouts).

Class Reference

Pegasus CSS classes are defined in assets/styles/pegasus/<framework>.sass/css. The following table shows the most common classes and their values across frameworks.

Pegasus Class	Description	Value in Bootstrap	Value in Tailwind	Value in Bulma
pg-columns	Wrapper for columns	row gy-4	flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0	columns
pg-column	Individual column	col-md	flex-1	column
pg-title	A title	h3 (element)	text-3xl font-bold mb-2	title
pg-subtitle	A subtitle	lead	text-xl mb-1	subtitle
pg-button-***	A styled button	btn btn-***	btn btn-*** (from daisyUI)	button is-***
pg-text-***	Colored text	text-***	text-*** (from daisyUI)	has-text-***

For a full list of classes and their mappings, see assets/styles/pegasus/ in your project.

Classes Not Covered by Migration

Some pg- classes use more complex CSS (not simple utility mappings) and are not affected by the migration. These classes remain as pg- in all builds and should continue to be referenced by their pg- names:

• pg-breadcrumbs, pg-breadcrumb-active — breadcrumb navigation with nested styling rules.
• pg-select — wraps a nested <select> element with framework-specific styles.
• pg-bg-danger, pg-bg-success — dynamically constructed at runtime.
• Chat components (pg-chat-*, pg-message-*, pg-avatar) — complex component styles for the chat UI.

These classes are defined in assets/styles/pegasus/ and assets/styles/app/ and can be customized there.