diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
deleted file mode 100644
index 5682a273ec..0000000000
--- a/.stylelintrc.cjs
+++ /dev/null
@@ -1,38 +0,0 @@
-module.exports = {
-  extends: [
-    'stylelint-config-html',
-    'stylelint-config-recommended-scss',
-    'stylelint-config-recommended-vue/scss',
-  ],
-  overrides: [
-    {
-      files: [
-        '**/*.vue',
-        '**/*.scss',
-      ],
-      rules: {
-        'unit-disallowed-list': [
-          ['rem', 'em'],
-        ],
-        // Only allow @kong/design-tokens CSS custom properties
-        'custom-property-pattern': [
-          '^(kui).+$',
-          {
-            message: "Expected custom property \"%s\" to be sourced from @kong/design-tokens with prefix '--kui-'",
-          },
-        ],
-        'custom-property-no-missing-var-function': true,
-        // Disable the following rules
-        'no-descending-specificity': null,
-      },
-    },
-  ],
-  plugins: [
-    'stylelint-order',
-    '@kong/design-tokens/stylelint-plugin',
-  ],
-  rules: {
-    'order/properties-alphabetical-order': true,
-    '@kong/design-tokens/use-proper-token': true,
-  },
-}
diff --git a/.stylelintrc.mjs b/.stylelintrc.mjs
new file mode 100644
index 0000000000..646ed54d3e
--- /dev/null
+++ b/.stylelintrc.mjs
@@ -0,0 +1,27 @@
+export default {
+  extends: [
+    'stylelint-config-html',
+    'stylelint-config-recommended-scss',
+    'stylelint-config-recommended-vue/scss',
+  ],
+  plugins: [
+    'stylelint-order',
+    '@kong/design-tokens/stylelint-plugin',
+    '@stylistic/stylelint-plugin',
+  ],
+  rules: {
+    'order/properties-alphabetical-order': true,
+    '@kong/design-tokens/use-proper-token': true,
+    '@stylistic/indentation': [2, { baseIndentLevel: 0 }],
+    // Only allow @kong/design-tokens or `--kong-ui-*` CSS custom properties
+    'custom-property-pattern': [
+      '^(kui).+$',
+      {
+        message: "Expected custom property \"%s\" to be sourced from @kong/design-tokens with prefix '--kui-'",
+      },
+    ],
+    'custom-property-no-missing-var-function': true,
+    // Disable the following rules
+    'no-descending-specificity': null,
+  },
+}
diff --git a/package.json b/package.json
index 9dbf4714ac..dae887fdc9 100644
--- a/package.json
+++ b/package.json
@@ -84,6 +84,7 @@
     "@kong/eslint-config-kong-ui": "^1.1.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
+    "@stylistic/stylelint-plugin": "^2.1.2",
     "@types/inquirer": "^9.0.7",
     "@types/node": "^20.14.2",
     "@types/sortablejs": "^1.15.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f03b76b9f4..0a4d271f46 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -84,6 +84,9 @@ importers:
       '@semantic-release/git':
         specifier: ^10.0.1
         version: 10.0.1(semantic-release@24.0.0(typescript@5.4.5))
+      '@stylistic/stylelint-plugin':
+        specifier: ^2.1.2
+        version: 2.1.2(stylelint@16.6.1(typescript@5.4.5))
       '@types/inquirer':
         specifier: ^9.0.7
         version: 9.0.7
@@ -772,7 +775,6 @@ packages:
 
   '@evilmartians/lefthook@1.6.16':
     resolution: {integrity: sha512-HeImp/u3rkCNghbukpz6/cBti3P/DB3YbqVVyK/DDMoGXGxl4GCycSpsk+0CZ1wCVherf47NfL0i96346CCk3A==}
-    cpu: [x64, arm64, ia32]
     os: [darwin, linux, win32]
     hasBin: true
 
@@ -1046,6 +1048,12 @@ packages:
     peerDependencies:
       eslint: '>=8.40.0'
 
+  '@stylistic/stylelint-plugin@2.1.2':
+    resolution: {integrity: sha512-JsSqu0Y3vsX+PBl+DwULxC0cIv9C1yIcq1MXkx7pBOGtTqU26a75I8MPYMiEYvrsXgsKLi65xVgy1iLVSZquJA==}
+    engines: {node: ^18.12 || >=20.9}
+    peerDependencies:
+      stylelint: ^16.0.2
+
   '@types/conventional-commits-parser@5.0.0':
     resolution: {integrity: sha512-loB369iXNmAZglwWATL+WRe+CRMmmBPtpolYzIebFaX4YA3x+BEfLqhUAV9WanycKI3TG1IMr5bMJDajDKLlUQ==}
 
@@ -4010,6 +4018,9 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  style-search@0.1.0:
+    resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
+
   stylelint-config-html@1.1.0:
     resolution: {integrity: sha512-IZv4IVESjKLumUGi+HWeb7skgO6/g4VMuAYrJdlqQFndgbj6WJAXPhaysvBiXefX79upBdQVumgYcdd17gCpjQ==}
     engines: {node: ^12 || >=14}
@@ -5588,6 +5599,17 @@ snapshots:
       - supports-color
       - typescript
 
+  '@stylistic/stylelint-plugin@2.1.2(stylelint@16.6.1(typescript@5.4.5))':
+    dependencies:
+      '@csstools/css-parser-algorithms': 2.6.3(@csstools/css-tokenizer@2.3.1)
+      '@csstools/css-tokenizer': 2.3.1
+      '@csstools/media-query-list-parser': 2.1.11(@csstools/css-parser-algorithms@2.6.3(@csstools/css-tokenizer@2.3.1))(@csstools/css-tokenizer@2.3.1)
+      is-plain-object: 5.0.0
+      postcss-selector-parser: 6.1.0
+      postcss-value-parser: 4.2.0
+      style-search: 0.1.0
+      stylelint: 16.6.1(typescript@5.4.5)
+
   '@types/conventional-commits-parser@5.0.0':
     dependencies:
       '@types/node': 20.14.2
@@ -8714,6 +8736,8 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  style-search@0.1.0: {}
+
   stylelint-config-html@1.1.0(postcss-html@1.7.0)(stylelint@16.6.1(typescript@5.4.5)):
     dependencies:
       postcss-html: 1.7.0