Skip to content

Migrate border-style utils to tailwind

Lukas 'ai-pi' Eipert requested to merge leipert-migrate-a-few-more-border-utils into master

What does this MR do and why?

Migrate border-style utils to tailwind

Tailwind doesn't allow to individually control the styles of borders (bottom, left, right, top). We use those utils, so let's move them to our custom list of utility definitions.

Furthermore we make use of the @layer component and @layer utilities for our custom component / utility definition, so that tailwind can properly prune those classes in the future.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

N/A

How to set up and validate locally

  1. yarn run tailwindcss:build
  2. Make sure that app/assets/builds/tailwind_all_the_way.css contains the gl-border utils towards the top, right after the @base definitions. The .gl-border-*-solid utils should be towards the bottom.
Edited by Lukas 'ai-pi' Eipert

Merge request reports