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 to use Ember CLI.
Terminalnpx ember-cli new my-project --embroider --no-welcomecd my-project
Install Tailwind CSS
Using npm, install
tailwindcss
and its peer dependencies, as well aspostcss-loader
, and then run theinit
command to generate bothtailwind.config.js
andpostcss.config.js
.Terminalnpm install -D tailwindcss postcss postcss-loader autoprefixernpx tailwindcss init -p
- ember-cli-build.js
'use strict'; const EmberApp = require('ember-cli/lib/broccoli/ember-app'); module.exports = function (defaults) { const app = new EmberApp(defaults, { // Add options here }); const { Webpack } = require('@embroider/webpack'); return require('@embroider/compat').compatBuild(app, Webpack, { skipBabel: [ { package: 'qunit', }, ], packagerOptions: { webpackConfig: { module: { rules: [ { test: /\.css$/i, use: [ { loader: 'postcss-loader', options: { postcssOptions: { config: 'postcss.config.js', }, }, }, ], }, ], }, }, }, }); };
Configure your template paths
Add the paths to all of your template files in your
tailwind.config.js
file.tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { content: ['./app/**/*.{gjs,gts,hbs,html,js,ts}'], theme: { extend: {}, }, plugins: [], };
Add the Tailwind directives to your CSS
Create a
./app/app.css
file and add the@tailwind
directives for each of Tailwind's layers.app.css@tailwind base; @tailwind components; @tailwind utilities;
- app.js
import Application from '@ember/application'; import Resolver from 'ember-resolver'; import loadInitializers from 'ember-load-initializers'; import config from 'my-project/config/environment'; import 'my-project/app.css'; export default class App extends Application { modulePrefix = config.modulePrefix; podModulePrefix = config.podModulePrefix; Resolver = Resolver; } loadInitializers(App, config.modulePrefix);
- Terminal
npm run start
- application.hbs
{{page-title "MyProject"}} <h1 class="text-3xl font-bold underline"> Hello world! </h1> {{outlet}}