Tailwind FirstSpirit Integration

Seleted utility classes can be added to components within the FirstSpirit CMS. This gives the editor better control over the content layout for different breakpoints.

This document describes the utility classes and the expected effects.

The utility classe names could not be used in FirstSpirit directly. But the naming is relatively self explaining:

FirstSprit value Tailwind class
COLSPAN_3 colspan-3
COLSPAN_SM_3 sm:colspan-3
... ...

Grid Layout

If a component is placed inside a GridContainer the following classes can be used to control the components layout within the grid.

Tailwind Docs: https://tailwindcss.com/docs/grid-template-columns

COLSPAN

  • COLSPAN_12
  • COLSPAN_SM_2 - COLSPAN_SM_12
  • COLSPAN_XL_2 - COLSPAN_XL_12

The colspan-{x} classes define the number of grid columns used by the component. Currently the grid is divided into 12 columns.

Tailwind Docs: https://tailwindcss.com/docs/grid-column

ROWSPAN

  • ROWSPAN_1 - ROWSPAN_4
  • ROWSPAN_SM_1 - ROWSPAN_SM_4
  • ROWSPAN_XL_1 - ROWSPAN_XL_4

The rowspan-{x} classes define the number of grid rows used by the component.

Tailwind Docs: https://tailwindcss.com/docs/grid-row

ORDER

  • ORDER_1 - ORDER_12
  • ORDER_LAST, ORDER_FIRST, ORDER_NONE
  • ORDER_SM_1 - ORDER_SM_12
  • ORDER_SM_LAST, ORDER_SM_FIRST, ORDER_SM_NONE
  • ORDER_XL_1 - ORDER_XL_12
  • ORDER_XL_LAST, ORDER_XL_FIRST, ORDER_XL_NONE

The order-{x} classes are used to modify the component order inside the grid. This can be used to rearrange components for different breakpoints, without duplicating the grid for different breakpoints.

Hint

The order-none class is used to reset the order to the default oder, given by the components order within the grid. This class is used if you want to limit the effects of the order-{x} classes to a single breakpoint.
example: order-last sm:order-none places the component last in order for the mobile breakpoint.

Tailwind Docs: https://tailwindcss.com/docs/order

VISIBLE

  • VISIBLE, HIDDEN
  • VISIBLE_SM, HIDDEN_SM
  • VISIBLE_XL, HIDDEN_XL

This should need no further explanation...

Tailwind Docs: https://tailwindcss.com/docs/visibility