closes #4658

The bug

The Ember guide writes the Tailwind entry to app/styles/app.css:

@import "tailwindcss";
@plugin "daisyui";

…and then imports ./app/styles.css — a path that does not exist (styles/ is missing). Following the guide verbatim, vite build fails outright:

✗ Could not resolve "./app/styles.css" from index.html

So the project never builds. One character short of a directory, but it takes the whole guide down.

About the report

@Polve's diagnosis was that a modern Ember app has no index.html, and that the CSS should be imported from app.ts instead. I scaffolded a fresh app to check, and index.html does exist — @ember/app-blueprint@7.1.1 generates it at the project root (it's a Vite app, so it needs one):

create index.html
create app/styles/app.css
create vite.config.mjs

So the index.html step is fine as a location; only the path inside it is wrong. Fixing the path is enough — hence this one-line change rather than a restructure.

(For what it's worth, importing from app/app.js as suggested works too — I measured both, see below. I kept index.html because it's the smaller change and the existing wording stays accurate.)

Verification

Scaffolded a real project and followed the guide step by step, changing only the import line:

npx ember-cli@latest init --blueprint @ember/app-blueprint
npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest
# add tailwindcss() to vite.config.mjs, write app/styles/app.css, add the import to index.html
npm run build

Then served dist/ and read the computed style of <button class="btn btn-primary"> in Chromium:

I also checked the two alternatives so the numbers are on the record:

Removing the step is not an option: Embroider serves app/styles/app.css as a virtual module that never passes through @tailwindcss/vite, so without an import that routes it into Vite's module graph the file ships unprocessed — the built @embroider/virtual/app.css is literally the two source lines.

One thing I noticed but did not change

With any of the working variants the browser logs a 404 for /@embroider/virtual/tailwindcss. Cause: Embroider also serves app/styles/app.css raw at /@embroider/virtual/app.css, so the browser tries to resolve the unprocessed @import "tailwindcss" as a URL. Harmless — the real, processed stylesheet loads from /assets/main-*.css — but it is a console error on every page load.

It goes away if the Tailwind entry lives outside app/styles/:

@import "tailwindcss";
@plugin "daisyui";

+ import './tailwind.css';
  import Application from '@ember/application';

Measured: same 21.43 kB, styles applied, zero console errors and zero failed requests. I left it out of this PR because it restructures the guide and adds a new translatable string across 27 locales — happy to send it as a follow-up if you want it.

Translations

No translation changes: the sentence "Import the CSS file in your index.html" is unchanged, so its key stays in use. bun run lang:prune reports nothing to prune and bun run lang:validate passes.