Styling

This page is about the options that you have to style your project.

On a high level, we use Tailwind with the shadcn convention.

Options List

Tailwind

We use tailwind as styling system and the entry point is the global css file

So you can:

• apply any Tailwind class
• configure it and add custom styles in the global CSS file

Global CSS File

The global CSS file path is by default src/styling/global.css from the root path (You can change its path).

A default minimal implementation would be:

css⎘ Copy
@import "@combostrap/interact/global.css";

/* Your Pages if you use tailwind class in them */
@source "../pages";
/* Components */
@source "../components";

where the @source directive is a tailwind directive
that will register your components and your pages directory so that Tailwind will scan them and discover classes.

We follow the shadcn convention with CSS Variable.

Note: @import "@combostrap/interact/global.css" imports the base interact CSS and particularly the following

css⎘ Copy
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

CSS Variables

The CSS variables are known as token and are present in the global CSS file.

The standard Shadcn variables are listed here.

You can also add your own CSS variables

Outline Numbering

We support heading numbering styling.

Apply styles Object

Instead of TailWind class, you can always apply style directly

tsx⎘ Copy
const styles: Record<string, React.CSSProperties> = {
    buttons: {
        margin: ".25rem .125rem"
    }
}
return (
    <button style={styles.button}></button>
)

How to add CSS Variables and Classes

In this tutorial, we explain how to define CSS variables, create new TailWind Classes and use them.

Configuration

Location of the Global Css file

You can change the location of the global CSS file in the paths.css property of the configuration file.

Dark/Light mode

Dark/Light mode is handled by adding or removing the dark class to the HTML element.

Code fragment from the default ModeToggle button.

tsx⎘ Copy
const [theme, setThemeState] = React.useState<
    "theme-light" | "dark" | "system"
>("theme-light")

React.useEffect(() => {
    const isDark =
        theme === "dark" ||
        (theme === "system" &&
            window.matchMedia("(prefers-color-scheme: dark)").matches)
    document.documentElement.classList[isDark ? "add" : "remove"]("dark")
}, [theme])

The full example can be seen in the shadcn Astro documentation