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.

Typography

Typography Styles Panel

textAlign

  • Options: List of one or more of the values below as an array, or use '*' to allow all values.
    • left
    • center
    • right
    • justify
  • Value: Same as the option chosen.
  • Control(s): Button group

Example:

fields:
  - type: style
    styles:
      self:
        textAlign: ['left', 'center', 'right', 'justify']
      title:
        textAlign: '*'

fontSize

  • Options: An array of numeric values representing the font size in pixels. '*' will produce a range from 0 to 100.
  • Value: Same as the option chosen (as a number).
  • Control(s): Slider

Example:

fields:
  - type: style
    styles:
      title:
        fontSize: '10:24:2'

fontStyle

  • Options: List of one or more of the values below as an array, or use '*' to allow all values to be selected.
    • bold
    • italic
    • underline
  • Value: Every selected option.
  • Control(s): Button

Example:

fields:
  - type: style
    styles:
      title:
        textAlign: ['bold', 'italic']

fontWeight

  • Options: An array of numeric values representing the a font weight value. * will produce an array from 100 to 900 in increments of 100.
  • Value: Same as the option chosen (as a number).
  • Control(s): Slider

Example:

fields:
  - type: style
    styles:
      title:
        fontSize: ['400', '700']
      subtitle:
        fontSize: '*'
      body:
        fontSize: ['100', '500:900']

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.

Style Control Types

Control types differ depending on the property and the value options available for that property type.

Dropdown controls is a generic control type that produces a single value.

Dropdown Control

They are used in a number of scenarios:

  • A list of options can not be represented by a pre-determined set of icons
  • A set of numbers is not conducive to using a slider control (see below)
  • There are too many options to reasonably render a button group

Button

A button control is used when a finite number of text (non-numeric) options can be represented by icons and when multiple values can exist for a style field.

Button Control

fontStyle is a good example of a button control, as multiple values may be selected.

Button Group

A button group control is used when a finite number of text (non-numeric) options can be represented by icons and when a single value can be chosen for a style field.

Button Group Control

The textAlign field uses a button group, as there are a finite number of options, from which only one can be chosen.

Slider

When numbers can be used for the values options of a field, you can specify a range, which will be rendered in the UI as a slider.

Slider Control

Sliders are configured like so:

  • *: Any number within the bounds allowed by the property.
  • a:b (e.g. 0:4): Any number between a and b, in step increments based on the property. (Step is 1 unless otherwise specified.)
  • a:b:n (e.g. 0:8:2): Any number between a and b, with step increments of n. For example, 0:8:2 is the equivalent of ['0', '2', '4', '6', '8'].
  • [...] (e.g. ['0', '2', '4:8']): An explicit list (array) of of specific values and ranges. Note that each array item can use ranges mentioned above.