Using Tailwind CSS

Enhance is built using Tailwind CSS and includes a custom utility system designed specifically for the theme.

If you plan to customize the theme, understanding how Tailwind is implemented will help you maintain consistency with existing components and layouts.

Utility Class Prefix

All Tailwind utility classes used by Enhance are prefixed with:

ko-

Examples:

<div class="ko-flex ko-items-center ko-gap-4">

  ...

</div>

<div class="ko-rounded-base ko-shadow-even">

  ...

</div>

This prefix prevents conflicts with third-party apps, custom code, and Shopify app blocks.

Responsive Breakpoints

Enhance uses the following responsive breakpoints:

Example:

<div class="ko-grid laptop:ko-grid-cols-2 desktop:ko-grid-cols-4">

  ...

</div>

Working with Existing Components

When customizing the theme, we recommend following the existing utility-first approach used throughout the codebase.

Instead of creating new CSS whenever possible:

<div class="ko-flex ko-items-center ko-gap-4 ko-rounded-base">

  ...

</div>

This helps maintain consistency and reduces the amount of custom CSS required.

Best Practices

• Use existing utility classes whenever possible.

• Follow the ko- prefix convention for Tailwind utilities.

• Use theme color utilities instead of hardcoded colors.

• Use theme spacing and layout utilities before creating custom CSS.

• Keep custom CSS minimal and focused on project-specific requirements.

Important Note

Enhance's Tailwind configuration is designed specifically for the theme. If you modify the Tailwind configuration or generate custom builds, be sure to test thoroughly to ensure existing components and layouts continue to function as expected.