diff --git a/generators/client/templates/angular/.prettierrc.ejs b/generators/client/templates/angular/.prettierrc.ejs
index 916e4eb9ae94..d88c8851f1cb 100644
--- a/generators/client/templates/angular/.prettierrc.ejs
+++ b/generators/client/templates/angular/.prettierrc.ejs
@@ -1,7 +1,18 @@
 # Prettier configuration
+
 printWidth: 140
 singleQuote: true
-jsxBracketSameLine: false
-parser: typescript
-arrowParens: avoid
 tabWidth: 4
+useTabs: false
+overrides:
+- files: "src/**/{*.ts,*.tsx}"
+  options:
+    jsxBracketSameLine: false
+    arrowParens: avoid
+    parser: typescript
+- files: "src/**/*.css"
+  options:
+    parser: css
+- files: "src/**/*.scss"
+  options:
+    parser: scss
diff --git a/generators/client/templates/react/.prettierrc.ejs b/generators/client/templates/react/.prettierrc.ejs
index 469a68ebef10..b37f275ebc71 100644
--- a/generators/client/templates/react/.prettierrc.ejs
+++ b/generators/client/templates/react/.prettierrc.ejs
@@ -1,6 +1,18 @@
 # Prettier configuration
+
 printWidth: 140
 singleQuote: true
-jsxBracketSameLine: false
-parser: typescript
-arrowParens: avoid
+tabWidth: 2
+useTabs: false
+overrides:
+- files: "src/**/{*.ts,*.tsx}"
+  options:
+    jsxBracketSameLine: false
+    arrowParens: avoid
+    parser: typescript
+- files: "src/**/*.css"
+  options:
+    parser: css
+- files: "src/**/*.scss"
+  options:
+    parser: scss
diff --git a/generators/generator-base-private.js b/generators/generator-base-private.js
index d187bdb2aae1..d95e1dad1c37 100644
--- a/generators/generator-base-private.js
+++ b/generators/generator-base-private.js
@@ -33,7 +33,7 @@ const filter = require('gulp-filter');
 const packagejs = require('../package.json');
 const jhipsterUtils = require('./utils');
 const constants = require('./generator-constants');
-const { prettierTransform, defaultTsPrettierOptions } = require('./generator-transforms');
+const { prettierTransform, defaultTsPrettierOptions, defaultCssPrettierOptions, defaultScssPrettierOptions } = require('./generator-transforms');
 
 const CLIENT_MAIN_SRC_DIR = constants.CLIENT_MAIN_SRC_DIR;
 
@@ -1078,6 +1078,18 @@ module.exports = class extends Generator {
                 prettierTransform(defaultTsPrettierOptions),
                 typescriptFilter.restore
             ]);
+            const scssFilter = filter(['**/*.scss'], { restore: true });
+            generator.registerTransformStream([
+                scssFilter,
+                prettierTransform(defaultScssPrettierOptions),
+                scssFilter.restore
+            ]);
+            const cssFilter = filter(['**/*.css'], { restore: true });
+            generator.registerTransformStream([
+                cssFilter,
+                prettierTransform(defaultCssPrettierOptions),
+                cssFilter.restore
+            ]);
         }
     }
 };
diff --git a/generators/generator-transforms.js b/generators/generator-transforms.js
index aef5157de872..00e3d6d9f81e 100644
--- a/generators/generator-transforms.js
+++ b/generators/generator-transforms.js
@@ -1,13 +1,26 @@
 const through = require('through2');
 const prettier = require('prettier');
 
-const defaultTsPrettierOptions = {
+const defaultPrettierOptions = {
     printWidth: 140,
     singleQuote: true,
+    useTabs: false
+};
+
+const defaultTsPrettierOptions = Object.assign(defaultPrettierOptions, {
     jsxBracketSameLine: false,
-    parser: 'typescript',
     arrowParens: 'avoid',
-};
+    parser: 'typescript',
+});
+
+const defaultCssPrettierOptions = Object.assign(defaultPrettierOptions, {
+    parser: 'css',
+});
+
+const defaultScssPrettierOptions = Object.assign(defaultPrettierOptions, {
+    parser: 'scss',
+});
+
 
 const prettierTransform = function (defaultOptions) {
     const transform = (file, encoding, callback) => {
@@ -29,5 +42,7 @@ const prettierTransform = function (defaultOptions) {
 
 module.exports = {
     prettierTransform,
-    defaultTsPrettierOptions
+    defaultTsPrettierOptions,
+    defaultCssPrettierOptions,
+    defaultScssPrettierOptions
 };