Setting up TailwindCSS + SASS with EmberJS

Let's get started!

Creating an EmberJS project

See https://guides.emberjs.com/release/getting-started/quick-start/ for more information.

If you haven't already, you can install the Ember CLI using the following command:

npm install -g ember-cli

Then, create a fresh new Ember application:

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:

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

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

npx tailwind init

Update module.exports to reflect something like this:

// tailwind.config.js

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

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

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