安装
在 Parcel 项目中设置 Tailwind CSS。
如果你还没有设置项目,首先创建一个新的 Parcel 项目。最常见的方法是将 Parcel 添加为项目的开发依赖项,如他们的 入门指南.
mkdir my-projectcd my-projectnpm init -ynpm install parcelmkdir srctouch src/index.html
通过 npm 安装 @tailwindcss/postcss
及其对等依赖项。
npm install tailwindcss @tailwindcss/postcss
在你的项目根目录中创建一个 .postcssrc
文件,并启用 @tailwindcss/postcss
插件。
{ "plugins": { "@tailwindcss/postcss": {} }}
创建一个 ./src/index.css
文件,并为 Tailwind CSS 添加一个 @import
。
@import "tailwindcss";
使用 npx parcel src/index.html
运行你的构建过程。
npx parcel src/index.html
将你的 CSS 文件添加到 <head>
中,并开始使用 Tailwind 的实用类来设置你的内容样式。
<!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>