Tailwind

对应的官方页面地址

我们目前正在将基于 Web 的客户端迁移到 Tailwind。目前涉及 web vault，但长期计划是迁移桌面端和浏览器。

在开始使用 Tailwind 之前，我们建议您熟悉 Utility-First Fundamentals。博客文章 CSS Utility Classes and "Separation of Concerns" 也是一篇很好的读物，可以更好地理解 Utility first CSS 框架背后的动机和目标。

我们还建议使用 tailwind 文档的搜索功能来查找类和示例。

Bitwarden 的 Tailwind

我们已经定义了我们自己的 Tailwind 配置，它严格限制了颜色的使用，以支持多个主题。为了实现这一点，我们将 CSS 变量与 tailwind 配置结合使用。这使我们能够支持比 Tailwind 中内置的深色/浅色更多。

为此，我们不鼓励使用任意值，唯一的例外是支持现有的 Bootstrap 样式。在这种情况下，它应该被记录并添加为技术债务，作为从 Bootstrap 迁移的一部分来解决。

所有 Tailwind 类都需要以 tailwind 配置中定义的 tw- 为前缀。用法示例：<div class="tw-bg-background-alt2"> ... </div>

组件

由于 Tailwind 是一个实用优先的 CSS 框架，以避免代码重复，这会使设计难以维护，我们大量使用 Angular 组件来封装孤立的设计块。在大多数情况下，这些块是表示组件。

组件库

Bitwarden 的一项工程计划是组件库，旨在封装最常用的核心组件。

Storybook

我们使用 Storybook 来独立开发组件。要启动 Storybook 开发独立的组件，请在 client 存储库的根目录中运行 npm run storybook 命令。