Adding Assets to the Build

The fastest way to make our application look decent is by using a CSS library. We will use the amazing Tailwind library.

Ember-CLI bundles all JavaScript files that the application needs, including the application’s code, into one big ball in the build process. Then, it names this big ball after the project name, in our case, rarwe.js. It does the same for CSS.

Tailwind Library

A tool called Broccoli is responsible for bundling our assets, and its configuration is found in ember-cli-build.js. There are two ways to tell Broccoli to include the Tailwind assets in our application.

The first way is to use an Ember add-on suited for that library. The second is to install the npm package and then do some additional plumbing to integrate it into our app. While using an Ember add-on is the simplest way to go, it has a few drawbacks. One of them is that the Ember add-on is always tied to a specific version of the npm package, and we’re at the mercy of the maintainer if we want to upgrade that version. We have to wait for a new version to be released that upgrades the npm package version.

Since using npm packages directly “just works” with ember-auto-import, we’ll install tailwindcss and then do some configuration.

$ npm install -D tailwindcss

One of the suggested ways to install Tailwind is as a PostCSS plugin, so we need to add PostCSS, too. This time, we’ll use the Ember add-on as it does a lot of low-level plumbing that we don’t want to replicate:

$ ember install ember-cli-postcss

We have to tell PostCSS to use Tailwind as a plugin. We do this in the ember-cli-build.js file where most build-related things live: