Ember CLI Tailwind

Ember CLI Tailwind adds Tailwind CSS to your app or addon. It also lets you configure every aspect of Tailwind that's designed to be configured, from the configuration values driving the utility classes, to defining new utility classes or components.

It comes with a styleguide route (/tailwind) that displays all your configured styles:

Installation

Install the addon with

ember install ember-cli-tailwind

Then, configure it for your app, your addon, or your addon's dummy app by setting the buildTarget config property:

Apps

// ember-cli-build.js
module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-cli-tailwind': {
      buildTarget: 'app'
    }
  })
});

Addons, when styling things under /addon you intended to provide to host apps

// index.js
module.exports = {
  name: 'your-addon',

  options: {
    'ember-cli-tailwind': {
      buildTarget: 'addon'
    }
  }
}

Addons, when styling things under /tests/dummy/app, your addon's dummy app

// ember-cli-build.js
module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-cli-tailwind': {
      buildTarget: 'dummy'
    }
  })
});

Usage

Once installed, all of Tailwind's classes should be available to you.

You can see the default values, and change them, by looking at the generated files under /app/tailwind.

Styleguide

If you serve your Ember app and visit /tailwind, you should see a styleguide showing a summary of all your configured classes. It will rebuild as you modify Tailwind's default configuration.

Utilities

You can add new utilities of your own by adding them to files under /app/tailwind/utilities. You can either use one file or one per utility.

// app/tailwind/utilities/outline-none.css
.outline-none {
  outline: none;
}

The file will get automatically added to your build, and in the right order (so it will override other rules as you'd expect).

Components

You can define Tailwind components by adding files under app/tailwind/components.

// app/tailwind/components/buttons.css
.btn-blue {
  @apply .bg-blue .text-white .font-bold .py-2 .px-4 .rounded;
}
.btn-blue:hover {
  @apply .bg-blue-dark;
}

Files added here will automatically be added to your build.

Configuration

shouldIncludeStyleguide

Ember CLI Tailwind ships with a styleguide that can be added to the host application's router at the /tailwind URL.

The config option ENV['ember-cli-tailwind'].shouldIncludeStyleguide determines whether this styleguide is included. By default, it is false in the production environment, and true otherwise.

You can overwrite it to change this default behavior.