Layouts

In Motif, colors are mainly dealt with in two ways:

• Using vanilla CSS.
• Using Tailwind CSS classes.

Since Tailwind CSS 2.1+, arbitrary classes are supported, and we therefore highly recommend solely using Tailwind CSS, even for special cases, and completely drop the use of vanilla CSS, as Tailwind provides much better consistency and conciseness.

Using vanilla CSS

Via the style property of a component, you can use arbitrary CSS color specifications for background, text, border color and so on.

<div
  style={{
    backgroundColor: "#FEF3C7",
    borderColor: "#FDE68A",
    color: "#D97706",
  }}
>
  Custom colors with CSS.
</div>

Using Tailwind CSS classes

Via the className property of a component, you can use classes from the Tailwind CSS framework.

<div className={`
    bg-gradient-to-br
    from-cyan-400
    to-sky-500
    text-cyan-100
  `}>
  Custom colors with Tailwind CSS.
</div>

Each Tailwind color comes in 10 variants, e.g. red-400 or coolGray-900. To apply to a specific property, e.g. text color, prepend with the appopriate keyword. For instance, to apply a background color, use the bg- prefix, e.g. bg-red-400. To apply a text color, use the text- prefix, e.g. text-coolGray-900. Supported prefixes are:

• text-
• bg-
• border-
• to-, from- and via- when using gradients.

Creating a custom color palette

The color specifiers can be customized in your project's tailwind.config.js file. For instance, the following configuration includes the default blueGray, lime and indigo colors provided by Tailwind (see below for the complete palettte), and introduce a custom turquoise color in three variants:

module.exports = {
  theme: {
    colors: {
      blueGray: colors.blueGray,
      lime: colors.lime,
      indigo: colors.indigo
      turquoise: {
        200: "#aaf0f4",
        500: "#14b4c6",
        900: "#0d4f5a"
      }
    }
  }
}

Read more about colors in the Tailwind CSS documentation.

Default color palette

The following colors are provided out-of-the-box by Tailwind.