Tailwind utility classes and BEM - new guidelines the team agreed on

List of rules we agreed on:

Page View

Page views: - Use inline classes

Components

  • Use BEM with @apply
  • If a className is used only once, we should inline the tw-* utility classes directly in the HTML
  • If a class is used once but the list becomes very long inline, use BEM with @apply
<style>
.ebo-dashboard-client-balances-error {
  @apply tw-flex tw-flex-col tw-justify-center tw-items-center;
  @apply tw-text-center tw-text-error tw-fill-current;
  @apply tw-border-t tw-border-solid tw-border-gray-6;
}
</style>
  • Split the single @apply into multiple lines to make it more readable, each line related to the same utility class group.
  • If a style is too specific leave it as it is
  • We should have parent block and BEM-like children in one .vue file
  • We can keep the BEM parent class in the HTML even if it doesn't do anything, directly. This way we can still have __error classes in the code if needed.