title: Nested syntax with PostCSS for :hover and :focus
body: <p>I'm using TailwindCSS and PostCSS and I have this css code:</p>
  <pre class="lang-css prettyprint-override"><code>.btn {
    @apply py-1;
    @apply px-4;
    @apply border;
    @apply rounded;
  }
  
  .btn:hover {
    @apply bg-white text-black;
  }
  
  .btn:focus {
    @apply bg-black text-white;
  }
  </code></pre>
  <p>Is there a native way in PostCSS (or with a plugin) to write this code like the below?</p>
  <pre class="lang-css prettyprint-override"><code>.btn {
    @apply py-1;
    @apply px-4;
    @apply border;
    @apply rounded;
  
    &amp;:hover {
      @apply bg-white text-black;
    }
    
    &amp;:focus {
      @apply bg-black text-white;
    }
  }
  </code></pre>