在 Meteor 中安装 Tailwind CSS - Tailwind CSS 中文网

Getting Started
在 Meteor 中安装 Tailwind CSS

创建你的项目
如果你还没有创建 Meteor 项目，请先创建一个。最常见的方法是使用 Meteor 命令行工具。
终端
```
meteor create my-projectcd my-project
```
安装 Tailwind CSS
通过 npm 安装 tailwindcss 及其同级依赖，然后运行 init 命令生成 tailwind.config.js 和 postcss.config.js。
终端
```
npm install -D tailwindcss@3 postcss autoprefixernpx tailwindcss init -p
```

配置你的模板路径

在你的 tailwind.config.js 文件中添加所有模板文件的路径。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./imports/ui/**/*.{js,jsx,ts,tsx}",
    "./client/*.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

将 Tailwind 指令添加到你的 CSS 中
将 Tailwind 的每个层的 @tailwind 指令添加到你的 ./client/main.css 文件中。
main.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
开始构建流程
使用 npm run start 运行你的构建过程。
终端
```
npm run start
```

开始在你的项目中使用 Tailwind

开始使用 Tailwind 的工具类来为你的内容添加样式。

App.jsx

export const App = () => (
  <h1 className="text-3xl font-bold underline">
    Hello world!
  </h1>
)