Add conceptual primer for reading utility classes

Chad Lavimoniererequested to merge
docs-tailwind-utility-class-primer into main

What does this MR do?

Adds a short primer to https://design.gitlab.com/product-foundations/tailwind-utilities for designers with no Tailwind background, as proposed in #3591 (closed).

Scott's CSS docs in !6278 (merged) cover how to apply a utility but not how to read one, so I've cut this draft down to the parts those docs don't have:

  1. How a class name is built: the gl- prefix, the property abbreviation, and the token step, with gl-mt-4, gl-bg-feedback-danger, gl-py-5, and gl-text-lg taken apart.
  2. A callout for people who already know Tailwind, since stock mt-4 is 16px and ours is 12px.
  3. That a utility class and a Figma variable are the same design token.
  4. How to find a class starting from the design value rather than from a guessed name.

The earlier version of this MR also explained what the numbers mean, what to do when no utility exists, and a list of general tips. All of that is now on the CSS page or in the spacing code reference, so this links there instead of repeating it.

Closes #3591 (closed)

Related

Edited by Chad Lavimoniere

Merge request reports