feat: use postcss preset 1 for nesting support

nuxt-modules · Jun 6, 2019 · e80dcc5 · clarkdo · Jun 6, 2019 · atinux
1 parent d5beede
commit e80dcc5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/example/pages/index.vue b/example/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-indigo-900 text-center py-4 lg:px-4">
+  <div class="banner">
     <div class="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert">
       <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">New</span>
       <span class="font-semibold mr-2 text-left flex-auto">Get the coolest t-shirts from our brand new store</span>
@@ -8,8 +8,14 @@
   </div>
 </template>
 
-<script>
-export default {
-
+<style scoped>
+.banner {
+  @apply bg-indigo-900 text-center py-4;
+  @screen lg {
+    @apply px-4
+  }
+  &:hover {
+    @apply bg-indigo-800;
+  }
 }
-</script>
+</style>
diff --git a/lib/module.js b/lib/module.js
@@ -26,6 +26,7 @@ module.exports = async function (moduleOptions) {
   ** Set PostCSS config
   ** It has to be set before `nuxt-purgecss`
   */
+  this.options.build.postcss.preset.stage = 1 // see https://tailwindcss.com/docs/using-with-preprocessors#future-css-features
   this.options.build.postcss.plugins = this.options.build.postcss.plugins || {}
   this.options.build.postcss.plugins.tailwindcss = this.options.build.postcss.plugins.tailwindcss || resolve(srcDir, 'tailwind.config.js')