Tailwind config

Configure and customize your Tailwind theme.

In addition to plain CSS, Motif supports Tailwind CSS, which allows you to easily control the layout and style of your pages and components using custom CSS classes. The Tailwind configuration file is the place where you can extend the default theme with custom colors, typography, sizes and more.

Here is a sample Tailwind configuration adding a turquoise color to the default color palette, and setting the default serif font to Merriweather (loaded in the head section of motif.json, as illustrated above):

const colors = require("tailwindcss/colors")
module.exports = {
theme: {
extend: {
colors: {
...colors,
turquoise: {
50: "#effdfd",
100: "#d2f7f9",
200: "#aaf0f4",
300: "#76e4ec",
400: "#39d0dd",
500: "#14b4c6",
600: "#0892a2",
700: "#097684",
800: "#0b5e6b",
900: "#0d4f5a",
},
},
fontFamily: {
serif: ["Merriweather"],
},
},
},
}

In your pages, you can now write:

<p className="font-serif text-turquoise-600">
This is a turquoise text typeset in the Merriweather font.
</p>

Read more in the Tailwind CSS documentation.