v0.7.0

💥 Breaking Change

• #70 Upgrade Tailwind to 0.7.0. See Tailwind's release notes for everything that's changed. It's likely you won't have to make any change in your own app.

v0.6.3

🐛 Bug Fix

• #64 Fix styleguide issue for template-only-glimmer-components apps

🚀 Enhancement

• #62 Cache tailwind re-builds @xomaczar

📖Documentation

• #60 Add missing require @rwwagner90

v0.6.2

This release contains some bugfixes, as well as a new way to consume Ember CLI Tailwind from your addons. Here's the relevant section from the README at the time of this release.

Advanced addon usage

build-tailwind and the shouldBuildTailwind option

Ember CLI Tailwind comes with a function you can use when you want more control over how to work with the built tailwind.css file.

The function is in the lib directory and can be require'd in node:

const buildTailwind = require('ember-cli-tailwind/lib/build-tailwind');

To use the function, pass in your addon instance (usually this if you're working in a hook in index.js):

let tailwind = buildTailwind(this);

The return value is a Broccoli tree, and thus can be used in different treeFor hooks to end up in your build.

If you're using this, you probably also want to disable Ember CLI Tailwind's default behavior, which will concat the built tailwind.css file into your addon's generated vendor.css file – otherwise you could end up with two versions of Tailwind in your CSS.

You can do that using the shouldBuildTailwind config option:

// index.js
module.exports = {
  name: 'your-addon',
  
  options: {
    'ember-cli-tailwind': {
      shouldBuildTailwind: false
    }
  }
}

Now you are responsible for calling buildTailwind and ensuring the resulting tree ends up in your output.

As an example of how you might use this, say you're building a UI component library as an Ember Addon. You want your component library to use Ember CLI Tailwind, but you're using Sass, and you'd like to explicitly @import the built tailwind.css file in your component library so that you can write other CSS classes that @extend Tailwind's classes.

Here's what that would look like:

// index.js
const buildTailwind = require('ember-cli-tailwind/lib/build-tailwind');

module.exports = {
  name: 'your-addon',
  
  config() {
    return {
      'ember-cli-tailwind': {
        shouldBuildTailwind: false
      }
    };
  },

  treeForAddonStyles(tree) {
    let trees = tree ? [ tree ] : [];
  
    trees.push(buildTailwind(this));
  
    return new MergeTrees(trees);
  }
};

Now that the built tailwind.css file is in your Addon's style tree, you can import it in other Sass files:

// addon/styles/addon.scss
@import 'tailwind';

body {
  @extend .antialiased;
  @extend .font-sans;
  @extend .text-grey-darkest;
}

You could even use Sass variables inside of Tailwind's config, since you can set those variables before @import'ing Tailwind:

// tailwind/config/colors.js

export default {
  brand: '$brand'
}

$brand: '#3490DC';
@import 'tailwind';

v0.6.1

Better addon support. Bug fixes.

v0.6.0

buildTarget is now automatically detected based on your file structure.

You can delete ENV['ember-cli-tailwind].buildTarget from your apps and addons.

v0.5.1

Bugfixes.

v0.5.0

Upgrades TailwindCSS from 0.4.1 to 0.5.2. Check out Tailwind's 0.5 release notes for all the changes.

For the purposes of this library, you should just need to re-run ember generate ember-cli-tailwind when upgrading, and compare the diffs (notably the config files with the @tailwind directives) to make sure you've included everything.

You can also delete the tailwind/tailwind-preflight.css and tailwind/tailwind-utilities.css files as they are no longer needed.

v0.4.1

• Adds shouldIncludeStyleguide config option that when false, excludes the /tailwind styleguide route from the build.
• Removes unused ember-string-helpers addon (and gets rid of associated deprecation).

v0.4.0

You can now use glob imports in your tailwind/modules.css file, which is useful for components and utilities:

/* tailwind/modules.css */

@import "./components/*.css";
@import "./utilities/*.css";

v0.3.0

We moved the generated /tailwind directory from /app/styles/tailwind to /app/tailwind. We also moved some files within the /tailwind directory - for example, the style files now live in tailwind/config. This is a breaking change. You should run the generator to see how the layout has changed and make sure your existing settings make it into the right files.

We also added better support for addons, but this comes with some new required configuration. We hope to make this easier in the future.

For now, you'll need to set 'ember-cli-tailwind'['buildTarget'] to either app, dummy or `addon.

Use in apps

// ember-cli-build.js
module.exports = function(defaults) {
  let app = new EmberAddon(defaults, {
    // Add options here

    'ember-cli-tailwind': {
      buildTarget: 'app'
    }
  });
}

Use in addons

You can use Tailwind in your /addon code, or to style your dummy app.

To style your addon code, add this to index.js:

// index.js
module.exports = {
  name: 'tailwind-dummy-app-test',

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

To style your dummy app, add this to ember-cli-build.js:

// ember-cli-build.js
module.exports = function(defaults) {
  let app = new EmberAddon(defaults, {
    // Add options here

    'ember-cli-tailwind': {
      buildTarget: 'dummy'
    }
  });
}