入门

快速开始

手动或通过 CDN 引入 pico.css，即可零依赖起步；进阶用法可采用 NPM 或 Composer。

开始使用 pico.css 有 4 种方式：

手动安装

下载 Pico，并在你网站的 <head> 中引入 /css/pico.min.css。

<link rel="stylesheet" href="css/pico.min.css">

通过 CDN 使用

或者，你可以使用 jsDelivr CDN 来引入 pico.min.css。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
>

使用 NPM 安装

npm install @picocss/pico

或者

yarn add @picocss/pico

然后，通过 @use 将 Pico 引入你的 SCSS 文件：

@use "pico";

进一步了解使用 Sass 定制。

使用 Composer 安装

composer require picocss/pico

起步 HTML 模板

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light dark">
    <link rel="stylesheet" href="css/pico.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>