Using Tailwind CSS v3 with Ember JS

Tailwind CSS v3 has been released and there is a bunch of cool new features available (I'm mostly interested in the "just in time" engine being standard now). The standard setup for an ember project has changed a little and there doesn't seem to be a lot of good resources available for this setup.

Create a new ember project.

npx ember-cli new tailwindcss-demo --no-welcome
cd tailwindcss-demo

Install tailwind and related packages.

npm install tailwindcss autoprefixer --save-dev
# no need for purgecss anymore

Install postcss add on.

ember install ember-cli-postcss

Create tailwind config.

# I create a tailwind dir in styles and add the config file there
# this is a personal organizational choice, the config file could live anywhere
mkdir app/styles/tailwind

# create tailwind config file
# last arg is path to config file
# if no arg is provided it will be created at the root of your project
# this path will be needed when updating ember-cli-build.js
npx tailwind init app/styles/tailwind/config.js

There isn't a purge key in the config file anymore. Update the content key with paths to all template files. The config docs are here

// app/styles/tailwind/config.js

module.exports = {
  content: ['./app/**/*.hbs'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Update app/styles/app.css

/* app/styles/app.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

Update ember-build-cli.js

// ember-build-cli.js

'use strict';

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

module.exports = function (defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        // track changes in template, css, scss, and tailwind config files
        cacheInclude: [/.*\.(css|scss|hbs)$/, /.tailwind\/config\.js$/],
        plugins: [
          {
            module: autoprefixer,
            options: {},
          },
          {
            module: tailwind,
            options: {
              config: './app/styles/tailwind/config.js',
            },
          },
        ],
      },
    },
  });

  return app.toTree();
};

That's it. You should be up and running with Ember and Tailwind now!

Repo for this demo.

Comments

[Ondra]

thank you for this ! helped me get tailwind working in my ember app.

[Giuseppe Caruso]

For some reason, it doesn't autogenerate classes.

I.E. If I add a new class that I didn't already used, I have to restart the server to get it generated instead of getting it generated by TW through JIT.

Any idea how to fix that?

[Asa Smith]

I haven't seen that issue. Can you give an example of a class you're adding that isn't being generated?

[Asa Smith]

dev-to-uploads.s3.amazonaws.com/up...

The PostcssCompiler build step should be happening on each build. If you're not seeing that then there might be an issue with how the postcssOptions.compile.cacheInclude key is configured.

[Bijan Rahnema]

Hi this approach is fine in general. I found the tailwind lsp to have problems with tailwind.config.js files not in the root of the project repo. So I recommend restructuring to this default tailwind config in order to profit from css class completion in VSCode, Webstorm, Sublime or any other Editor that makes use of tailwinds lsp.