Cài đặt Tailwind CSS với Parcel

Thiết lập Tailwind CSS trong dự án Parcel.

Tạo dự án của bạn

Bắt đầu bằng cách tạo một dự án Parcel mới nếu bạn chưa thiết lập. Cách phổ biến nhất là thêm Parcel như một dev-dependency vào dự án như được mô tả trong hướng dẫn bắt đầu của họ.

Terminal

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

Cài đặt Tailwind CSS

Cài đặt @tailwindcss/postcss và các peer dependencies thông qua npm.

Terminal

npm install tailwindcss @tailwindcss/postcss

Cấu hình PostCSS

Tạo file .postcssrc trong thư mục gốc dự án, và bật plugin @tailwindcss/postcss plugin.

.postcssrc

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

Import Tailwind CSS

Tạo file ./src/index.css và thêm @import cho Tailwind CSS.

index.css

@import "tailwindcss";

Bắt đầu quá trình build

Chạy quá trình build với npx parcel src/index.html.

Terminal

npx parcel src/index.html

Bắt đầu sử dụng Tailwind trong dự án của bạn

Thêm file CSS vào <head> và bắt đầu sử dụng các utility class của Tailwind để style nội dung của bạn.

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>