Publish internally used Tailwind utilities

What does this MR do?

• 249dacc7: docs: document ways to setup Tailwind CSS

  Outlines the necessity of either setting up Tailwind CSS in the consumers, or importing the built CSS files from @gitlab/ui.

• 211b9b84: feat: publish internal Tailwind utils

  @gitlab/ui now publishes a tailwind.css file containing the Tailwind utilities it uses internally. Consumers that wish to use GitLab UI components but don't need/want to setup Tailwind on their end may import this new stylesheet to ensure components are styled properly.

• 0351078e: build: cleanup utilities stylesheet build

  This cleans up the utility_classes.css compilation. We previously relied on an utility_classes.js entry point which only imported the utilities stylesheet. This ended up producing an empty Javascript file in the dist/ directory. From now on, Rollup compiles the source SCSS file directly and only outputs the CSS file and its sourcemap.

  To verify that this produces the same output:

  • Checkout the main branch: git checkout main.
  • Run yarn build.
  • Run git add -f dist/utility_classes.css
  • Checkout this branch: git checkout ship-tailwind-utils.
  • Run yarn build.
  • Verify that no changes are detected in dist/utility_classes.css.

Screenshots or screen recordings

Integration merge requests

• GitLab: mr_url
• CustomersDot: mr_url
• Status Page: mr_url

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.