fix(module): Nuxt 2 support (#508)

nuxt2-playground/README.md

@@ -0,0 +1,22 @@
+# codesandbox-nuxt-tailwindcss
+
+> Nuxt starter for CodeSandBox with TailwindCSS
+
+## Build Setup
+
+```bash
+# install dependencies
+$ yarn install
+
+# serve with hot reload at localhost:3000
+$ yarn dev
+
+# build for production and launch server
+$ yarn build
+$ yarn start
+
+# generate static project
+$ yarn run generate
+```
+
+For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).

nuxt2-playground/components/TButton.vue

@@ -0,0 +1,17 @@
+<template>
+  <button class="btn btn-blue">
+    <slot>Button</slot>
+  </button>
+</template>
+
+<style lang="postcss" scoped>
+.btn {
+  @apply font-bold py-2 px-4 rounded;
+  &.btn-blue {
+    @apply bg-blue-500 text-white;
+    &:hover {
+      @apply bg-blue-700;
+    }
+  }
+}
+</style>

nuxt2-playground/layouts/default.vue

@@ -0,0 +1,21 @@
+<template>
+  <nuxt class="mx-auto p-4" />
+</template>
+
+<script>
+export default {
+  head: {
+    title: 'Nuxt.js with TailwindCSS',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      {
+        hid: 'description',
+        name: 'description',
+        content: 'Nuxt.js with TailwindCSS example'
+      }
+    ],
+    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
+  }
+}
+</script>

nuxt2-playground/nuxt.config.js

@@ -0,0 +1,11 @@
+import localModule from '../src/module'
+
+export default {
+  /*
+   ** Nuxt.js modules
+   */
+  buildModules: [
+    // Doc: https://github.com/nuxt-community/tailwindcss-module
+    localModule
+  ]
+}

nuxt2-playground/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "nuxt-dark-tailwindcss",
+  "version": "1.0.0",
+  "description": "Nuxt.js example with @nuxtjs/color-mode and @nuxtjs/tailwindcss module.",
+  "author": "Atinux",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate"
+  },
+  "dependencies": {
+    "nuxt": "2.15.8",
+    "postcss": "8.4.14"
+  },
+  "keywords": []
+}

nuxt2-playground/pages/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <div class="max-w-sm rounded overflow-hidden shadow-lg mb-4">
+      <div class="px-6 py-4 pb-2">
+        <div class="text-customcolor">
+          this text is a custom red color
+        </div>
+      </div>
+      <div class="px-6 py-4">
+        <span class="badge mr-2">this is red in css using apply</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.badge {
+  @apply text-customcolor;
+}
+</style>

nuxt2-playground/sandbox.config.json

@@ -0,0 +1,8 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "container": {
+    "node": "14"
+  }
+}

nuxt2-playground/tailwind.config.js

@@ -0,0 +1,9 @@
+/*
+ ** TailwindCSS Configuration File
+ **
+ ** Docs: https://tailwindcss.com/docs/configuration
+ ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
+ */
+module.exports = {
+  theme: { extend: { colors: { customcolor: '#FF0000' } } }
+}