$ 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.

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 first 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. 
        ]
      }
    }
  });
  
  // ...
};