DOCSEARCHbyAlgolia
Submit Docs

matcha.css Documentation

repository·main·Indexed 24 days ago

https://github.com/lowlighter/matcha

A pure CSS library that styles HTML elements to resemble default browser stylesheets. Designed for fast prototyping, static pages, and Markdown documents without requiring JavaScript, build steps, or configuration. Supports installation via CDN, npm (@lowlighter/matcha), individual style modules, or a custom builder.

Tokens
328
Snippets
1
Records
4
Agent score
34%

What's inside matcha.css

  1. Install matcha.css via npm

    main
    matcha.css is available as an npm package under the name @lowlighter/matcha. You can install it using your preferred package manager and then host the CSS file locally or via a CDN that distributes npm packages (like jsDelivr).

  2. Install matcha.css via CDN

    main

    To use the full matcha.css library, include the stylesheet link in the <head> section of your HTML document. This provides a complete set of styles that mimic default browser behavior for a wide range of HTML elements.

    <link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">

  3. Use matcha.css styles à la carte

    main

    If you want to avoid the full library and only include specific features, you can link directly to individual style modules hosted on matcha.mizu.sh.

    Important: Most individual modules require the @root package to be included first, as it contains the necessary CSS variable definitions.

    Individual modules are available in two formats:

    1. Using the mod.css suffix: https://matcha.mizu.sh/styles/[module-name]/mod.css
    2. Using the aliased short name: https://matcha.mizu.sh/[module-name].css

  4. Create a custom matcha.css build

    main
    To reduce the final CSS file size, you can use the matcha.css custom builder to select only the specific features your project needs. This allows you to 'brew' a tailored version of the library.