Tailwind

We are currently in the middle of migrating our web based clients over to Tailwind. Currently on the web vault project is affected but the long term plan is to migrate desktop and browser as well.

Before starting working with Tailwind we recommend that you get familiar with Utility-First Fundamentals. The blog article CSS Utility Classes and "Separation of Concerns" is also a good read to better understand the motivation and goals behind Utility first CSS frameworks.

We also recommend using the search functionality of the tailwind documentation to lookup classes and examples.

Tailwind at Bitwarden

We have defined our own tailwind config, which heavily restricts the color usage as a way to support multiple themes. To achieve this we use CSS variables in combination with the tailwind config. This allows us to support more than the built in dark/light support in Tailwind.

To this effort we heavily discourage the use of arbitrary values with the only exception being to support existing Bootstrap styles. In which case it should be documented and added as a tech debt to be tackled as part of the migration away from Bootstrap.

note

All Tailwind classes need to be prefixed by tw- as defined in the tailwind config.

Example usage: <div class="tw-bg-background-alt2"> ... </div>

Components

Since Tailwind is a Utility-First CSS framework to avoid code duplication which would make the design difficult to maintain we make heavy use of Angular Components to encapsulate isolated design blocks. In most cases these blocks are presentational components.

Component Library

One of the engineering initiatives at Bitwarden is the Component Library which aims to encapsulate the most commonly used core components.

Storybook

We use Storybook to develop components in isolation. To launch storybook run the npm run storybook command in the root of clients repository.