Tailwind CSS 主页
  1. 入门
  2. 使用 Meteor 安装 Tailwind CSS

  1. 创建你的项目

    如果您还没有设置，请先创建一个新的 Meteor 项目。最常见的方法是使用 Meteor CLI。

    终端
    meteor create my-projectcd my-project

  2. 安装 Tailwind CSS

    通过 npm 安装 tailwindcss 及其对等依赖项，然后运行 init 命令生成 tailwind.config.js 和 postcss.config.js。

    终端
    npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

  3. 配置模板路径

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

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

  4. 在 CSS 中添加 Tailwind 指令

    在 ./client/main.css 文件中为每个 Tailwind 层添加 @tailwind 指令。

    main.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  5. 启动构建过程

    使用 npm run start 运行构建过程。

    终端
    npm run start

  6. 在项目中开始使用 Tailwind

    开始使用 Tailwind 的实用程序类来设置内容的样式。

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