# Setting up TailwindCSS + SASS with EmberJS

Let's get started!

## Creating an EmberJS project

*See* [*https://guides.emberjs.com/release/getting-started/quick-start/*](https://guides.emberjs.com/release/getting-started/quick-start/) *for more information.*

If you haven't already, you can install the [Ember CLI](https://cli.emberjs.com/) using the following command:

```bash
npm install -g ember-cli
```

Then, create a fresh new Ember application:

```bash
ember new my-ember-app --lang en
```

Navigate into the directory of your new Ember app (`cd my-ember-app`) before running any of the commands in the next section.

## Adding TailwindCSS + SASS

First, let's begin by installing the necessary dependencies:

```bash
npm i -D ember-cli-postcss postcss-scss autoprefixer tailwindcss
```

Next, create your `tailwind.config.js` file in the root directory:

```bash
npx tailwind init
```

Update `module.exports` to reflect something like this:

```javascript
// tailwind.config.js

module.exports = {
    content: ["./app/**/*.{gjs,gts,hbs,html,js,ts}"],
    // ...
}
```

Add the following options to `ember-cli-build.js`:

```diff
// ember-cli-build.js

// ...

module.exports = function (defaults) {
    const app = new EmberApp(defaults, {
+       postcssOptions: {
+           compile: {
+               extension: "scss",
+               enabled: true,
+               parser: require("postcss-scss"),
+               plugins: [
+                   {
+                       module: require("autoprefixer"),
+                       options: {},
+                   },
+                   {
+                       module: require("tailwindcss"),
+                       options: {
+                           config: "./tailwind.config.js",
+                       },
+                   },
+               ],
+           },
+       },
    });

    return app.toTree();
};
```

*Note that you will need to restart the server (run* `npm start` *again) to see changes after making edits to* `ember-cli-build.js` *.*

Rename `app/styles/app.css` to `app/styles/app.scss`.

## Conclusion

And that's it! If you have any questions or comments, feel free to let me know.

If you would like to see the full code for this tutorial, check out [klickers/embertwscss](https://github.com/klickers/embertwscss).