CSS Styling

A guide to styling your content using CSS.

Styling is achieved either globally, via the main.css global stylesheet, on a page level, using the frontmatter, or on a component level, using the className and style properties of a JSX component.

Global stylesheet

Hit the P shortcut and type main.css to open the project's main CSS file.

@tailwind base;
@tailwind components;
@tailwind utilities;

a {
  @apply no-underline text-sky-500 hover:text-sky-600 transition ease-in-out duration-100;
}

.prose h1 {
  @apply text-2xl sm:text-3xl lg:text-4xl !important;
}

/* ... */

This is where you define global styles to be shared across all your project's pages. For instance, to change the background color of all your pages, add a body style:

body {
  background-color: #ecfccb;
}

In addition to vanilla CSS, Tailwind classes can be applied using the @apply directive. This is recommended, as it keeps your styling coherent according to the Tailwind configuration:

body {
  @apply bg-lime-100;
}

Frontmatter

If you want to apply styles only to specific pages, you can do so via the page's frontmatter, under the class key:

---
class:
  body: bg-fuchsia-100
  h1: text-fuchsia-500
---

# This title is in fuchsia

Components

Styles and classes can also be applied to individual components. In JSX, the syntax differs from HTML in a few ways:

  • The class property is renamed to className.
  • The style property is a JS object, not a string.

Here is an example combining classes and styles:

<div
  className="rounded-md bg-cyan-100"
  style={{ fontSize: 19 }}
/>

We recommend avoiding using styles as much as possible, and use Tailwind classes whenever possible. Even for values which are not supported by Tailwind out of the box, we can leverage Tailwind's JIT compiler and use arbitrary values, with the bracket syntax:

<div className="rounded-md bg-cyan-100 text-[19px]" />

© 2022 Motif Land Inc. All rights reserved. This site is built with Motif.