Styling

Lynx supports common styling tools from the web ecosystem through Rsbuild. You can configure them directly with Rsbuild:

CSS Modules: Create locally scoped CSS classes to avoid naming conflicts and improve maintainability.
Global CSS: Use familiar, traditional CSS. As your app grows, consider stylesheet size and how to manage global rules.
CSS pre-processors: Extend CSS with variables, nesting and other features using Sass, Less or similar tools.
PostCSS: Transform CSS through plugins.
Tailwind CSS: Build custom designs by composing utility classes.

These tools process how you write and transform styles; Lynx determines which CSS features can render. See Applying Styles. CSS is parsed and encoded into the bundle. enableRemoveCSSScope, enableCSSInheritance and enableCSSInvalidation control component scoping, inheritance and style re-evaluation.

Using Tailwind CSS in Lynx

Tailwind CSS requires @lynx-js/tailwind-preset to filter utilities Lynx cannot render and adapt those that need different implementations. For general usage, follow Rsbuild's Tailwind CSS guide.

Use Tailwind CSS v3

@lynx-js/tailwind-preset requires Tailwind CSS v3, used as a PostCSS plugin. Tailwind v4 packages @tailwindcss/postcss, @tailwindcss/vite and @tailwindcss/cli do not work with this preset.

Install Tailwind CSS and the Lynx preset:

npm

yarn

pnpm

bun

deno

npm install -D tailwindcss@^3 @lynx-js/tailwind-preset

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
  },
};

Add the Lynx preset to the Tailwind configuration:

tailwind.config.js

import lynxPreset from '@lynx-js/tailwind-preset';

export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  presets: [lynxPreset],
};

Warning

@lynx-js/tailwind-preset is not yet stable. If a utility that should work does not, report it to lynx-stack.

The example below shows Tailwind CSS in a Lynx app:

#Styling

#Using Tailwind CSS in Lynx

Styling

Using Tailwind CSS in Lynx