Skip to content

styling-theming.md

Latest commit

 

History

History
62 lines (41 loc) · 2.8 KB

styling-theming.md

File metadata and controls

62 lines (41 loc) · 2.8 KB
title Styling and Theming
description Learn how to style your AppShell application using Tailwind CSS v4 and customize the theme

Styling and Theming

Styling is done using Tailwind CSS v4. AppShell exports a theme.css file which includes Tailor's preferred color palette and CSS variables.

To configure in your AppShell application, in your global.css or top-level tailwind css file, include this theme.css

Example:

@import "@tailor-platform/app-shell/theme.css"; /* <-- Include this line */
@import "tailwindcss";

After including this, your Application's Tailwind will apply the custom colors to to the utility classes.

E.g.

<div className="text-muted-foreground bg-muted">...</div>

Note, many of these are default Tailwind colors, but there are some differences. If you omit this, much of the UI will look the same, but we will lose some of the Tailor-preferred colors.

A note on AppShell component class names

AppShell components use Tailwind utility classes for their styling. Tailwind classes are generated at build-time, so stylesheet for AppShell components is already built and is separate to the Tailwind stylesheet generated for your application.

In CSS, the order of style-definition affects the final styles which are computed for an element. Tailwind takes this into account when generating its stylesheet, however because it does not know that there's already a Tailwind-generated stylesheet included in the browser (AppShell's styles), there would be incorrect ordering of style definitions, and clashes can (though do not always) occur.

To avoid this situation, and to ensure correct style resolution, AppShell components use a class prefix "astw" (AppShell TailWind) to avoid clashes.

This is important to note for developing in AppShell.

Z-Index Layering

AppShell defines CSS custom properties for z-index values so you can adjust the stacking order to integrate with other libraries or overlays in your application.

These properties are defined in :root and can be overridden in your own CSS:

Property Default Used for
--z-sidebar 10 The sidebar panel
--z-sidebar-rail 20 The sidebar collapse rail / toggle button
--z-popup 50 Portal-based popups (Menu, Select, Combobox, Autocomplete, Tooltip)
--z-overlay 50 Modal overlays (Dialog, Sheet)

Example: Raising popup z-index

/* your-app/globals.css */
@import "@tailor-platform/app-shell/theme.css";
@import "tailwindcss";

:root {
  --z-popup: 100;
}