文件

文件步驟

共用的文件步驟與實用範例。

安裝步驟

Create a project
Start from a Vite project when you do not have an app yet.
```
npm create vite@latest my-appcd my-app
```
Add Master CSS
Run the installer from the project root.
```
npm create @master/css@rc -- --yes
```
Run and style
Start the dev server, then use Master CSS classes in your markup.
```
npm run dev
```

用法與介面

有自訂標題與程式碼的設定流程，請使用 StepSection。清單在每個 Step 的標題旁，以一般等寬數字 01、02、03 與細連接線編號，不要將數字放進圓圈或標章。操作寫在標題，預期結果寫在內文，閱讀順序維持在文件中。

import Code from '@master/internal-site/components/Code'import StepSection, { Step, StepL, StepR } from '@master/internal-site/components/StepSection'<StepSection>  <Step $row>    <StepL>      <h3>Connect the stylesheet</h3>      <p>Import the entry in your app.</p>    </StepL>    <StepR>      <Code lang="css">{"@import '@master/css';"}</Code>    </StepR>  </Step></StepSection>

元件由伺服器呈現。請提供適當層級的原生標題，並保留穩定 ID。編號僅供裝飾，不能取代標題或進度指示。編號軌道與選用欄位沿用 Guide 的處理方式。46rem 的容器門檻控制選用的雙欄版面；較窄時依閱讀順序堆疊，程式碼保留自身的橫向捲動。預覽應與展示其結果的步驟放在一起；預覽與來源之間的間距由托盤負責。

各安裝指南應使用相同的步驟模式：

快速開始、Vite、CLI 與 VS Code 將各操作與結果配在一起。
Webpack、Rspack 與 Rsbuild 保留完整、可讀的設定檔。
Astro 與 SvelteKit 連接版面與伺服器掛鉤。
Express、PHP 與 Rails 將獨立建置的資產接到完整伺服器樣板。
Laravel、WordPress 與 Shopify 保留主框架的資產輔助函式與版面掛鉤。
ASP.NET Core 與 Blazor 明確區分資產建置、主框架建置與發布順序。

完整樣板與外觀預覽應放在同一個托盤。DemoConfiguredExample 使用字面值原始碼，讓顯示的 classes 與實際範例一致；預覽不會執行主框架，因此設定限制仍須寫在教學中。

安裝將 Integrations、CDN 與 CLI 放在同一篇文章的不同章節，請使用一般連結前往各章節錨點。框架指南仍各自成頁，並保有自己的頁面目錄；各種渲染模式則是各框架指南內的章節。

安裝步驟

Create a project

Add Master CSS

Run and style

用法與介面

#安裝導覽