Skip to content
Snippets Groups Projects
Commit bbef45fe authored by Lukas Eipert's avatar Lukas Eipert
Browse files

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.
parent e1449841
No related branches found
No related tags found
1 merge request!149128Migrate border-style utils to tailwind
/* stylelint-disable scss/at-rule-no-unknown */
@tailwind base;
@tailwind components;
@tailwind utilities;
.gl-border {
@apply gl-border-gray-100;
@apply gl-border-solid;
}
/*
Components layer:
https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes
.gl-border\! {
@apply gl-border !important;
@apply gl-border-gray-100 !important;
@apply gl-border-solid !important;
}
The components layer will be rendered _before_ the utilities,
so that utilities can overwrite values
*/
@layer components {
/*
our gl-border shorthands do a little more than tailwinds.
in order not to conflict with other border related properties
(color, width), we need to define them _before_ the tailwind utils.
*/
.gl-border {
@apply gl-border-gray-100;
@apply gl-border-solid;
}
.gl-border-b {
@apply gl-border-b-gray-100;
@apply gl-border-b-solid;
}
.gl-border\! {
@apply gl-border !important;
@apply gl-border-gray-100 !important;
@apply gl-border-solid !important;
}
.gl-border-b\! {
@apply gl-border-b !important;
@apply gl-border-b-gray-100 !important;
@apply gl-border-b-solid !important;
}
.gl-border-b {
@apply gl-border-b-gray-100;
@apply gl-border-b-solid;
}
.gl-border-l {
@apply gl-border-l-gray-100;
@apply gl-border-l-solid;
}
.gl-border-b\! {
@apply gl-border-b !important;
@apply gl-border-b-gray-100 !important;
@apply gl-border-b-solid !important;
}
.gl-border-l\! {
@apply gl-border-l !important;
@apply gl-border-l-gray-100 !important;
@apply gl-border-l-solid !important;
}
.gl-border-l {
@apply gl-border-l-gray-100;
@apply gl-border-l-solid;
}
.gl-border-r {
@apply gl-border-r-gray-100;
@apply gl-border-r-solid;
}
.gl-border-l\! {
@apply gl-border-l !important;
@apply gl-border-l-gray-100 !important;
@apply gl-border-l-solid !important;
}
.gl-border-r\! {
@apply gl-border-r !important;
@apply gl-border-r-gray-100 !important;
@apply gl-border-r-solid !important;
}
.gl-border-r {
@apply gl-border-r-gray-100;
@apply gl-border-r-solid;
}
.gl-border-r\! {
@apply gl-border-r !important;
@apply gl-border-r-gray-100 !important;
@apply gl-border-r-solid !important;
}
.gl-border-t {
@apply gl-border-t-gray-100;
@apply gl-border-t-solid;
}
.gl-border-t\! {
@apply gl-border-t !important;
@apply gl-border-t-gray-100 !important;
@apply gl-border-t-solid !important;
}
.gl-border-t {
@apply gl-border-t-gray-100;
@apply gl-border-t-solid;
}
.gl-border-t\! {
@apply gl-border-t !important;
@apply gl-border-t-gray-100 !important;
@apply gl-border-t-solid !important;
/*
Utilities layer:
https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities
*/
@layer utilities {
/* the border-style utils in tailwind do not allow for top, bottom, right, left specific values */
.gl-border-b-solid {
border-bottom-style: solid;
}
.gl-border-l-solid {
border-left-style: solid;
}
.gl-border-r-solid {
border-right-style: solid;
}
.gl-border-t-solid {
border-top-style: solid;
}
}
@tailwind utilities;
......@@ -27,6 +27,11 @@ export const mismatchAllowList = [
'.translate-y-0',
'.rotate-90',
'.rotate-180',
// the border-style utils in tailwind do not allow for top, bottom, right, left
'.border-b-solid',
'.border-l-solid',
'.border-r-solid',
'.border-t-solid',
// Our border shorthand classes are slightly different,
// we migrated them by prepending them to the tailwind.css
'.border',
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment