For more background on user-controlled styles, see the conceptual guide.

Notes

  1. For some of the styling options below, our themes include a helper function for mapping stored values to Tailwind utility classes. For example, see the function mapStylesToClassNames() in the Starter theme. You can extend or modify that mapping to match your styles classes, including to a different CSS framework of your choice.

  2. For specific options (currently width and height) we did not provide a mapping in the above helper function, since the proper CSS styles to apply for a given value differ by the element you're rendering. In this case, provide the appropriate mapping yourself. Links to examples are found below.

  3. In most cases, when a user chooses one of the values allowed (as defined in the model), the chosen value would be stored as-is in the content object (which the component code would than receive as argument) - except where detailed otherwise.

Size & Spacing

Size & Spacing Styles Panel

width

Allow a user to set the width of a component or a specific field to one of the allowed values.

Allowed values (in model): List of one or more of the values below, or '*' to allow all values.

Value
auto
narrow
wide
full

Stored value (in content object): Same as allowed values.

Example:

fields:
- type: style
  name: styles
  styles:
    self:
      width: ['narrow', 'wide']
    title:
      width: '*'

Mapping to Tailwind classes: Not available. See example of a custom mapping function mapMaxWidthStyles.TBD

height

Allowed values: List of one or more of the values below, or '*' to allow all values.

Value
auto
full
screen

Stored value: Same as allowed values in model definition.

Mapping to Tailwind classes: Not available. Not available. See example of a custom mapping function mapMinHeightStyles.TBD

padding

Allowed values:

  • The least restrictive option: specify tw to allow users to choose from all padding classes defined by Tailwind for each side.
  • Specify a string such as tw0:4 to allow choosing Tailwind padding classes between p-0 and p-4 for each side.
  • Use twx0:4 to allow selecting Tailwind horizontal padding classes between px-0 and px-4, or twy0:4 for the matching vertical classes.
  • Use a list of pattern strings to control horizontal and vertical options separately, e.g. ['twx0:8', 'twy0:16']

For each of the sides, the user can choose from any of the values allowed, e.g. different values for top and bottom within the allowed range.

Example:

  - type: style
    name: styles
    styles:
      self:
        padding: ['tw4:36']
        margin: ['tw0:36']

Stored values:

Stackbit will always store the chosen values for all sides as an array, in the order [top, bottom, left, right].

Here is an example of how the chosen values for width, height, padding and margin are stored in content files (e.g. in content/pages/index.md). Note that for each side, the relevant Tailwind class is provided.

    styles:
      self:
        width: wide
        height: auto
        padding:
          - pt-12
          - pb-12
          - pl-4
          - pr-4        
        margin:
          - mt-0
          - mb-0
          - ml-0
          - mr-0

margin

Allowed values & stored values for margins follow the same pattern as for padding, but the stored class names differ between padding and margin - see example above.

Layout

Layout Styles Panel

flexDirection

Allowed values: List of one or more of the values below, or '*' to allow all values

ValueTailwind ClassStyle
rowflex-rowflex-direction: row;
row-reverseflex-row-reverseflex-direction: row-reverse;
colflex-colflex-direction: column;
col-reverseflex-col-reverseflex-direction: column-reverse;

Stored value (in content object): Same as allowed values.

justifyContent

Allowed values: List of one or more of the values below, or '*' to allow all values

ValueTailwind ClassStyle
flex-startjustify-startjustify-content: flex-start;
flex-endjustify-endjustify-content: flex-end;
centerjustify-centerjustify-content: center;
space-betweenjustify-betweenjustify-content: space-between;
space-aroundjustify-aroundjustify-content: space-around;
space-evenlyjustify-evenlyjustify-content: space-evenly;

Stored value (in content object): Same as allowed values.

alignItems

Allowed values: List of one or more of the values below, or '*' to allow all values

ValueTailwind ClassStyle
flex-startitems-startalign-items: flex-start;
flex-enditems-endalign-items: flex-end;
centeritems-centeralign-items: center;
baselineitems-baselinealign-items: baseline;
stretchitems-stretchalign-items: stretch;

Stored value (in content object): Same as allowed values.

Frame Style (Borders)

Borders Styles Panel

borderRadius

Allowed values: List of one or more of the values below, or '*' to allow all values

ValueTailwind ClassStyle
nonerounded-noneborder-radius: 0px;
xx-smallrounded-smborder-radius: 0.125rem;
x-smallroundedborder-radius: 0.25rem;
smallrounded-mdborder-radius: 0.375rem;
mediumrounded-lgborder-radius: 0.5rem;
largerounded-xlborder-radius: 0.75rem;
x-largerounded-2xlborder-radius: 1rem;
xx-largerounded-3xlborder-radius: 1.5rem;
fullrounded-fullborder-radius: 9999px;

Stored value (in content object): Same as allowed values.

borderWidth

Allowed Values:

  • *: Any border size
  • 0:4: Any border size between 0px and 4px
  • 0:8:2: Any border size between 0px and 8px in steps of 2px. Same as specifying - ['0', '2', '4', '6', '8']
  • List of specific values and ranges, e.g. ['0', '2', '4:8']

Stored Value: The width selected by the user is stored as a numeric value in the content file.

borderColor

This property should hold an array of items to pick from. Each item should have the following properties:

  • value: actual value to store in the content file
  • label: Displayed label
  • color: Either a hex color value (e.g. '#f5f5f5'), or use the '${name}' syntax to refer to a named color in your project's Tailwind configuration file (for example, given the colors configured here, you can use values such as $primary or $light as the value of this property).
  - type: style
    name: styles
    styles:
      self:
        borderColor:
          - value: 'border-primary'
            label: 'Primary color'
            color: '$primary'
          - value: 'border-secondary'
            label: 'Secondary color'
            color: '$secondary'
          - value: 'border-dark'
            label: 'Dark color'
            color: '#f5f5f5'

Stored value (in content object): The value of the selected item.

borderStyle

Allowed values: List of one or more of the values below, or '*' to allow all values

ValueTailwind ClassStyle
solidborder-solidborder-style: solid;
dashedborder-dashedborder-style: dashed;
dottedborder-dottedborder-style: dotted;
doubleborder-doubleborder-style: double;
noneborder-noneborder-style: none;

Stored value (in content object): Same as allowed values.