使用 Parcel 安裝 Tailwind CSS

在 Parcel 專案中設定 Tailwind CSS。

建立您的專案

如果尚未設定，請先建立一個新的 Parcel 專案。最常見的方法是按照他們的開始使用指南.

終端機

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

安裝 Tailwind CSS

透過 npm 安裝 @tailwindcss/postcss 及其 peer dependencies。

終端機

npm install tailwindcss @tailwindcss/postcss

設定 PostCSS

在您的專案根目錄中建立一個 .postcssrc 檔案，並啟用 @tailwindcss/postcss外掛程式。

.postcssrc

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

匯入 Tailwind CSS

建立一個 ./src/index.css 檔案，並為 Tailwind CSS 新增一個 @import。

index.css

@import "tailwindcss";

開始您的建置流程

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

終端機

npx parcel src/index.html

開始在您的專案中使用 Tailwind

將您的 CSS 檔案新增到 <head>，並開始使用 Tailwind 的 utility classes 來設定內容樣式。

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>