Enable CSS nesting syntax by default when using Tailwind (redwoodjs#1…

…0116)

I don't think this plugin existed when we first created the Tailwind UI
setup command, but it does now, and is super handy!

This lets you use [nested CSS
syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting)
in your `index.css` right after you install Tailwind.

Trying to nest without this plugin seems to work in development, but
you'll get a warning message in the console each time you save your
`.css` file.

```css
.button {
  @apply flex items-center px-4 py-2;

  .icon {
    @apply w-4 h-4;
  }

  span {
    @apply text-sm;
  }
}
```

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

__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'),
   ],

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'),
   ],