Tailwind CSS

A guide to using Tailwind CSS to style your pages and components.

Motif offers support for Tailwind CSS out of the box. This means that you can use all Tailwind's utility classes, such as flex, sm:rounded-xl and hover:bg-fuchsia-400 with no further setup. And thanks to Tailwind JIT, only necessary styles are generated, keeping your stylesheets small and fast to load. Moreover, it allows you to use custom classes, such as h-[27px] and text-[#15E3FF], in addition to the ones defined by Tailwind.

Hit and type tailwind.config.js to open the Tailwind configuration file.

//
// This is your Tailwind CSS configuration, where
// you can define global style constants such as
// color palette, fonts and sizes.
//
// Read more at https://tailwindcss.com.
//
const defaultTheme = require("tailwindcss/defaultTheme")
const colors = require("tailwindcss/colors")
module.exports = {
important: true,
theme: {
screens: Object.assign(defaultTheme.screens, { xs: "475px" }),
extend: {
colors: {
gray: colors.trueGray,
turquoise: {
50: "#effdfd",
100: "#d2f7f9",
200: "#aaf0f4",
300: "#76e4ec",
400: "#39d0dd",
500: "#14b4c6",
600: "#0892a2",
700: "#097684",
800: "#0b5e6b",
900: "#0d4f5a",
},
spacing: {
128: "32rem",
144: "36rem",
},
borderRadius: {
"4xl": "2rem",
},
},
fontFamily: {
sans: ["Inter", ...defaultTheme.fontFamily.sans],
serif: ["Merriweather", ...defaultTheme.fontFamily.serif],
mono: ["Menlo", ...defaultTheme.fontFamily.mono],
system: ["Inter", ...defaultTheme.fontFamily.sans],
},
},
},
variants: {},
plugins: [require("@tailwindcss/typography")],
}

You can modify this file to suit your needs, such as adding custom colors, sizes or font families.

Please refer to the following articles for in-depth walkthroughs of the options Tailwind offer:

Also, make sure to read the Tailwind documentation for an overview of the configuration file.