在 Ember.js 中安装 Tailwind CSS

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

创建你的项目

如果你还没有设置 Ember.js 项目，可以先创建一个新的项目。最常用的方法在Ember.js 快速入门中有说明。

Terminal

npx ember-cli@latest new my-project --no-welcomecd 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

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

application.gjs

import { pageTitle } from 'ember-page-title';<template>  {{pageTitle "MyProject"}}  <h1 class="text-3xl font-bold underline">    Hello world!  </h1>  {{outlet}}</template>