Styling

Style a Shell app with Tailwind like the Shell, or with your own CSS framework, without breaking the Shell's look.

Your app's CSS runs on the same page as the Shell's navigation and header. The starter kit is set up so your styles apply only inside your app, and so it looks like it belongs in the Shell. Keep those settings, and your app can't restyle the Shell by accident.

The default: Tailwind, like the Shell

The starter kit uses Tailwind CSS 3.4, the same as the Shell. Four settings keep your styles inside your app:

Import ./index.css from src/App.tsx, so your styles ship with the app.
Wrap your app in FederatedAppRoot. It adds the gf-federated-app class that scopes everything.
Keep important: '.gf-federated-app' in tailwind.config.js, so utility classes apply only inside your app.
Keep corePlugins.preflight: false. Tailwind's base reset would otherwise reset the Shell's styles too. The kit includes a smaller reset that only touches your app.

The Shell loads the Geist font and a small set of neutral colours for your app. Your brand colour comes from theme.primaryColor in the manifest.

Look like the Shell

A light grey page with white panels on it.
Thin borders on inputs, buttons and tables.
Geist for text.
One accent colour, your primaryColor, used sparingly: the main button, links, the active tab.

Use another CSS framework

Bootstrap, MUI and other frameworks style the whole page, so loading one normally would restyle the Shell. Isolate it in a shadow root with the kit's FederatedStyleRoot:

src/App.tsx

import { FederatedStyleRoot } from "./lib/FederatedStyleRoot";
import bootstrapCss from "bootstrap/dist/css/bootstrap.min.css?inline";

export default function App() {
  return <FederatedStyleRoot css={bootstrapCss}>{/* your pages */}</FederatedStyleRoot>;
}

Import the framework's CSS with ?inline, and never also import it normally: that would load it onto the whole page.
Keep cssCodeSplit: false in vite.config.ts.
Pop-ups and modals that attach to document.body end up outside the shadow root and lose the framework's styles. Render them into an element inside FederatedStyleRoot.

Images

Import images from your code, such as import logo from "./assets/logo.svg", and they're bundled with the release. For your app's logo in the Shell header, use theme.logoUrl with an absolute https:// address.

Checklist

src/index.css is imported from App.tsx
The app is wrapped in FederatedAppRoot, or FederatedStyleRoot for another framework
tailwind.config.js keeps preflight: false and important: '.gf-federated-app'
Links use useAppPath, not paths starting with /