diff --git a/CHANGELOG.md b/CHANGELOG.md
index e831c98e6fa5..cf47b7b813e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,22 @@
 # CHANGELOG
 
+- feature: Enable [CSS nesting](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting) syntax by default when using Tailwind:
+  
+  ```
+  .button {
+    @apply p-2 font-semibold bg-gray-500;
+    &:hover {
+      @apply bg-red-500;
+    }
+    .icon {
+      @apply w-4 h-4;
+    }
+    span {
+      @apply text-sm;
+    }
+  }
+  ```
+
 ## Unreleased
 
 ## v7.1.0
diff --git a/__fixtures__/test-project/web/config/postcss.config.js b/__fixtures__/test-project/web/config/postcss.config.js
index ca420cad420e..3cdce19941b7 100644
--- a/__fixtures__/test-project/web/config/postcss.config.js
+++ b/__fixtures__/test-project/web/config/postcss.config.js
@@ -2,6 +2,7 @@ const path = require('path')
 
 module.exports = {
   plugins: [
+    require('tailwindcss/nesting'),
     require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.js')),
     require('autoprefixer'),
   ],
diff --git a/packages/cli/src/commands/setup/ui/templates/postcss.config.js.template b/packages/cli/src/commands/setup/ui/templates/postcss.config.js.template
index ca420cad420e..3cdce19941b7 100644
--- a/packages/cli/src/commands/setup/ui/templates/postcss.config.js.template
+++ b/packages/cli/src/commands/setup/ui/templates/postcss.config.js.template
@@ -2,6 +2,7 @@ const path = require('path')
 
 module.exports = {
   plugins: [
+    require('tailwindcss/nesting'),
     require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.js')),
     require('autoprefixer'),
   ],