使用 Ember.js 安装 Tailwind CSS

在 Ember.js 项目中设置 Tailwind CSS。

创建项目

如果还没有 Ember.js 项目，先创建一个。最常见的做法见 Ember.js Quick Start。

Terminal

npx ember-cli@latest new my-project --no-welcome
cd my-project

安装 Tailwind CSS

通过 npm 安装 @tailwindcss/vite 及其对等依赖。

Terminal

npm install tailwindcss @tailwindcss/vite

配置 Vite 插件

将 @tailwindcss/vite 插件加入 Vite 配置。

vite.config.mjs

import { defineConfig } from 'vite';
import { extensions, classicEmberSupport, ember } from '@embroider/vite';
import { babel } from '@rollup/plugin-babel';

import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [

    tailwindcss(),
    classicEmberSupport(),
    ember(),
    // extra plugins here
    babel({
      babelHelpers: 'runtime',
      extensions,
    }),
  ],
});

导入 Tailwind CSS

在 ./app/styles/app.css 中添加 @import 以导入 Tailwind CSS。

app.css

@import "tailwindcss";

链接 CSS 文件

在 ./index.html 中，将 @embroider/virtual/app.css 样式表链接替换为指向 ./app/styles/app.css 的直接链接，以便 Vite 处理它。

index.html

{{content-for "head"}}

<link integrity="" rel="stylesheet" href="/@embroider/virtual/vendor.css" />
<link integrity="" rel="stylesheet" href="/@embroider/virtual/app.css" />
<link integrity="" rel="stylesheet" href="/app/styles/app.css" />

{{content-for "head-footer"}}

启动构建

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

Terminal

npm run start

在项目中使用 Tailwind

application.gjs

import { pageTitle } from 'ember-page-title';

<template>
  {{pageTitle "MyProject"}}
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>

  {{outlet}}
</template>