Install Tailwind CSS with Ember.js

Setting up Tailwind CSS in an Ember.js project.

Create your project

Start by creating a new Ember.js project if you don't have one set up already. The most common approach is outlined in the Ember.js Quick Start.

Terminal

npx ember-cli@latest new my-project --no-welcomecd my-project

Install Tailwind CSS

Install @tailwindcss/vite and its peer dependencies via npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Configure Vite Plugin

Add the @tailwindcss/vite plugin to your Vite configuration.

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,    }),  ],});

Import Tailwind CSS

Add an @import to ./app/styles/app.css that imports Tailwind CSS.

app.css

@import "tailwindcss";

Link the CSS file

In your ./index.html file, replace the @embroider/virtual/app.css stylesheet link with a direct link to ./app/styles/app.css so Vite processes it.

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"}}

Start your build process

Run your build process with npm run start.

Terminal

npm run start

Start using Tailwind in your project

Start using Tailwind's utility classes to style your content.

application.gjs

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