在 Parcel 中安裝 Tailwind CSS

在 Parcel 專案中設定 Tailwind CSS。

建立你的專案

如果你還沒有設定專案，請先建立一個新的 Parcel 專案。最常見的方式是按照他們的入門指南，將 Parcel 加入為專案的開發相依套件。

Terminal

mkdir my-projectcd my-projectnpm init -ynpm install parcelmkdir srctouch src/index.html

安裝 Tailwind CSS

透過 npm 安裝 @tailwindcss/postcss 及其對等相依套件。

Terminal

npm install tailwindcss @tailwindcss/postcss

設定 PostCSS

在專案根目錄建立 .postcssrc 檔案，並啟用 @tailwindcss/postcss 外掛。

.postcssrc

{  "plugins": {    "@tailwindcss/postcss": {}  }}

匯入 Tailwind CSS

建立 ./src/index.css 檔案，並加入 @import 來匯入 Tailwind CSS。

index.css

@import "tailwindcss";

啟動你的建置流程

使用 npx parcel src/index.html 執行建置流程。

Terminal

npx parcel src/index.html

開始在專案中使用 Tailwind

將你的 CSS 檔案加入 <head>，然後開始使用 Tailwind 的通用類別來設定內容樣式。

index.html

<!doctype html><html>  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <link href="./index.css" type="text/css" rel="stylesheet" />  </head>  <body>    <h1 class="text-3xl font-bold underline">      Hello world!    </h1>  </body></html>