Global Styles

Stackbit's styles editor enables you to empower content editors to drive global style values that are inherited by components throughout your site.

Global styles are related to component style controls, but they take a different approach. Rather than mapping content to classes, global styles map set CSS variables directly, from which components can inherit their values.

In this lesson, we're going to create a single configurable style called primaryColor, which we'll use to set the button color.

Though we don't technically need to use a CSS framework for this approach, it is currently much easier with a solution that can easily hook into Next.js's postcss loader. We'll use Tailwind CSS in this lesson.

Add Global Style Model

You know the drill — we're starting with a content model!

Global styles must use a ThemeStyle model of the data type.

# .stackbit/models/ThemeStyle.yaml

type: data
name: ThemeStyle
label: Style Config
file: styles.json
fields:
  - type: color
    name: primaryColor
    label: Primary Color

We've specified the file as styles.json, which means Stackbit expects our file to live at content/data/styles.json. The content/data prefix is set in stackbit.yaml.

Create Global Styles Content

Unlike pages, we can't create data objects from the Stackbit app. Therefore, you must manually create the data file.

// content/data/styles.json

{
  "primaryColor": "#4c57c5"
}

Setup Tailwind

We technically do not need to use a CSS framework here, but Tailwind will make things a bit easier for us.

Install Tailwind

Stop your development server and install new dependencies:

npm install -D tailwindcss postcss autoprefixer

Then setup Tailwind:

npx tailwindcss init -p

Configure Tailwind

Adjust the tailwind.config.js to import our global styles data, and use it to set variable values.

// tailwind.config.js

const globalStyles = require('./content/data/styles.json')

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: globalStyles.primaryColor
      }
    }
  },
  plugins: []
}

Load Tailwind Styles

Typically you would load Tailwind's base, component, and utility styles. However, because we already have a bit of a base, let's just add the components and utilities to the top of the styles/styles.css file.

/* styles/styles.css */

@tailwind components;
@tailwind utilities;

/* other styles here ... */

Update Styles to Use Global Styles

Now we can make our button use the primary color we added by making these adjustments in styles/styles.css.

/* styles/styles.css */

/* OLD */
.button {
  background-color: var(--color-blue);
  border: 0.125rem solid var(--color-blue);
  /* ... */
}

/* NEW */
.button {
  @apply bg-primary
    border-4
    border-solid
    border-primary;

  /* ... */
}

Change Global Style Content

Now you can put it to the test. Restart your development server.

npm run dev

Open the styles panel and change the primary color. You should see the button change color in real time!

🎉 Hooray! 🎉

That's it! You've completed the tutorial and you're ready to make your Next.js site visually editable with Stackbit. Head to the list of next steps for some suggestions on where to go next.