You will be able to decide which style properties you offer to your content editors in the UI. This section refers to explicitly setting a style for a component, where your content editors will not be able to adjust it.

Using CSS Class Hooks

Components come with a CSS class hooks that you can target to adjust the component styles. These are plain CSS classes and are not tied into Tailwind components or configuration.

The typical component comes with three classes:

  1. .sb-component: Applied to all components.
  2. .sb-component-[type]: Applied to components of a certain type. For example, all section components will have the class .sb-component-section.
  3. .sb-component-[name]: Unique to each component. This will follow the name of the component. For example, the badge component will have the class .sb-component-badge.

These classes may differ depending on the theme you began with and any customizations you made along the way. It's best to double check that the class you are targeting exists before you use it.

Once you have a specific class to target, you can use it to set specific styles for your project in the src/css/main.css file.

/* src/css/main.css */

@layer components {
  .sb-component-badge {
    @apply rounded-md;
  }
}

Tailwind classes are supported in your site's CSS files. You will want to wrap your styles in a @layer directive. And you can use the @apply directive to apply Tailwind styles.

See below for an example and advice on what to look out for when overriding.

Overriding CSS Example

Let's say we wanted to make the buttons in a HeroSection component larger than those on the rest of the site.

The first step is to identify the selector(s) we're going to target. You can do this by following the class hooks mentioned above. And you can always validate your the selectors by inspecting the DOM. In this case, we want a Button component (.sb-component-button) inside a HeroSection (.sb-component-hero-section).

Then we can place our styles in src/css/main.css. Here's an example that adds some extra big padding and text to our buttons.

/* src/css/main.css */

@layer components {
  .sb-component-hero-section .sb-component-button {
    @apply px-12 py-6 text-2xl uppercase;
  }
}

That result might look something like this, depending on the theme you're using.

Custom button styles

⚠️ Proceed with Caution

This process provides you with a powerful pattern you can use to quickly adjust styles in your site. However, it can have unintended side effects in some cases. It is important to be aware of how the changes you're making can affect both the styles of your site as well as the experience for content editors.

In particular, there are two main ideas to keep in mind when overriding CSS:

  1. Many components can be used in multiple places.
  2. Overriding styles may disable global style settings.

Components are Globally Available

Your site is a component-based site. Components are reusable elements. The content each component accepts (its props) creates a unique instance of each component. That is why we allow for surfacing user-controlled styles, as there may be some styles that you'd like users to be able to adjust on a per-instance basis.

When overriding CSS for a component in this manner, you are setting a rule that all components following your condition should be styled in some specific way. Take care to not override a style you want an editor to have control over.

And when making a global change like this, be sure to test every instance of the component being used on the site. You can't always predict how your CSS changes may behave in different contexts (i.e. on different pages).

Global Styles May Be Less Specific

When you make these changes, you are adding the style rules to the bottom of the cascade (the "C" in "CSS"). That means that it's very likely you're overriding some style set somewhere else (that's part of the point of this process).

However, it's possible that you're overriding something that a content editor expects to be able to control.

For instance, many themes come with the ability to set the border radius of buttons globally, which lets editors control that value from the Style panel.

Setting Global CSS

If you then set the radius explicitly in some context, you're likely to confuse content editors, as they may expect the button to respect the global style setting.