Ember.Js: Installing Tailwind CSS

README.md

Ember.Js: Installing Tailwind CSS

TL;DR

$ 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  
$ npm install -save-dev postcss-import              # Optional: If you want to use the @import statement

/* app/styles/app.css */

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

// ember-cli-build.js

// ... 

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

Overview

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

• https://tailwindcss.com/

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.

Installing ember-cli-postcss

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.

Install Tailwind

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

Add Tailwind to your CSS

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 */

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

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

Create your Tailwind config file (optional)

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.

Process your CSS with Tailwind

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

Now your done, you have successfully added PostCSS and Tailwind to your app.

Install postcss-import (optional)

To be able to import styles from other files with the @import statement and split your CSS in multiple file, you need postcss-import:

# Using npm 
$ npm install --save-dev postcss-import

# Using Yarn 
$ yarn add --dev postcss-import

Since postcss-import is a PostCSS plugin (like tailwindcss), you have to add it your build chain.

This means adding postcss-import 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: [
          { module: require('postcss-import') }, 
          require('tailwindcss'), 
          // require('tailwindcss')('./app/styles/tailwind.config.js'), // If you have a Tailwind config file. 
        ]
      }
    }
  });
  
  // ...
};

Now you can use the @import statement in your app.css:

/* app/styles/app.css */

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

@import "custom"  /* This will import the CSS form custom.css */

Thanks for putting this together. I'm getting an eslint error on the tailwind.config.js that reads 'module' is not defined. is it best to just ignore it?

Yes, you can ignore the eslint error.

In case someone is still looking for a solution for the 'module' is not found. eslint errors;
You can add it to the .eslintrc.js -> overrides section:

overrides: [
    // node files
    {
      files: [
        './.eslintrc.js',
        './.prettierrc.js',
        './.stylelintrc.js',
        './.template-lintrc.js',
        './ember-cli-build.js',
        './testem.js',
        './blueprints/*/index.js',
        './config/**/*.js',
        './lib/*/index.js',
        './server/**/*.js',
        './postcss.config.js', <- Add here
        './tailwind.config.js', <- Add here
      ],
      parserOptions: {
        sourceType: 'script',
      },
      env: {
        browser: false,
        node: true,
      },
      extends: ['plugin:n/recommended'],
    },
    ...