Tailwind

Source component

Any element or component that uses Tailwind classes.

Target component

Where possible, use the specific Pluma component that matches the Tailwind class. When no specific Pluma component is available, use the generic PlumaBox component.

Additionally, all Pluma components support utility args (we call them "sprinkles").

Mapping

Spacing

In Tailwind, the margin and padding classes are named m-<value>, p-<value>, mt-<value>, etc.

When <value> is a specific number (e.g. m-1, p-2), it refers to the space token system, where the number is a multiple of 8px.

In Pluma, the value token system is similar in that they're multiples of 8px, but the scale of the numbers is based on 100. A Tailwind 1 is a Pluma 100, a Tailwind 1.5 is a Pluma 150, etc.

Tailwind margin and padding classes have variants for each side, and shorthands. Pluma supports the same variants and shorthands as sprinkle arguments:

Source:

<div class="mt-1"></div>

Target:

<PlumaBox @mt="100" />

Source:

<div class="py-2"></div>

Target:

<PlumaBox @py="200" />

For the space-x-<value> or space-y-<value> classes, they can be replaced with the @gap argument when paired with the right component (a flex or grid component).

Source:

<div class="space-y-1.5"></div>

Target:

<PlumaStack @gap="150" />

Source:

<div class="space-x-3"></div>

Target:

<PlumaInlineStack @gap="300" />

Display

Overflow

Position

Flexbox

Flex layouts using Tailwind’s classes of flex(display: flex), and flex-specific configuration styles can be replaced either by:

• purpose-built components, where possible, for example:
  • using the modal’s PlumaModalHeader, PlumaModalFooter etc within a PlumaModal (rather than using custom flex boxes)
• layout helper components, depending on the use case:
  • PlumaFlex - generic flexbox layout
  • PlumaStack - vertical (column) flexbox layout
  • PlumaInlineStack - horizontal (row) flexbox layout
• utility sprinkle arguments on Pluma components (see PlumaBox for all available arguments), for example:

Grid

Grid layouts should, where possible, use the PlumaGrid component.

Source:

<div class="grid grid-cols-3 gap-2"></div>

Target:

<PlumaGrid @columns={{3}} @gap="200" />

Typography

Any Tailwind classes used for font styles, sizes, weights, colors etc. should be replaced by:

• a typography component:
  • PlumaCode
  • PlumaHeading
  • PlumaEmphasis
  • PlumaParagraph
  • PlumaStrong
  • PlumaTextLabel
    • Note: form control components already render the correct labels via @label arguments, PlumaTextLabel can be used in other situations where we need to achieve a “label”-like text style
• if the above components don’t fit, PlumaText is a more generic component for setting text styles via props like @weight, @text
  • the above typography components all extend from PlumaText, and as such also support the same props for overriding a specific font style

Other typography-related classes might be replaced by sprinkles, e.g.:

Cursor/interaction