Add Nuxt support

examples/nuxt/README.md

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

examples/nuxt/components/AppButton.vue

@@ -0,0 +1,60 @@
+<template>
+  <NuxtLink
+    v-if="to"
+    :to="to"
+    :class="
+      tw([
+        'no-underline inline-block uppercase rounded font-medium text(sm base) shadow(hover:md) px-4 py-2',
+        variant === 'primary' && 'text-black bg-green(500 hover:600)',
+        variant === 'secondary' && 'text-gray-900 bg-gray(200 hover:300)',
+      ])
+    "
+  >
+    <slot />
+    <div v-if="$slots.icon" :class="tw('inline-block stroke-current w-5 h-5')">
+      <slot name="icon" />
+    </div>
+  </NuxtLink>
+  <a
+    v-else
+    :href="href"
+    target="_blank"
+    rel="noopener"
+    :class="
+      tw([
+        'no-underline inline-block uppercase rounded font-medium text(sm base) shadow(hover:md) px-4 py-2',
+        variant === 'primary' && 'text-black bg-green(500 hover:600)',
+        variant === 'secondary' && 'text-gray-900 bg-gray(200 hover:300)',
+      ])
+    "
+  >
+    <slot />
+    <div v-if="$slots.icon" :class="tw('inline-block stroke-current w-5 h-5')">
+      <slot name="icon" />
+    </div>
+  </a>
+</template>
+
+<script>
+export default {
+  props: {
+    to: {
+      type: [String, Object],
+      default: null,
+    },
+    href: {
+      type: String,
+      default: '',
+    },
+    variant: {
+      type: String,
+      default: 'primary',
+    },
+  },
+  computed: {
+    tw() {
+      return this.$tw
+    },
+  },
+}
+</script>

examples/nuxt/components/IconLink.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 30"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-external-link"
+    x="0px"
+    y="0px"
+  >
+    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    <polyline points="15 3 21 3 21 9" />
+    <line x1="10" y1="14" x2="21" y2="3" />
+  </svg>
+</template>

examples/nuxt/components/Logo.vue

@@ -0,0 +1,45 @@
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 452 342"
+    xmlns="http://www.w3.org/2000/svg"
+    :class="tw('inline-block')"
+  >
+    <g fill="none" fill-rule="evenodd">
+      <path
+        d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
+        :class="tw(({ theme }) => ({ fill: theme('colors.green.500') }))"
+      />
+      <path
+        d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
+        :class="tw(({ theme }) => ({ fill: theme('colors.green.700') }))"
+      />
+      <path
+        d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
+        :class="tw(({ theme }) => ({ fill: theme('colors.white') }))"
+        fill-rule="nonzero"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    width: {
+      type: Number,
+      default: 452,
+    },
+    height: {
+      type: Number,
+      default: 342,
+    },
+  },
+  computed: {
+    tw() {
+      return this.$tw
+    },
+  },
+}
+</script>

examples/nuxt/layouts/default.vue

@@ -0,0 +1,34 @@
+<template>
+  <div
+    :class="
+      tw(() => {
+        const styles = {
+          ':global': {
+            html: apply('bg-gray-900 text-white'),
+          },
+        }
+        return styles
+      })
+    "
+    class="global"
+  >
+    <div :class="tw('flex justify-center items-center text-center min-h-screen')" class="layout">
+      <Nuxt />
+    </div>
+  </div>
+</template>
+
+<script>
+import { apply } from 'twind/css'
+
+export default {
+  computed: {
+    tw() {
+      return this.$tw
+    },
+    apply() {
+      return apply
+    },
+  },
+}
+</script>

examples/nuxt/nuxt.config.js

@@ -0,0 +1,50 @@
+export default {
+  // Target (https://go.nuxtjs.dev/config-target)
+  target: 'static',
+
+  // Global page headers (https://go.nuxtjs.dev/config-head)
+  head: {
+    htmlAttrs: {
+      lang: 'en',
+    },
+    title: 'Twind + Nuxt.js',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      {
+        hid: 'description',
+        name: 'description',
+        content: 'Using Twind with Nuxt.js',
+      },
+    ],
+    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
+  },
+
+  // Global CSS (https://go.nuxtjs.dev/config-css)
+  css: [],
+
+  // Auto import components (https://go.nuxtjs.dev/config-components)
+  components: true,
+
+  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
+  buildModules: ['@twind/nuxt'],
+
+  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
+  plugins: [],
+
+  // Modules (https://go.nuxtjs.dev/config-modules)
+  modules: [],
+
+  // Set options for twind module
+  twind: {
+    preflight: true,
+    theme: {},
+    plugins: {},
+    variants: {},
+    darkMode: 'class',
+    ssr: true,
+  },
+
+  // Build Configuration (https://go.nuxtjs.dev/config-build)
+  build: {},
+}

examples/nuxt/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@twind/nuxt-example",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate"
+  },
+  "dependencies": {
+    "@twind/nuxt": "^1.0.0",
+    "nuxt": "2.15.6"
+  }
+}

examples/nuxt/pages/about.vue

@@ -0,0 +1,47 @@
+<template>
+  <div :class="tw('max-w-7xl mx-auto py-24 px-4 sm:px-6 lg:px-8')">
+    <div :class="tw('max-w-3xl mx-auto')">
+      <h2 :class="tw('text-4xl leading-normal pb-8')">
+        Hello from <span :class="tw('text-green-500')">{{ name }}</span>
+      </h2>
+      <div
+        :class="tw('px-4 py-3 leading-normal text-green-100 bg-green-900 rounded-lg')"
+        role="alert"
+      >
+        <p :class="tw('font-bold text-white!')">The below content is rendered client-side only</p>
+        <p>For content rendered client-side only, it is styled dynamically in-browser.</p>
+      </div>
+      <ClientOnly>
+        <div :class="tw('container mt-8')">
+          <h2 :class="tw('text-2xl font-medium pt-10 pb-4 text-center')">Client Only</h2>
+          <p :class="tw('leading-loose')">
+            Donec volutpat orci tortor, eget hendrerit nisl volutpat in. Phasellus posuere, orci ut
+            varius tincidunt, felis augue suscipit magna, quis hendrerit nulla velit eu ipsum. Nunc
+            at tellus sed augue vulputate luctus sit amet sed dui. Pellentesque libero purus,
+            aliquam quis massa ac, fringilla blandit odio. Phasellus vitae porttitor ante.
+          </p>
+        </div>
+      </ClientOnly>
+      <p :class="tw('mt-8')">
+        <AppButton to="/" variant="secondary" :class="tw('sm:mr-4 py-3 px-6 text-base')">
+          Back to home
+        </AppButton>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  asyncData() {
+    return {
+      name: process.server ? 'server' : 'client',
+    }
+  },
+  computed: {
+    tw() {
+      return this.$tw
+    },
+  },
+}
+</script>

examples/nuxt/pages/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <section>
+    <div>
+      <Logo :width="350" />
+      <h1 :class="tw('text-8xl font-medium mb-6')">
+        NUXT<span :class="tw('text-green-500')">JS</span> + Twind
+      </h1>
+      <h2 :class="tw('text-4xl xl:text-5xl font-light leading-tight mb-6')">
+        Tailwind-in-JS for Nuxt!
+      </h2>
+      <div :class="tw('pt-4')">
+        <AppButton to="/about" variant="secondary" :class="tw('sm:mr-4 mb-4 py-3 px-6')">
+          About
+        </AppButton>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  computed: {
+    tw() {
+      return this.$tw
+    },
+  },
+}
+</script>

examples/nuxt/static/favicon.ico

@@ -0,0 +1 @@
+��i���k����$r����m��zƧu�1��m��7�޻���tsOq�=o�<o���_�M���-j؜�����'��

package.json

@@ -28,5 +28,6 @@
   "workspaces": [
     "packages/*",
     "examples/*"
-  ]
+  ],
+  "version": "0.0.0"
 }

packages/nuxt/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 [these people](https://github.com/tw-in-js/use-twind-with/graphs/contributors)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.