As discussed in https://gitlab.com/groups/gitlab-org/-/epics/10980#note_1659285411, the first step towards integrating Tailwind CSS in our projects will be to deprecate the existing utils library. Essentially, we'll do this by replacing `gl-` prefixes with `gl-deprecated-` to make it clear that those utils should not be used anymore, and that Tailwind's should be used instead. This will let us reuse the `gl-` prefix for Tailwind CSS utils without risks of conflicts. We'll proceed one mixins file at a time to avoid an huge GitLab integration MR. As a given set of mixins is deprecated, the corresponding Tailwind CSS core plugin can be enabled so that we can start using the new utils right away. ### Summary Updated December, 4th 2023 **Total changes:** 20,824 | File | Files changed | Utils changed | Tailwind [core plugins](https://tailwindcss.com/docs/configuration#core-plugins) needed | Number of custom utils needed | | ------ | ------ | ------ | ------ | ------ | | `spacing.scss` | `2613` | `7627` | `margin`, `padding`, `gap` | `1` | | `display.scss` | `1404` | `2816` | `display` | `0` | | `flex.scss` | `1099` | `2111` | `flex`, `flexBasis`, `flexDirection`, `flexGrow`, `flexShrink`, `flexWrap`, `justifyContent`, `justifyItems`, `justifySelf`, `alignItems`, `alignSelf` | `0` | | `typography.scss` | `999` | `1636` | `fontSize`, `lineHeight`, `letterSpacing` | `30` | | `color.scss` | `891` | `1582` | `textColor` | `0` | | `sizing.scss` | `699` | `1265` | `maxWidth`, `minWidth`, `width`, `minHeight`, `maxHeight`, `height` | `0` | | `border.scss` | `603` | `1017` | `borderCollapse`, `borderColor`, `borderOpacity`, `borderRadius`, `borderSpacing`, `borderStyle`, `borderWidth` | `1` | | `text.scss` | `503` | `810` | `textAlign`, `textTransform`, `textDecoration`, `textDecorationColor`, `textOverflow`, `textIndent`, `whitespace`, `wordBreak` | `3` | | `background.scss` | `333` | `487` | `backgroundColor`, `backgroundPosition`, `backgroundSize`, `backgroundRepeat`, `backdropBlur` | `3` | | `position.scss` | `281` | `445` | `position` | `0` | | `vertical-align` | `150` | `258` | `verticalAlign` | `0` | | `overflow.scss` | `134` | `160` | `overflow` | `0` | | `cursor.scss` | `88` | `111` | `cursor` | `0` | | `box-shadow.scss` | `80` | `94` | `boxShadow`, `boxShadowColor` | ? | | `list-style.scss` | `67` | `77` | `listStylePosition`, `listStyleType` | `0` | | `z-index.scss` | `52` | `64` | `zIndex` | `0` | | `svg.scss` | `38` | `48` | `fill`, `stroke` | `3` | | `grid.scss` | `38` | `48` | `gridAutoColumns`, `gridAutoFlow`, `gridAutoRows`, `gridColumn`, `gridColumnEnd`, `gridColumnStart`, `gridRow`, `gridRowEnd`, `gridRowStart`, `gridTemplateColumns`, `gridTemplateRows` | `0` | | `accessibility.scss` | `38` | `48` | `accessibility` | `0` | | `transition.scss` | `32` | `44` | `transitionProperty`, `transitionDuration`, `transitionTimingFunction` | `0` | | `opacity.scss` | `31` | `42` | `opacity` | `0` | | `pointer-events.scss` | `22` | `29` | `pointerEvents` | `0` | | `visibility.scss` | `19` | `24` | `visibility` | `0` | | `animation.scss` | `16` | `22` | `animation` | `1` | | `transform.scss` | `19` | `22` | `transform` | `0` | | `outline.scss` | `10` | `11` | `outlineStyle` | ? | | `clearfix.scss` | `7` | `8` | `clear` | `0` | | `content.scss` | `4` | `7` | `content` | `0` | | `user-select.scss` | `4` | `6` | `userSelect` | `0` | | `table.scss` | `2` | `2` | `tableLayout` | `0` | | `appearance.scss` | `2` | `2` | `appearance` | `1` | | `isolation.scss` | `1` | `1` | `isolation` | `0` | | `mix-blend-mode.scss` | `0` | `0` | | `0` | | `masks.scss` | `0` | `0` | | `0` | ### CSS Utilities that are a 1:1 match with Tailwind Here is a list of utilities that are a 1:1 match with Tailwind. This list was generated by https://gitlab.com/peterhegman/tailwind-and-gitlab-ui-utility-class-compare. We should be able to swap these utilities out without deprecating them since the match exactly. <details><summary>Click to expand</summary> | Class | Tailwind Core Plugin | |-------|----------------------| | .gl-appearance-none | appearance | | .gl-bg-white | backgroundColor | | .gl-bg-black | backgroundColor | | .gl-bg-gray-10 | backgroundColor | | .gl-bg-gray-100 | backgroundColor | | .gl-bg-gray-200 | backgroundColor | | .gl-bg-gray-300 | backgroundColor | | .gl-bg-gray-400 | backgroundColor | | .gl-bg-gray-500 | backgroundColor | | .gl-bg-gray-600 | backgroundColor | | .gl-bg-gray-700 | backgroundColor | | .gl-bg-gray-900 | backgroundColor | | .gl-bg-gray-950 | backgroundColor | | .gl-bg-blue-100 | backgroundColor | | .gl-bg-blue-200 | backgroundColor | | .gl-bg-blue-500 | backgroundColor | | .gl-bg-blue-600 | backgroundColor | | .gl-bg-blue-700 | backgroundColor | | .gl-bg-green-50 | backgroundColor | | .gl-bg-green-100 | backgroundColor | | .gl-bg-green-200 | backgroundColor | | .gl-bg-green-500 | backgroundColor | | .gl-bg-green-600 | backgroundColor | | .gl-bg-green-700 | backgroundColor | | .gl-bg-orange-50 | backgroundColor | | .gl-bg-orange-100 | backgroundColor | | .gl-bg-orange-200 | backgroundColor | | .gl-bg-orange-500 | backgroundColor | | .gl-bg-orange-600 | backgroundColor | | .gl-bg-orange-700 | backgroundColor | | .gl-bg-purple-50 | backgroundColor | | .gl-bg-purple-800 | backgroundColor | | .gl-bg-red-50 | backgroundColor | | .gl-bg-red-100 | backgroundColor | | .gl-bg-red-200 | backgroundColor | | .gl-bg-red-500 | backgroundColor | | .gl-bg-red-600 | backgroundColor | | .gl-bg-red-700 | backgroundColor | | .gl-bg-no-repeat | backgroundRepeat | | .gl-border-none | borderStyle | | .gl-border-solid | borderStyle | | .gl-border-white | borderColor | | .gl-border-gray-10 | borderColor | | .gl-border-gray-50 | borderColor | | .gl-border-gray-300 | borderColor | | .gl-border-gray-400 | borderColor | | .gl-border-gray-500 | borderColor | | .gl-border-red-500 | borderColor | | .gl-border-orange-500 | borderColor | | .gl-border-green-500 | borderColor | | .gl-border-blue-300 | borderColor | | .gl-border-blue-500 | borderColor | | .gl-border-blue-600 | borderColor | | .gl-border-blue-700 | borderColor | | .gl-border-purple-300 | borderColor | | .gl-border-purple-700 | borderColor | | .gl-border-2 | borderWidth | | .gl-border-4 | borderWidth | | .gl-border-8 | borderWidth | | .gl-border-l-4 | borderWidth | | .gl-border-t-2 | borderWidth | | .gl-border-b-2 | borderWidth | | .gl-border-r-2 | borderWidth | | .gl-text-gray-100 | textColor | | .gl-text-gray-200 | textColor | | .gl-text-gray-300 | textColor | | .gl-text-gray-400 | textColor | | .gl-text-gray-500 | textColor | | .gl-text-gray-600 | textColor | | .gl-text-gray-700 | textColor | | .gl-text-gray-800 | textColor | | .gl-text-gray-950 | textColor | | .gl-text-blue-200 | textColor | | .gl-text-blue-300 | textColor | | .gl-text-blue-400 | textColor | | .gl-text-blue-500 | textColor | | .gl-text-blue-700 | textColor | | .gl-text-blue-900 | textColor | | .gl-text-green-400 | textColor | | .gl-text-green-500 | textColor | | .gl-text-green-600 | textColor | | .gl-text-green-700 | textColor | | .gl-text-green-800 | textColor | | .gl-text-green-900 | textColor | | .gl-text-orange-300 | textColor | | .gl-text-orange-400 | textColor | | .gl-text-orange-500 | textColor | | .gl-text-orange-600 | textColor | | .gl-text-orange-700 | textColor | | .gl-text-orange-800 | textColor | | .gl-text-orange-900 | textColor | | .gl-text-red-300 | textColor | | .gl-text-red-500 | textColor | | .gl-text-red-600 | textColor | | .gl-text-red-700 | textColor | | .gl-text-red-800 | textColor | | .gl-text-red-900 | textColor | | .gl-text-purple-600 | textColor | | .gl-text-purple-700 | textColor | | .gl-text-purple-800 | textColor | | .gl-cursor-default | cursor | | .gl-cursor-grab | cursor | | .gl-cursor-grabbing | cursor | | .gl-cursor-text | cursor | | .gl-cursor-help | cursor | | .gl-flex-wrap | flexWrap | | .gl-flex-wrap-reverse | flexWrap | | .gl-flex-nowrap | flexWrap | | .gl-flex-shrink-0 | flexShrink | | .gl-flex-grow-0 | flexGrow | | .gl-opacity-0 | opacity | | .gl-overflow-hidden | overflow | | .gl-overflow-x-auto | overflow | | .gl-overflow-y-auto | overflow | | .gl-overflow-x-hidden | overflow | | .gl-overflow-x-scroll | overflow | | .gl-overflow-scroll | overflow | | .gl-overflow-auto | overflow | | .gl-overflow-visible | overflow | | .gl-pointer-events-none | pointerEvents | | .gl-pointer-events-auto | pointerEvents | | .gl-relative | position | | .gl-absolute | position | | .gl-static | position | | .gl-fixed | position | | .gl-sticky | position | | .gl-top-auto | position | | .gl-top-1 | position | | .gl-top-2 | position | | .gl-top-3 | position | | .gl-top-4 | position | | .gl-top-5 | position | | .gl-top-6 | position | | .gl-top-7 | position | | .gl-top-8 | position | | .gl-top-full | position | | .gl-right-auto | position | | .gl-right-1 | position | | .gl-right-2 | position | | .gl-right-3 | position | | .gl-right-4 | position | | .gl-right-5 | position | | .gl-right-6 | position | | .gl-right-7 | position | | .gl-bottom-1 | position | | .gl-bottom-2 | position | | .gl-bottom-3 | position | | .gl-bottom-4 | position | | .gl-bottom-5 | position | | .gl-bottom-6 | position | | .gl-bottom-7 | position | | .gl-left-auto | position | | .gl-left-1 | position | | .gl-left-2 | position | | .gl-left-3 | position | | .gl-left-4 | position | | .gl-left-5 | position | | .gl-left-6 | position | | .gl-left-7 | position | | .gl-float-left | float | | .gl-float-right | float | | .gl-w-auto | width | | .gl-w-2 | width | | .gl-w-3 | width | | .gl-w-4 | width | | .gl-w-5 | width | | .gl-w-6 | width | | .gl-w-7 | width | | .gl-w-8 | width | | .gl-w-9 | width | | .gl-w-10 | width | | .gl-w-11 | width | | .gl-w-12 | width | | .gl-w-13 | width | | .gl-w-15 | width | | .gl-w-20 | width | | .gl-w-28 | width | | .gl-w-30 | width | | .gl-w-31 | width | | .gl-w-full | width | | .gl-h-auto | height | | .gl-h-2 | height | | .gl-h-3 | height | | .gl-h-4 | height | | .gl-h-5 | height | | .gl-h-6 | height | | .gl-h-7 | height | | .gl-h-8 | height | | .gl-h-9 | height | | .gl-h-10 | height | | .gl-h-11 | height | | .gl-h-11-5 | height | | .gl-h-13 | height | | .gl-h-full | height | | .gl-min-w-1 | minWidth | | .gl-min-w-2 | minWidth | | .gl-min-w-3 | minWidth | | .gl-min-w-4 | minWidth | | .gl-min-w-5 | minWidth | | .gl-min-w-6 | minWidth | | .gl-min-w-7 | minWidth | | .gl-min-w-8 | minWidth | | .gl-min-w-9 | minWidth | | .gl-min-w-10 | minWidth | | .gl-min-w-20 | minWidth | | .gl-min-w-full | minWidth | | .gl-min-h-5 | minHeight | | .gl-min-h-6 | minHeight | | .gl-min-h-7 | minHeight | | .gl-min-h-8 | minHeight | | .gl-max-w-12 | maxWidth | | .gl-max-w-15 | maxWidth | | .gl-max-w-20 | maxWidth | | .gl-max-w-26 | maxWidth | | .gl-max-w-30 | maxWidth | | .gl-max-w-34 | maxWidth | | .gl-max-w-48 | maxWidth | | .gl-max-w-62 | maxWidth | | .gl-max-w-75 | maxWidth | | .gl-max-w-80 | maxWidth | | .gl-max-w-88 | maxWidth | | .gl-max-w-none | maxWidth | | .gl-max-w-full | maxWidth | | .gl-max-h-none | maxHeight | | .gl-max-h-full | maxHeight | | .gl-p-1 | padding | | .gl-p-2 | padding | | .gl-p-3 | padding | | .gl-p-4 | padding | | .gl-p-5 | padding | | .gl-p-6 | padding | | .gl-p-7 | padding | | .gl-p-9 | padding | | .gl-p-13 | padding | | .gl-px-1 | padding | | .gl-px-2 | padding | | .gl-px-3 | padding | | .gl-px-4 | padding | | .gl-px-5 | padding | | .gl-px-6 | padding | | .gl-px-7 | padding | | .gl-px-8 | padding | | .gl-px-9 | padding | | .gl-pr-1 | padding | | .gl-pr-2 | padding | | .gl-pr-3 | padding | | .gl-pr-4 | padding | | .gl-pr-5 | padding | | .gl-pr-6 | padding | | .gl-pr-7 | padding | | .gl-pr-8 | padding | | .gl-pr-9 | padding | | .gl-pr-10 | padding | | .gl-pl-1 | padding | | .gl-pl-2 | padding | | .gl-pl-3 | padding | | .gl-pl-4 | padding | | .gl-pl-5 | padding | | .gl-pl-6 | padding | | .gl-pl-7 | padding | | .gl-pl-8 | padding | | .gl-pl-9 | padding | | .gl-pl-10 | padding | | .gl-pl-11 | padding | | .gl-pl-11-5 | padding | | .gl-pl-12 | padding | | .gl-pt-1 | padding | | .gl-pt-2 | padding | | .gl-pt-3 | padding | | .gl-pt-4 | padding | | .gl-pt-5 | padding | | .gl-pt-6 | padding | | .gl-pt-7 | padding | | .gl-pt-8 | padding | | .gl-pt-9 | padding | | .gl-pt-11 | padding | | .gl-pt-12 | padding | | .gl-pt-13 | padding | | .gl-pb-1 | padding | | .gl-pb-2 | padding | | .gl-pb-3 | padding | | .gl-pb-4 | padding | | .gl-pb-5 | padding | | .gl-pb-6 | padding | | .gl-pb-7 | padding | | .gl-pb-8 | padding | | .gl-pb-9 | padding | | .gl-pb-11 | padding | | .gl-pb-13 | padding | | .gl-py-1 | padding | | .gl-py-2 | padding | | .gl-py-3 | padding | | .gl-py-4 | padding | | .gl-py-5 | padding | | .gl-py-6 | padding | | .gl-py-7 | padding | | .gl-py-8 | padding | | .gl-py-13 | padding | | .gl-m-2 | margin | | .gl-m-3 | margin | | .gl-m-4 | margin | | .gl-m-5 | margin | | .gl-m-7 | margin | | .gl-m-auto | margin | | .gl-mt-auto | margin | | .gl-mt-1 | margin | | .gl-mt-2 | margin | | .gl-mt-3 | margin | | .gl-mt-4 | margin | | .gl-mt-5 | margin | | .gl-mt-6 | margin | | .gl-mt-7 | margin | | .gl-mt-8 | margin | | .gl-mt-9 | margin | | .gl-mt-11 | margin | | .gl-mr-auto | margin | | .gl-mr-1 | margin | | .gl-mr-2 | margin | | .gl-mr-3 | margin | | .gl-mr-4 | margin | | .gl-mr-5 | margin | | .gl-mr-6 | margin | | .gl-mr-7 | margin | | .gl-mb-auto | margin | | .gl-mb-1 | margin | | .gl-mb-2 | margin | | .gl-mb-3 | margin | | .gl-mb-4 | margin | | .gl-mb-5 | margin | | .gl-mb-6 | margin | | .gl-mb-7 | margin | | .gl-mb-8 | margin | | .gl-mb-9 | margin | | .gl-mb-11 | margin | | .gl-mb-12 | margin | | .gl-ml-auto | margin | | .gl-ml-1 | margin | | .gl-ml-2 | margin | | .gl-ml-3 | margin | | .gl-ml-4 | margin | | .gl-ml-5 | margin | | .gl-ml-6 | margin | | .gl-ml-7 | margin | | .gl-ml-11 | margin | | .gl-my-auto | margin | | .gl-my-1 | margin | | .gl-my-2 | margin | | .gl-my-3 | margin | | .gl-my-4 | margin | | .gl-my-5 | margin | | .gl-my-6 | margin | | .gl-my-7 | margin | | .gl-my-8 | margin | | .gl-my-9 | margin | | .gl-my-11 | margin | | .gl-my-12 | margin | | .gl-mx-auto | margin | | .gl-mx-1 | margin | | .gl-mx-2 | margin | | .gl-mx-3 | margin | | .gl-mx-4 | margin | | .gl-mx-5 | margin | | .gl-mx-6 | margin | | .gl-mx-7 | margin | | .gl-mx-8 | margin | | .gl-gap-1 | gap | | .gl-gap-2 | gap | | .gl-gap-3 | gap | | .gl-gap-4 | gap | | .gl-gap-5 | gap | | .gl-gap-6 | gap | | .gl-gap-7 | gap | | .gl-fill-blue-200 | fill | | .gl-fill-blue-500 | fill | | .gl-fill-gray-100 | fill | | .gl-fill-gray-200 | fill | | .gl-fill-gray-400 | fill | | .gl-fill-gray-600 | fill | | .gl-fill-gray-700 | fill | | .gl-fill-green-500 | fill | | .gl-fill-green-700 | fill | | .gl-stroke-white | stroke | | .gl-stroke-gray-200 | stroke | | .gl-stroke-blue-400 | stroke | | .gl-text-left | textAlign | | .gl-text-center | textAlign | | .gl-text-right | textAlign | | .gl-isolate | isolation | </details>