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.
Top comments (0)