How to setup tailwindcss in an Ember app, in the simplest way I've found

ember_tailwindcss_setup.md

Basic setup

This is the most minimal setup I've found for using tailwindcss and Ember. It will slow down your cold build time.

$ npm install -D ember-cli-postcss tailwindcss postcss-import autoprefixer

// ember-cli-build.js

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function (defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          { module: require('postcss-import') },
          { module: require('autoprefixer') },
          { module: require('tailwindcss') },
        ],
      },
    },
  });

  return app.toTree();
};

/* app/styles/app.css */

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

$ ember s

You should see the tailwind styles take effect now.

Customization (optional)

Later, if you need to customize tailwindcss, you can add a configuration file:

$ npx tailwind init

Even though this uses the default config file location, you need to add it to the tailwindcss object in the postcss config:

// ember-cli-build.js

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function (defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          { module: require('postcss-import') },
          { module: require('autoprefixer') },
          {
            module: require('tailwindcss'),
            options: { config: './tailwind.config.js' },
          },
        ],
      },
    },
  });

  return app.toTree();
};