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

Global CSS File

The global CSS file path is by default src/styling/global.css from the root path

You can change its path.

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>
)

Prose Content

Prose are content to be read (ie a list in a prose is not a dropdown list but a list of bullet points).

Layouts adds a prose class when the prose frontmatter meta is true.

This meta is automatic set to true for markdown and CMS content.

You can enable/disable it by setting the prose meta to a value.

You can then use it for styling:

• in your Global CSS File
• or with tailwindcss-typography class

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