Merge pull request #13 from Atinux/master

Add NuxtJS example

Author: adamwathan

README.md

@@ -5,6 +5,7 @@ A repository of examples showing how to setup Tailwind in a variety of different
 ## Available Examples
 
 - [vue-cli](examples/vue-cli)
+- [nuxt](examples/nuxt)
 
 ## Requested Examples
 

examples/nuxt/.gitignore

@@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Nuxt files
+.nuxt/

examples/nuxt/README.md

@@ -0,0 +1,70 @@
+# Nuxt
+
+Setting up Tailwind with [NuxtJS](https://nuxtjs.org) is really simple, just add the [@nuxtjs/tailwindcss](https://github.com/Atinux/nuxt-tailwindcss) module:
+
+```sh
+npm install @nuxtjs/tailwindcss
+```
+
+Then add it to your `nuxt.config.js` file:
+
+```js
+export default {
+  modules: [
+    '@nuxtjs/tailwindcss'
+  ]
+}
+```
+
+That's it ✨
+
+The module will:
+- Create a CSS file for your Tailwind styles in `assets/css/tailwind.css`:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+- Import this file as global css
+- Create a `tailwind.config.js` file.
+
+```js
+module.exports = {
+  theme: {},
+  variants: {},
+  plugins: []
+}
+```
+- Configure [nuxt-purgecss](https://github.com/Developmint/nuxt-purgecss)
+- Set [postcss-preset-env](https://preset-env.cssdb.org) to stage 1, [learn more here](https://tailwindcss.com/docs/using-with-preprocessors#future-css-features)
+
+## Project setup
+
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+
+```
+npm run dev
+```
+
+### Compiles and minifies for production
+
+```
+npm run build
+```
+
+### Start the server for production
+
+```
+npm run start
+```
+
+### Generate as a static website
+
+```
+npm run generate
+```

examples/nuxt/assets/css/tailwind.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

examples/nuxt/nuxt.config.js

@@ -0,0 +1,12 @@
+export default {
+  head: {
+    title: 'NuxtJS + TailwindCSS',
+    meta: [
+      { hid: 'charset', charset: 'utf-8' },
+      { hid: 'viewport', name: 'viewport', content: 'width=device-width, initial-scale=1' }
+    ]
+  },
+  modules: [
+    '@nuxtjs/tailwindcss'
+  ]
+}

examples/nuxt/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "nuxt",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate"
+  },
+  "dependencies": {
+    "@nuxtjs/tailwindcss": "^0.1.0",
+    "nuxt-start": "^2.8.1"
+  },
+  "devDependencies": {
+    "nuxt": "^2.8.1"
+  }
+}

examples/nuxt/pages/about.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="min-h-screen flex flex-col items-center justify-center">
+    <h1 class="text-5xl font-bold text-teal-600">Hello from Nuxt.</h1>
+    <n-link to="/">Home page</n-link>
+  </div>
+</template>

examples/nuxt/pages/index.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="min-h-screen flex flex-col items-center justify-center">
+    <h1 class="text-5xl font-bold text-teal-300">Hello from Tailwind.</h1>
+    <n-link to="/about">About page</n-link>
+  </div>
+</template>

examples/nuxt/static/favicon.ico

@@ -0,0 +1,11 @@
+/*
+** TailwindCSS Configuration File
+**
+** Docs: https://tailwindcss.com/docs/configuration
+** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
+*/
+module.exports = {
+  theme: {},
+  variants: {},
+  plugins: []
+}