Global CSS

Learn about ZippyStarter's global CSS for typography and code blocks, and how these styles are applied to enhance your website's appearance.

Globals

If you need to add a global stylesheet, this is the file you import them into, like so:

@import "@/css/typography.css";
@import "@/css/rehype-pretty-code.css";

Most of the file was generated through ShadCN,and it consists mainly of the main Tailwind imports, some custom properties, and a CSS reset.

Typography

For typography there is a global stylesheet: src/css/typography.css, it's only meant for type-heavy pages, such as blog posts. To apply, add the class: bodyContent to the element that wraps the content, and then wrap it with a @container.

<div id="main" className="@container">
  <main className="bodyContent">
    <p>Websites built with ZippyStarter</p>
  </main>
</div>

Rehype pretty code

Besides the themes that come with Rehype Pretty Code, there are additional styles for the <pre> and <code> blocks, they can be found in the following global stylesheet: src/css/rehype-pretty-code.css.

PostCSS

The PostCSS config is minimal, CSS nesting is enabled via a plugin, this allows you to write nested CSS.

module.exports = {
  plugins: {
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};