Built on Tailwind

Next.js works nicely with Tailwind CSS, and so do our styling options for components. This is not to say you can't bring any other CSS framework or component library, or go old school with no framework at all.

Hard-Coded vs User-Controlled Styling

Before we explore how styles are injected into a Stackbit theme, there's the overarching concept that is important to consider — user-controlled styling.

In Stackbit projects, there are hard-coded and user-controlled styles. Hard-coded styles are those that are written directly into your project. This is traditionally how CSS is handled. User-controlled styles are set by content editors. They map content to CSS selectors at build time to set the styling for a component.

As you build your project, you have the option to choose whether some style rule should be hard-coded or user-controlled.

Learn more about user-controlled styling.

The Layers of Styling

There are a number of layers of styling that provide a Stackbit site with styles that can be easily edited by developers and adjusted (within limits) by content editors.

To understand how these pieces fit together, let's begin with where styles are injected into your site.

The Main CSS File

Stackbit sites come with a custom App component in src/pages/_app.js. This file likely looks something like this:

import '../css/main.css';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Notice the first line. The styles in src/css/main.css are injected into the main application component. This means they will be available on every page on your site.

Here's how this file typically starts off:

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

@layer base {
    body {
        @apply bg-main text-base;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.15;
    }
}

@layer components {
    .sb-markdown {
        @apply leading-relaxed;
        a {
    // ... more stackbit theme classes

It starts off by importing Tailwind's class definition, proceeds to modify a few basic classes (e.g. body and h1), and then the bulk of the file is styling the components provided in your project by the base theme you've selected.

The themeStyle Object

In addition the the main CSS file above, take a look at tailwind.config.js at the root of your project. It is in the format of a standard Tailwind configuration file, but there's something unique here:

Notice the heavy use of themeStyle throughout the configuration. This is an object being imported from content/data/style.json. That file has a lot of content, but looks something like this:

{
  "type": "ThemeStyle",
  "body": "#000000",
  "headlines": "#000000",
  "primary": "#344FF1"
  // ...
}

All the values that are in this JSON file (instead of being directly specified in tailwind.config.js) are there for a good reason:

This JSON file is part of your project's content. It's a content object that has a full model definition describing its fields, which means it's fully editable in our visual editor as any other content.

Global styles in the visual editor

Like any other model, the ThemeStyle model is fully customizable. The visual editor knows to look for a content object of this type, but it will happily let you edit whatever fields the model currently defines. Learn more about extending global styles.

User-Controlled Styles

The above describes styling options which apply globally to all matching elements in your project. However, as mentioned above, instead of hard-coding specific styles for each component, you can leave a lot of per-component style choices up to your content editors. Learn more about user-controlled styling.


Let's move on to a closer look at where the rest of the content is, and how it gets loaded.

Next up: Content and its configuration