@swisper.ai/tailwind-config

The Echo DS Tailwind v4 theme and @source list, for apps that build their own Tailwind CSS. One import brings in Tailwind, the @swisper.ai/design-system theme and the @source lines that make Tailwind scan the Echo DS component packages, so their utilities land in the app's own stylesheet. It is a single CSS file with no JavaScript, and it needs a Tailwind v4 build in the app.

Boundary

Code belongs here if it decides how the Echo DS theme is wired into a Tailwind build, or which package sources Tailwind scans. Token values and the @theme block belong in @swisper.ai/design-system; a component's classes belong in its own package.

Install

npm install @swisper.ai/tailwind-config

No peer dependencies.

It depends on tailwindcss 4 and on the exact @swisper.ai/design-system version it was released with; design-system's @mui/material peer is used only by its MUI theme.

Setup

1. Install the Echo DS component packages the app uses, for example @swisper.ai/ui.

2. Add Tailwind v4 to the app's build, for example npm install -D @tailwindcss/vite and plugins: [tailwindcss()] in the Vite config.

3. In the app's CSS entry, import this file in place of @import 'tailwindcss':

   @import '@swisper.ai/tailwind-config/tailwind.css';

4. Render a component. Its classes now come from the app's build:

   import { Button } from '@swisper.ai/ui';
   
   <Button>Save</Button>;

Styles

The file imports @swisper.ai/design-system/src/tailwind.css (which imports tailwindcss) and adds @source lines for the src/ folders of @swisper.ai/design-system, ui, icons, web-chat-ui, cards-ui, web-file-preview and web-map. The paths are relative to this package's folder, so they find packages installed next to it in node_modules/@swisper.ai/. Tailwind still scans the app's own files as usual.

Use it instead of the component packages' prebuilt index.css, not as well: loading both ships Tailwind's preflight and the utilities twice, and the prebuilt copy can override the app's base styles.

Spacing

A number in a spacing class is pixels: gap-8 is 8px, not Tailwind's default 32px. The @swisper.ai/design-system README lists the scale.

API

| Export | Why it exists | | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- | | @swisper.ai/tailwind-config/tailwind.css | One import that gives an app Tailwind, the Echo DS theme and class scanning for every Echo DS component package. |

Troubleshooting

| Symptom | Cause | Fix | | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | Components render without layout or colors | Tailwind never scans the package. The @source paths only reach packages installed next to this one, which pnpm's isolated node_modules layout does not do | Add an @source for the package to your CSS entry, relative to that file: @source "../node_modules/@swisper.ai/ui/src"; | | Layout is right, but colors or radii are wrong or missing | The design-system theme isn't loaded, so theme utilities such as bg-paper-elevation-1 are empty | Import @swisper.ai/tailwind-config/tailwind.css (it loads the theme first) instead of tailwindcss alone | | Your own base styles (fonts, headings, resets) get overridden | The prebuilt index.css is loaded next to your own Tailwind build, and its preflight wins | Use one of the two: drop index.css and import tailwind.css | | Spacing looks wrong after upgrading (huge gaps, tiny icons) | A number in a spacing class is pixels: gap-8 is 8px, not Tailwind's default 32px | Write the pixel value you want | | Markdown rendered by @swisper.ai/web-chat-ui has no styles | The streamdown renderer's classes are scanned through a path that exists only inside the Echo DS repository | Add @source "../node_modules/streamdown/dist/*.js"; to your CSS entry, relative to that file | | Can't resolve '../../design-system/src/tailwind.css' | The app installs a different @swisper.ai/design-system version, so the one this package needs is nested inside it instead of next to it | Install the @swisper.ai/design-system version this package depends on (npm ls @swisper.ai/design-system shows both), or upgrade both together |

License

Apache-2.0