├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── postcss.config.js
├── public
    ├── _redirects
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── Modal.vue
    ├── main.js
    ├── router.js
    └── views
    │   ├── About.vue
    │   ├── DropdownExample.vue
    │   ├── Home.vue
    │   └── ModalExample.vue
└── yarn.lock


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue + Tailwind Interactive Component Examples
 2 | 
 3 | A small collection of interactive Vue + Tailwind examples, written from scratch.
 4 | 
 5 | [See the examples live on Netlify &rarr;](https://vue-tailwind-examples.netlify.com/)
 6 | 
 7 | ## Project setup
 8 | ```
 9 | yarn install
10 | yarn run serve
11 | ```
12 | 
13 | Or
14 | 
15 | ```
16 | npm install
17 | npm run serve
18 | ```
19 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-playground",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^2.6.5",
12 |     "portal-vue": "^2.1.0",
13 |     "tailwindcss": "^1.0.0-beta.4",
14 |     "vue": "^2.6.6",
15 |     "vue-router": "^3.0.1"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "^3.5.0",
19 |     "@vue/cli-plugin-eslint": "^3.5.0",
20 |     "@vue/cli-service": "^3.5.0",
21 |     "babel-eslint": "^10.0.1",
22 |     "eslint": "^5.8.0",
23 |     "eslint-plugin-vue": "^5.0.0",
24 |     "vue-template-compiler": "^2.5.21"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: [
3 |     require('tailwindcss'),
4 |     require('autoprefixer'),
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | /*    /index.html   200
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adamwathan/vue-tailwind-examples/d166f300795c4776d85507eea344be371aaf77df/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>Vue + Tailwind Examples</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-playground doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app" class="antialiased text-gray-900 flex flex-col min-h-screen bg-gray-200">
 3 |     <router-view class="flex-1"/>
 4 |     <div class="flex-shrink-0 py-12 text-center">
 5 |       <div>
 6 |         <router-link class="font-semibold text-gray-700 hover:underline" to="/dropdown">Dropdown</router-link>
 7 |         <span class="mx-4 text-gray-500">|</span>
 8 |         <router-link class="font-semibold text-gray-700 hover:underline" to="/modal">Modal</router-link>
 9 |       </div>
10 |       <div class="mt-2">
11 |         <a href="https://github.com/adamwathan/vue-tailwind-examples" class="text-sm font-semibold text-gray-600 hover:underline">
12 |           Source on GitHub
13 |         </a>
14 |       </div>
15 |     </div>
16 |     <portal-target name="modals"></portal-target>
17 |   </div>
18 | </template>
19 | 
20 | <style>
21 | @tailwind base;
22 | @tailwind components;
23 | @tailwind utilities;
24 | 
25 | .origin-top-right {
26 |   transform-origin: top right;
27 | }
28 | .transition-all {
29 |   transition-property: all;
30 | }
31 | .transition-fastest {
32 |   transition-duration: 50ms;
33 | }
34 | .transition-faster {
35 |   transition-duration: 100ms;
36 | }
37 | .transition-fast {
38 |   transition-duration: 150ms;
39 | }
40 | .transition-medium {
41 |   transition-duration: 200ms;
42 | }
43 | .ease-out-quad {
44 |   transition-timing-function: cubic-bezier(.25, .46, .45, .94);
45 | }
46 | .ease-in-quad {
47 |   transition-timing-function: cubic-bezier(.55, .085, .68, .53);
48 | }
49 | .scale-70 {
50 |   transform: scale(.7);
51 | }
52 | .scale-100 {
53 |   transform: scale(1);
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adamwathan/vue-tailwind-examples/d166f300795c4776d85507eea344be371aaf77df/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Modal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <portal to="modals">
  3 |     <div v-if="showModal" class="fixed inset-0 flex items-center justify-center">
  4 |       <transition
  5 |         @before-leave="backdropLeaving = true"
  6 |         @after-leave="backdropLeaving = false"
  7 |         enter-active-class="transition-all transition-fast ease-out-quad"
  8 |         leave-active-class="transition-all transition-medium ease-in-quad"
  9 |         enter-class="opacity-0"
 10 |         enter-to-class="opacity-100"
 11 |         leave-class="opacity-100"
 12 |         leave-to-class="opacity-0"
 13 |         appear
 14 |       >
 15 |         <div v-if="showBackdrop">
 16 |           <div class="absolute inset-0 bg-black opacity-25" @click="close"></div>
 17 |         </div>
 18 |       </transition>
 19 | 
 20 |       <transition
 21 |         @before-leave="cardLeaving = true"
 22 |         @after-leave="cardLeaving = false"
 23 |         enter-active-class="transition-all transition-fast ease-out-quad"
 24 |         leave-active-class="transition-all transition-medium ease-in-quad"
 25 |         enter-class="opacity-0 scale-70"
 26 |         enter-to-class="opacity-100 scale-100"
 27 |         leave-class="opacity-100 scale-100"
 28 |         leave-to-class="opacity-0 scale-70"
 29 |         appear
 30 |       >
 31 |         <div v-if="showContent" class="relative">
 32 |           <slot></slot>
 33 |         </div>
 34 |       </transition>
 35 |     </div>
 36 |   </portal>
 37 | </template>
 38 | 
 39 | <script>
 40 | export default {
 41 |   props: ['open'],
 42 |   data() {
 43 |     return {
 44 |       showModal: false,
 45 |       showBackdrop: false,
 46 |       showContent: false,
 47 |       backdropLeaving: false,
 48 |       cardLeaving: false,
 49 |     }
 50 |   },
 51 |   created() {
 52 |     const onEscape = (e) => {
 53 |       if (this.open && e.keyCode === 27) {
 54 |         this.close()
 55 |       }
 56 |     }
 57 | 
 58 |     document.addEventListener('keydown', onEscape)
 59 | 
 60 |     this.$once('hook:destroyed', () => {
 61 |       document.removeEventListener('keydown', onEscape)
 62 |     })
 63 |   },
 64 |   watch: {
 65 |     open: {
 66 |       handler: function (newValue) {
 67 |         if (newValue) {
 68 |           this.show()
 69 |         } else {
 70 |           this.close()
 71 |         }
 72 |       },
 73 |       immediate: true
 74 |     },
 75 |     leaving(newValue) {
 76 |       if (newValue === false) {
 77 |         this.showModal = false
 78 |         this.$emit('close')
 79 |       }
 80 |     }
 81 |   },
 82 |   computed: {
 83 |     leaving() {
 84 |       return this.backdropLeaving || this.cardLeaving
 85 |     }
 86 |   },
 87 |   methods: {
 88 |     show() {
 89 |       this.showModal = true
 90 |       this.showBackdrop = true
 91 |       this.showContent = true
 92 |     },
 93 |     close() {
 94 |       this.showBackdrop = false
 95 |       this.showContent = false
 96 |     }
 97 |   }
 98 | }
 99 | </script>
100 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import PortalVue from 'portal-vue'
 3 | import App from './App.vue'
 4 | import router from './router'
 5 | 
 6 | Vue.config.productionTip = false
 7 | 
 8 | Vue.use(PortalVue)
 9 | 
10 | new Vue({
11 |   router,
12 |   render: h => h(App)
13 | }).$mount('#app')
14 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Home from './views/Home.vue'
 4 | import DropdownExample from './views/DropdownExample.vue'
 5 | import ModalExample from './views/ModalExample.vue'
 6 | 
 7 | Vue.use(Router)
 8 | 
 9 | export default new Router({
10 |   mode: 'history',
11 |   base: process.env.BASE_URL,
12 |   routes: [
13 |     {
14 |       path: '/',
15 |       name: 'home',
16 |       component: Home
17 |     },
18 |     {
19 |       path: '/dropdown',
20 |       name: 'dropdown',
21 |       component: DropdownExample,
22 |     },
23 |     {
24 |       path: '/modal',
25 |       name: 'modal',
26 |       component: ModalExample,
27 |     },
28 |   ]
29 | })
30 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/views/DropdownExample.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex items-center justify-center">
 3 |     <div class="relative">
 4 |       <div v-if="open" @click="open = false" class="fixed inset-0"></div>
 5 |       <button @click="open = !open" class="relative flex items-center focus:outline-none">
 6 |         <img src="https://github.com/adamwathan.png" alt="Adam Wathan's avatar" class="rounded-full h-8 w-8">
 7 |         <span class="ml-2 font-medium">Adam Wathan</span>
 8 |         <svg class="ml-1 h-5 w-5 fill-current text-gray-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 9 |           <path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/>
10 |         </svg>
11 |       </button>
12 |       <transition
13 |         enter-active-class="transition-all transition-fastest ease-out-quad"
14 |         leave-active-class="transition-all transition-faster ease-in-quad"
15 |         enter-class="opacity-0 scale-70"
16 |         enter-to-class="opacity-100 scale-100"
17 |         leave-class="opacity-100 scale-100"
18 |         leave-to-class="opacity-0 scale-70"
19 |       >
20 |         <div v-if="open" class="origin-top-right absolute right-0 mt-2 w-64 bg-white rounded-lg border shadow-md py-2">
21 |           <ul>
22 |             <li>
23 |               <a href="#" class="block px-4 py-2 hover:bg-indigo-500 hover:text-white">Profile</a>
24 |             </li>
25 |             <li>
26 |               <a href="#" class="block px-4 py-2 hover:bg-indigo-500 hover:text-white">Account settings</a>
27 |             </li>
28 |             <li>
29 |               <a href="#" class="block px-4 py-2 hover:bg-indigo-500 hover:text-white">Sign out</a>
30 |             </li>
31 |           </ul>
32 |         </div>
33 |       </transition>
34 |     </div>
35 |   </div>
36 | </template>
37 | 
38 | <script>
39 | export default {
40 |   data() {
41 |     return {
42 |       open: false
43 |     }
44 |   },
45 | }
46 | </script>
47 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="flex justify-center items-center">
3 |     <div class="text-center">
4 |       <h1 class="text-6xl font-bold">Vue + Tailwind</h1>
5 |       <p class="text-xl text-gray-600 tracking-wider uppercase font-bold">Interactive component examples</p>
6 |     </div>
7 |   </div>
8 | </template>
9 | 


--------------------------------------------------------------------------------
/src/views/ModalExample.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex items-center justify-center">
 3 |     <div class="bg-white rounded-lg shadow-md px-6 py-6">
 4 |       <h2 class="font-semibold text-gray-900 text-2xl leading-tight border-b-2 border-gray-200 pb-4">Delete account</h2>
 5 |       <p class="mt-4 text-gray-700">We'll cancel your subscription and remove all of your data from our servers.</p>
 6 |       <div class="mt-6">
 7 |         <button @click="open = true" class="px-4 py-2 text-white font-semibold bg-red-500 hover:bg-red-600 border border-transparent rounded focus:outline-none focus:shadow-outline">
 8 |           Delete my account
 9 |         </button>
10 |         <Modal :open="open" @close="open = false">
11 |           <div class="max-w-lg w-full bg-white rounded-lg shadow-2xl px-6 py-6">
12 |             <h2 class="font-semibold text-gray-900 text-2xl leading-tight border-b-2 border-gray-200 pb-4">Delete account</h2>
13 |             <p class="mt-4 text-gray-700">Are you absolutely sure you want to cancel your subscription and delete your account? This action cannot be undone.</p>
14 |             <div class="mt-6">
15 |               <button type="button" @click="open = false" class="px-4 py-2 text-white font-semibold bg-red-500 hover:bg-red-600 border border-transparent rounded focus:outline-none focus:shadow-outline">
16 |                 Delete my account
17 |               </button>
18 |               <button @click="open = false" class="ml-4 px-4 py-2 text-gray-800 font-semibold bg-white hover:bg-gray-100 border rounded focus:outline-none focus:shadow-outline">
19 |                 Cancel
20 |               </button>
21 |             </div>
22 |           </div>
23 |         </Modal>
24 |       </div>
25 |     </div>
26 |   </div>
27 | </template>
28 | 
29 | <script>
30 | import Modal from '@/components/Modal.vue'
31 | 
32 | export default {
33 |   components: {
34 |     Modal
35 |   },
36 |   data() {
37 |     return {
38 |       open: false
39 |     }
40 |   },
41 | }
42 | </script>
43 | 


--------------------------------------------------------------------------------