$ ember install ember-cli-postcss                   # Install ember-cli-postcss
$ npm install --save-dev tailwindcss                # Install tailwindcss


$ npx tailwind init app/styles/tailwind.config.js   # Optional: Generate a Tailwind config file for your project  

/* app/styles/app.css */

@tailwind base;

@tailwind components;

@tailwind utilities;

// ember-cli-build.js

// ... 

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          require('tailwindcss'), 
          // require('tailwindcss')('./app/styles/tailwind.config.js'), // If you have a Tailwind config file. 
        ]
      }
    }
  });
  
  // ...
};

The goal is to make your Ember.js app integrate with PostCSS and use Tailwind as a plugin.

PostCSS is a tool for CSS syntax transformations. It allows you to define custom CSS like syntax that could be understandable and transformed by plugins.

• https://github.com/postcss/postcss/blob/master/docs/architecture.md#overview

There is a huge number of plugins, Tailwind been one of them.

The first step is making your app integrate with PostCSS.

You can use an add-on that helps you integreate PostCSS with Ember.js, ember-cli-postcss:

$ ember install ember-cli-postcss

For more about ember-cli-postcss check out the documentation.

Now you can install the Tailwind package directly using npm or yarn:

# Using npm
$ npm install --save-dev tailwindcss

# Using Yarn
$ yarn add --dev tailwindcss

After you install tailwind you need to use the @tailwind directive to inject Tailwind's base, components, and utilities styles into your CSS:

/* app/styles/app.css */

@tailwind base;

@tailwind components;

@tailwind utilities;

Tailwind will swap these directives out at build time with all of its generated CSS.

Note: If you don't need to customize your Tailwind installation you can skip this step, and do it when you need to.

If you'd like to customize your Tailwind installation, you can generate a config file for your project using the Tailwind CLI.

$ npx tailwind init app/styles/tailwind.config.js

For more about the Tailwind Configuration check out the documentation.

The last step is adding Tailwind as a PostCSS plugin in your build chain.

This means adding tailwindcss to the list of plugins you pass to ember-cli-postcss in your ember-cli-build.js.

// ember-cli-build.js

// ... 

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          require('tailwindcss'), 
          // require('tailwindcss')('./app/styles/tailwind.config.js'), // If you have a Tailwind config file. 
        ]
      }
    }
  });
  
  // ...
};