This guide covers the fundamentals of styling in Clutch, including how to work with the properties panel, tokens, instance styles, classes, and utility classes.
Styling your site and its content is handled through the properties panel. This is where you’ll adjust layout, spacing, color, typography, borders, shadows, and more.
Styling the Site Layout
To apply styles that affect your entire site, use the Site Layout. Select the Site Layout in the navigator to access the properties panel, where you can define foundational styles like background color, font color, and other global design choices.
You can enter static values, or use the token system by clicking the green lightning bolt icon beside any input. This gives you access to Tailwind scales, including color, spacing, and typography tokens. Selecting from these predefined tokens ensures consistency and makes it easy to update your design system later.
While the Site Layout defines global styles, individual pages can still be styled independently. For example, you can override the background color on a specific page if you want each one to have its own visual identity. Styles applied on a page will override those inherited from the layout.
Styling Individual Components
Styling can also be applied at the component level. This kind of direct, per-component styling is called an instance style, and it only affects the element you’ve selected. For example, if a button in your hero section needs better contrast, you can adjust its background color by entering a value or choosing from a token like
blue-800 from Tailwind’s scale.Creating and Applying Classes
Once you’ve styled an instance, you can convert that styling into a reusable class. Right-click the instance style icon in the Classes window, and choose Convert to Class. This creates a new class based on the element’s name, which you can rename (e.g., to
blue-button).The advantage of using classes is that they let you apply the same styling to multiple components. When components share a class, they stay consistent—and updating the class updates all of them at once.
To manage all your classes, open the Classes panel in the App Bar. This gives you a full view of reusable styles across your project.
Defining and Using Tokens
Tokens let you define design values globally—for things like colors, font sizes, box shadows, spacing, z-index, and more. These tokens can be used anywhere styles are applied, keeping your system consistent and easy to update.
To create a token, go to the Tokens panel in the App Bar and define one, a color token called
primary. Set its value to something like amber-500. Then, return to your button, remove the existing class, and apply the primary token as the background color using the lightning bolt icon in the properties panel.This token can then be applied to other elements, or used inside a class. If you want a consistent primary button, define the token first, apply it to a styled button, and then convert that to a
primary-button class. Tailwind Utility Classes
Tailwind utility classes can also be used directly inside the Classes window. These are useful for quick modifiers—for example, adding
font-semibold to increase font weight.Select a component that contains some text content, select the Classes window input, and search for a Tailwind utility like
font-semibold. Applying it will set the font weight to 600.While utility classes are available, Clutch does not currently support combining utility classes into a single class. It’s best to use utility classes as modifiers and rely on instance styles and class creation for primary styling.
Summary
Styling in Clutch is flexible by design. You can apply styles directly through the properties panel, reuse them via classes, define global tokens for consistency, and use Tailwind utilities for quick tweaks. Clutch gives you the tools to stay organized without locking you into one way of working—whether you're building a system from scratch or just making things look right as you go.