TheLazy.Dev
Portfolio GitHub

Blog

ember |javascript |css |tailwindcss

Ember.js: Installing Tailwind CSS

robert96

Dezmerean Robert

Posted on June 28, 2022

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
Enter fullscreen mode Exit fullscreen mode 
/* app/styles/app.css */

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Enter fullscreen mode Exit fullscreen mode 
// 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.
        ]
      }
    }
  });

  // ...
};
Enter fullscreen mode Exit fullscreen mode

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.

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.

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

  // ...
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

  // ...
};
Enter fullscreen mode Exit fullscreen mode

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 */
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
robert96
Dezmerean Robert

Posted on June 28, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Ember.js: Installing Tailwind CSS
ember Ember.js: Installing Tailwind CSS

June 28, 2022