# 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  
```

```css
/* app/styles/app.css */

@tailwind base;

@tailwind components;

@tailwind utilities;
```

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

## Installing `ember-cli-postcss`

```console
$ ember install ember-cli-postcss
```

For more about `ember-cli-postcss` check out the [documentation](https://jeffjewiss.github.io/ember-cli-postcss/).

## Install Tailwind

```
# Using npm
$ npm install --save-dev tailwindcss

# Using Yarn
$ yarn add --dev tailwindcss
```

## Add Tailwind to your CSS 

```css
/* app/styles/app.css */

@tailwind base;

@tailwind components;

@tailwind utilities;
```

## Create your Tailwind config file *(optional)*

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](https://tailwindcss.com/docs/configuration/).

## Process your CSS with Tailwind using `ember-cli-postcss`

You'll want to add 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`.

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