使用 Parcel 安装 Tailwind CSS
在 Parcel 项目中设置 Tailwind CSS。
创建项目
如果还没有 Parcel 项目，先创建一个。最常见的做法是按他们的 入门指南 将 Parcel 添加为项目的开发依赖。
Terminal
shellmkdir my-project
cd my-project
npm init -y
npm install parcel
mkdir src
touch src/index.html安装 Tailwind CSS
通过 npm 安装 @tailwindcss/postcss 及其对等依赖。
Terminal
shellnpm install tailwindcss @tailwindcss/postcss配置 PostCSS
在项目根目录创建 .postcssrc 文件，并启用 @tailwindcss/postcss 插件。
.postcssrc
json{
"plugins": {
"@tailwindcss/postcss": {}
}
}导入 Tailwind CSS
创建 ./src/index.css 文件，并添加 @import 以导入 Tailwind CSS。
index.css
css@import "tailwindcss";启动构建
使用 npx parcel src/index.html 运行构建流程。
Terminal
shellnpx parcel src/index.html在项目中使用 Tailwind
将 CSS 文件加入 <head>，然后使用 Tailwind 的工具类为内容添加样式。
index.html
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">
<!-- prettier-ignore -->
Hello world!
</h1>
</body>
</html>