DEV Community

Cover image for Setting up TailwindCSS + SASS with EmberJS
Catherine Chen
Catherine Chen

Posted on • Originally published at dev.cathzchen.com

1

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

Then, create a fresh new Ember application:

ember new my-ember-app --lang en
Enter fullscreen mode Exit fullscreen mode

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

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

npx tailwind init
Enter fullscreen mode Exit fullscreen mode

Update module.exports to reflect something like this:

// tailwind.config.js

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

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();
};
Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more