在 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(),    // 在此处添加其他插件    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>