Using PostCSS and Tailwind

Learn how to migrate off of Ember CLI Tailwind and start working directly with the TailwindCSS npm package.

Summary

Ember CLI Tailwind offers a one-line install command to get Tailwind CSS wired up with an Ember app. Unfortunately though, with these kinds of "wrapper addons", the end user is often left waiting on the addon maintainer for upgrades to the core library, and sometimes new core library features are hard due to a bad abstraction in the "wrapper addon".

We're going to be moving off of Ember CLI Tailwind and see how to set up an Ember app directly with PostCSS, which will let us directly pull in tailwindcss from npm (as well as any other npm PostCSS plugins we want to add to our build).

Here are the steps we take:

Remove ember-cli-tailwind from our package.json, and remove @import 'tailwind' from our CSS
When we build, we hit an error. That's because we have some Sass that depends on Tailwind utilities. We want to refactor our Sass so it doesn't depend on anything in Tailwind, because PostCSS is intended to post-process our CSS, and Sass pre-processes it. In our case, we can replace the Sass @extend mixin with Tailwind's @apply directive. That gets our Sass compiling again.
Now our app builds – but we don't have Tailwind. Let's add Tailwind to our project in the "most vanilla" way possible. We'll install Ember CLI Postcss, and configure it using the filter option:
```
postcssOptions: {
  compile: {
    enabled: false,
  },
  filter: {
    enabled: true,
    plugins: [
      // our plugin
    ]
  }
}
```
Next, we'll install TailwindCSS with yarn add tailwindcss@0.7.4 --dev. This is great - we're installing Tailwind directly, meaning we will stay aligned with the core package, be able to take advantage of new features as they come out, and be able to follow their upgrade guides!
Next, following Tailwind's installation instructions, we'll run yarn tailwind init 'app/styles/tailwind.js'. Here we're creating our tailwind.js config file, but we're putting it in the app directory, so that Ember CLI will trigger rebuilds when we change it.
Next, we add Tailwind to our app's css. We can do that by adding
```
@tailwind preflight
@tailwind components
@tailwind utilities;
```
in place of our old @include 'tailwind' code.

Finally, we use the tailwindcss plugin in our PostCSS pipeline, pointing to our config file:

postcssOptions: {
  compile: {
    enabled: false,
  },
  filter: {
    enabled: true,
    plugins: [
      require('tailwindcss')('app/styles/tailwind.js')
    ]
  }
}

Now, when we try to build, we get an error: we're trying to @apply a class that doesn't exist. This is because we generated the default tailwind.js config file, that doesn't have any of our custom values. So we need to copy over the values that we were using from Ember CLI Tailwind, back over to the core tailwind.js file, so we get realigned with the core framework.

Once we do that, copying over any custom utilities and components back into our main styles, our app is working again! Now our project has a direct dependency on Tailwind at 0.7.4, and we can proceed to upgrade to 1.0 on our own using the Tailwind documentation. We can now delete our old /tailwind directory, as well as anything related to ember-cli-tailwind in our app.

Summary

Questions?