样式

Lynx 支持通过 Rsbuild 接入 Web 生态常见的各类样式工具。你可以直接使用 Rsbuild 配置，包括：

CSS Modules：创建具有局部作用域的 CSS 类，以避免命名冲突并提高可维护性。
Global CSS：使用全局 CSS，沿用传统 CSS 的编写方式；随着应用增长，需要注意样式体积和全局规则的管理。
CSS 预处理器：使用 Sass、Less 等预处理器，通过变量、嵌套规则等特性扩展 CSS。
PostCSS：通过插件转换 CSS。
Tailwind CSS：通过组合工具类（utility classes）快速进行自定义设计。

这些工具处理样式的编写和转换，最终可使用的 CSS 能力仍由 Lynx 决定，见应用样式。CSS 会被解析并编码进 Bundle。组件作用域、继承和样式重新匹配分别由 enableRemoveCSSScope、enableCSSInheritance 和 enableCSSInvalidation 控制。

在 Lynx 中使用 Tailwind CSS

使用 Tailwind CSS 时，需要 @lynx-js/tailwind-preset 过滤 Lynx 不支持的工具类，并适配需要不同实现的部分。其余用法沿用 Rsbuild 的 Tailwind CSS 指南。

使用 Tailwind CSS v3

@lynx-js/tailwind-preset 需要 Tailwind CSS v3，以 PostCSS 插件的形式使用。Tailwind v4 的 @tailwindcss/postcss、@tailwindcss/vite 和 @tailwindcss/cli 不适用于这个 preset。

安装 Tailwind CSS 和 Lynx preset：

npm

yarn

pnpm

bun

deno

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

在项目根目录注册 PostCSS 插件：

postcss.config.js

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

在 Tailwind 配置中添加 Lynx preset：

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 仍不稳定。如果发现应当支持的工具类无法使用，请向 lynx-stack 反馈。

下面的示例展示了 Tailwind CSS 在 Lynx 中的用法：

#样式

#在 Lynx 中使用 Tailwind CSS

样式

在 Lynx 中使用 Tailwind CSS