Skip to content

Tailwind all the way!

Paul Gascou-Vaillancourt requested to merge tailwind-all-the-way-scss into main

What does this MR do?

chore(tailwind): fall back to preset's core plugins

This removes the corePlugins override from the internal Tailwind config, meaning that we now inherit from the preset's configuration. Essentially, this means that all but the preflight core plugins are enabled.

chore(tailwind): ensure base and components style are generated

style: fix Prettier formatting

With all Tailwind core plugins now enabled, the Tailwind Prettier plugin has more things to reformat.

refactor: migrate a few CSS utils to Tailwind

In a few instances, enabling all of Tailwind core plugins caused specificity issues in the stories, with responsive utils not being able to override the base ones. This migrates the problematic components' utils to Tailwind to prevent any confusion.

feat: Migrate to tailwind utilities internally

This migrates all @gitlab/ui components to use tailwind utilities instead. This should change nothing for consumers, they should be using tailwind anyhow or consume the dist/tailwind.css.

chore: Stop importing generated utils in storybook

Just in order to prevent collisions between tailwind and legacy utils.

Integration merge requests

Does this MR meet the acceptance criteria?

This checklist encourages the authors, reviewers, and maintainers of merge requests (MRs) to confirm changes were analyzed for conformity with the project's guidelines, security and accessibility.

Toggle the acceptance checklist

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidelines.
  • If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened (see integration merge requests above).
  • Added the ~"component:*" label(s) if applicable.

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • Security reports checked/validated by a reviewer from the AppSec team

Accessibility

If this MR adds or modifies a component, take a few moments to review the following:

  • All actions and functionality can be done with a keyboard.
  • Links, buttons, and controls have a visible focus state.
  • All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label for icons that have meaning or perform actions.
  • Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false" to aria-expanded="true" when an accordion is expanded.
  • Color combinations have sufficient contrast.
Edited by Lukas Eipert

Merge request reports