add Tailwing & CssPurge

package.json

@@ -19,6 +19,7 @@
         "eslint-plugin-vue": "^6.2.2",
         "laravel-mix": "^5.0.1",
         "laravel-mix-eslint": "^0.1.3",
+        "laravel-mix-purgecss": "^5.0.0-rc.2",
         "lodash": "^4.17.13",
         "resolve-url-loader": "^2.3.1",
         "sass": "^1.20.1",
@@ -32,6 +33,7 @@
         "dropzone": "^5.7.0",
         "laravel-mix-svg-vue": "^0.2.6",
         "markdown-it": "^10.0.0",
-        "markdown-it-checkbox": "^1.1.0"
+        "markdown-it-checkbox": "^1.1.0",
+        "tailwindcss": "^1.3.5"
     }
 }

resources/js/components/App.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="flex">
         <Nav />
-        <div v-if="authUser" class="w-100">
+        <div v-if="authUser" class="w-full">
             <TopBar />
-            <main>
+            <main class="bg-orange-200">
                 <router-view :key="$route.fullPath" class="main"></router-view>
             </main>
         </div>

resources/js/components/Avatar.vue

@@ -1,7 +1,7 @@
 <template>
-    <div>
+    <div class="flex justify-center items-center">
         <img v-if="avatar" src="avatar" alt="alt" class="avatar" v-bind:class="'avatar' + size">
-        <span v-else class="avatar" v-bind:class="'avatar-' + size">{{ alt[0] }}</span>
+        <span v-else class="text-2xl font-bold"  v-bind:class="'avatar-' + size">{{ alt[0] }}</span>
     </div>
 
 </template>

resources/js/components/Nav.vue

@@ -1,18 +1,20 @@
 <template>
-    <nav v-bind:class="{ small: !toggleNav }">
+    <nav v-bind:class="{ small: !toggleNav }" class="h-screen bg-orange-400 flex flex-col justify-between">
-        <router-link to="/" class="site-logo-main" v-bind:class="{ small: !toggleNav }">
+        <div class="">
-            <svg-vue icon="logo" />
+            <router-link to="/" class="logo" v-bind:class="{ small: !toggleNav }">
-        </router-link>
+                <svg-vue icon="logo" />
-        <hr>
+            </router-link>
-        <router-link to="/memos" class="nav-item">
+            <hr>
-            <svg-vue icon="memos" />
+            <router-link to="/memos" class="nav-item p-2">
-            <span v-bind:class="{ navhidden: !toggleNav }">Memos</span>
+                <svg-vue icon="memos" />
-        </router-link>
+                <span v-bind:class="{ navhidden: !toggleNav }">Memos</span>
-        <router-link to="/jeux" class="nav-item">
+            </router-link>
-            <svg-vue icon="games" />
+            <router-link to="/jeux" class="nav-item p-2">
-            <span v-bind:class="{ navhidden: !toggleNav }">Jeux</span>
+                <svg-vue icon="games" />
-        </router-link>
+                <span v-bind:class="{ navhidden: !toggleNav }">Jeux</span>
-        <div @click="toggleNavBar"  class="nav-toggle mt-5">
+            </router-link>
+        </div>
+        <div @click="toggleNavBar"  class="nav-toggle flex ml-2">
             <svg-vue icon="arrow" v-bind:class="{ small: !toggleNav }" />
         </div>
     </nav>

resources/js/components/TopBar.vue

@@ -1,17 +1,17 @@
 <template>
-    <div class="flex-between flex-middle py-1 px-2 topbar">
+    <div class="top-bar flex justify-between bg-orange-300">
-        <router-link v-if="authUser" :to="'/profile'" class="flex-middle avatar-box">
+        <router-link v-if="authUser" :to="'/profile'" class="flex items-center m-2">
-            <Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="mr-1"/>
+            <Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="bg-orange-600 hover:bg-orange-800 w-10 h-10 rounded-full"/>
-            {{ authUser.data.attributes.name }}
+            <span class="ml-2 hover:text-orange-900">{{ authUser.data.attributes.name }}</span>
         </router-link>
-        <form v-if="authUser && search" class="search-box">
+        <form v-if="authUser && search" class="m-2">
             <input type="search" name="search" placeholder="Search">
             <button type="submit" value="S">
                 <svg-vue icon="search" />
             </button>
         </form>
-        <router-link to="/dashboard" v-if="authUser" class="mr-1">
+        <router-link to="/dashboard" v-if="authUser" class="text-orange-600 hover:text-orange-800">
-            <svg-vue icon="params" />
+            <svg-vue icon="params" class="w-10 m-2 fill-current" />
         </router-link>
         <router-link v-else to="/login">
             Se connecter

resources/js/views/Memo/MemoIndex.vue

@@ -1,20 +1,22 @@
 <template>
-    <div class="p-2">
+    <div class="p-4">
-        <div class="flex-between flex-center mb-1">
+        <div class="flex justify-between flex-center mb-4">
             <a href="#" class="btn" @click="$router.back()">< Back</a>
             <router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
         </div>
         <Loader v-if="loading" />
-        <div v-else class="container-cards-list">
+        <div v-else class="flex flex-wrap mb-4">
             <div v-if="memos.lenght === 0">
                 <p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
             </div>
-            <router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="card">
+            <router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="lg:w-1/4 p-2 max-w-lg rounded overflow-hidden shadow-lg bg-white">
-                <div>
+                <img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="w-full">
-                    <img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="cover">
+                <div class="px-6 py-4">
-                    <h1 class="p-1">{{ memo.data.name }}</h1>
+                    <h1 class="text-gray-700 text-">{{ memo.data.name }}</h1>
+                </div>
+                <div class="px-6 py-4">
+                    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{{ memo.data.last_updated }}</span>
                 </div>
-                <div class="memo-date p-1">{{ memo.data.last_updated }}</div>
             </router-link>
         </div>
     </div>

resources/sass/app.scss

@@ -1,30 +1,37 @@
 
-@import "setup/reset";
+@tailwind base;
-@import "setup/colors";
+@tailwind components;
-@import "setup/fonts";
-@import "setup/positions";
-@import "setup/containers";
-@import "setup/effects";
 
-@import "components/transitions";
+
+//@import "setup/reset";
+//@import "setup/colors";
+//@import "setup/fonts";
+//@import "setup/positions";
+//@import "setup/containers";
+//@import "setup/effects";
+//
+//@import "components/transitions";
 @import "components/btn";
-@import "components/elements";
+//@import "components/elements";
-@import "components/loader";
+//@import "components/loader";
-@import "components/events";
+//@import "components/events";
-@import "components/main";
+//@import "components/main";
 @import "components/nav";
-@import "components/topbar";
+//@import "components/topbar";
-@import "components/modal";
+//@import "components/modal";
-@import "components/images";
+//@import "components/images";
-@import "components/avatar";
+//@import "components/avatar";
-@import "components/alert_box";
+//@import "components/alert_box";
-@import "components/search_box";
+//@import "components/search_box";
-@import "components/owfont-regular";
+//@import "components/owfont-regular";
+//
+//@import "pages/auth";
+//@import "pages/users";
+//@import "pages/memos";
+//@import "pages/meteo";
+//@import "pages/games";
+//
+//@import "pages/games/hangman";
 
-@import "pages/auth";
-@import "pages/users";
-@import "pages/memos";
-@import "pages/meteo";
-@import "pages/games";
 
-@import "pages/games/hangman";
+@tailwind utilities;

resources/sass/components/_btn.scss

@@ -1,68 +1,85 @@
 // Button
 
+//.btn {
+//    font-size: 1.6rem;
+//    border: 1px solid transparent;
+//    padding: 0.5rem 1rem;
+//    border-radius: 0.5rem;
+//    cursor: pointer;
+//    box-shadow: 1px 1px 2px $grey;
+//    text-decoration: none;
+//    transition: background-color 0.2s, color 0.2s;
+//
+//    &:hover {
+//        transition: background-color 0.2s, color 0.2s;
+//        background-color: $mediumDark;
+//        color: $white;
+//    }
+//}
+//
+//.btn-primary {
+//    @extend .btn;
+//    background-color: $medium;
+//    border-color: $medium;
+//    color: $white;
+//
+//    &:visited,
+//    &:focus {
+//        color: $white;
+//    }
+//}
+//
+//.btn-secondary {
+//    @extend .btn;
+//    background-color: $mediumLight;
+//    border-color: $mediumLight;
+//    color: $dark;
+//}
+//
+//.btn-alert {
+//    @extend .btn;
+//    background-color: $error;
+//    border-color: $error;
+//    color: $white;
+//
+//    &:hover {
+//        background-color: $dark;
+//    }
+//}
+//
+//.btn-icon {
+//    @extend .btn;
+//    display: flex;
+//    align-items: center;
+//    height: 4rem;
+//
+//    &:hover svg {
+//        fill: $white;
+//    }
+//
+//    svg {
+//        height: 3rem;
+//        margin-right: 1rem;
+//
+//        &:hover {
+//            fill: $white;
+//        }
+//    }
+//}
+
 .btn {
-    font-size: 1.6rem;
+    @apply border bg-orange-400 py-2 px-4 shadow-sm rounded-md;
-    border: 1px solid transparent;
-    padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
-    cursor: pointer;
-    box-shadow: 1px 1px 2px $grey;
-    text-decoration: none;
-    transition: background-color 0.2s, color 0.2s;
 
     &:hover {
-        transition: background-color 0.2s, color 0.2s;
+        @apply text-white bg-orange-600 transition-all duration-300;
-        background-color: $mediumDark;
-        color: $white;
     }
 }
 
 .btn-primary {
     @extend .btn;
-    background-color: $medium;
+    @apply bg-orange-600;
-    border-color: $medium;
-    color: $white;
-
-    &:visited,
-    &:focus {
-        color: $white;
-    }
-}
-
-.btn-secondary {
-    @extend .btn;
-    background-color: $mediumLight;
-    border-color: $mediumLight;
-    color: $dark;
-}
-
-.btn-alert {
-    @extend .btn;
-    background-color: $error;
-    border-color: $error;
-    color: $white;
 
     &:hover {
-        background-color: $dark;
+        @apply bg-orange-800;
-    }
-}
-
-.btn-icon {
-    @extend .btn;
-    display: flex;
-    align-items: center;
-    height: 4rem;
-
-    &:hover svg {
-        fill: $white;
-    }
-
-    svg {
-        height: 3rem;
-        margin-right: 1rem;
-
-        &:hover {
-            fill: $white;
-        }
     }
 }

resources/sass/components/nav.scss

@@ -1,103 +1,178 @@
 
+//nav {
+//    background-color: $mediumDark;
+//    height: 100vh;
+//    width: 15rem;
+//    flex-shrink: 0;
+//    display: flex;
+//    flex-direction: column;
+//    box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
+//    transition: width $transition-delay;
+//
+//    &.small {
+//        width: 5.5rem;
+//    }
+//
+//    hr {
+//        width: 90%;
+//        border-radius: 1px;
+//        border: 1px solid $dark;
+//    }
+//
+//    .nav-item {
+//        display: flex;
+//        align-items: center;
+//        text-decoration: none;
+//        color: $light;
+//        padding-top: 1rem;
+//        padding-bottom: 1rem;
+//
+//        span {
+//            overflow: hidden;
+//        }
+//
+//        svg {
+//            margin: 0 1rem;
+//            width: 3rem;
+//            transition: fill 0.2s;
+//            fill: $light;
+//        }
+//
+//        &:hover {
+//            color: $dark;
+//            background-color: $light;
+//            transition: color 0.2s, background-color 0.2s;
+//
+//            svg {
+//                fill: $dark;
+//                transition: fill 0.2s;
+//            }
+//        }
+//
+//        //&:visited {
+//        //    color: $dark;
+//        //}
+//    }
+//}
+//
+//.site-logo {
+//    width: 3rem;
+//    fill: $light;
+//    transition: fill 0.2s;
+//
+//    &:hover {
+//        fill: $dark;
+//        transition: fill 0.2s;
+//    }
+//}
+//
+//.navhidden {
+//    width: 0;
+//}
+//
+//
+//.site-logo-main {
+//    @extend .site-logo;
+//    display: block;
+//    margin: 1rem;
+//    width: 13rem;
+//    transition: width $transition-delay;
+//
+//    svg {
+//
+//        width: 100%;
+//    }
+//
+//    &.small {
+//        //padding-bottom: 10rem;
+//        width: 3.5rem;
+//    }
+//}
+//
+//.nav-toggle {
+//    @extend .site-logo;
+//    align-self: center;
+//
+//    svg {
+//        transition: transform $transition-delay;
+//    }
+//
+//    svg.small {
+//            transform: rotate(-180deg);
+//    }
+//}
+
 nav {
-    background-color: $mediumDark;
+    @apply w-48;
-    height: 100vh;
+    transition: width 0.3s;
-    width: 15rem;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
-    transition: width $transition-delay;
 
-    &.small {
+    svg {
-        width: 5.5rem;
+        @apply fill-current text-orange-600 w-12 p-2;
+        transition: color 0.3s;
+
+        &:hover {
+            @apply text-orange-800;
+        }
     }
 
-    hr {
+    .logo {
-        width: 90%;
+        @apply block;
-        border-radius: 1px;
+
-        border: 1px solid $dark;
+        svg {
+            @apply w-40 m-2;
+            transition: width 0.3s, color 0.3s;
+        }
     }
 
     .nav-item {
-        display: flex;
+        @apply flex items-center;
-        align-items: center;
+
-        text-decoration: none;
-        color: $light;
-        padding-top: 1rem;
-        padding-bottom: 1rem;
 
         span {
-            overflow: hidden;
+            @apply font-bold text-xl ml-2 overflow-hidden;
-        }
+            transition: width 0.3s;
 
-        svg {
+            &:hover {
-            margin: 0 1rem;
+                @apply text-orange-800;
-            width: 3rem;
-            transition: fill 0.2s;
-            fill: $light;
-        }
-
-        &:hover {
-            color: $dark;
-            background-color: $light;
-            transition: color 0.2s, background-color 0.2s;
-
-            svg {
-                fill: $dark;
-                transition: fill 0.2s;
             }
         }
 
-        //&:visited {
+        &:hover {
-        //    color: $dark;
+            @apply bg-orange-500;
-        //}
+
+            span,
+            svg {
+                @apply text-orange-800;
+            }
+        }
+    }
+
+    .nav-toggle svg {
+        transition: transform 0.3s;
     }
 }
 
-.site-logo {
+nav.small {
-    width: 3rem;
+    @apply w-16;
-    fill: $light;
-    transition: fill 0.2s;
 
-    &:hover {
+    .logo {
-        fill: $dark;
+        @apply w-16 p-0;
-        transition: fill 0.2s;
+
+        svg {
+            @apply w-16 m-0;
+        }
+    }
+
+    .nav-item span {
+        @apply w-0;
+    }
+
+    .nav-toggle svg {
+        transform: rotate(-180deg);
     }
 }
 
-.navhidden {
+.app {
-    width: 0;
+    //min-width: 100%;
-}
+    width: initial;
-
-
-.site-logo-main {
-    @extend .site-logo;
-    display: block;
-    margin: 1rem;
-    width: 13rem;
-    transition: width $transition-delay;
-
-    svg {
-
-        width: 100%;
-    }
-
-    &.small {
-        //padding-bottom: 10rem;
-        width: 3.5rem;
-    }
-}
-
-.nav-toggle {
-    @extend .site-logo;
-    align-self: center;
-
-    svg {
-        transition: transform $transition-delay;
-    }
-
-    svg.small {
-            transform: rotate(-180deg);
-    }
 }

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  theme: {
+    extend: {
+        width: {
+            '96': '24rem'
+        }
+    },
+  },
+  variants: {},
+  plugins: [],
+}

webpack.mix.js

@@ -1,6 +1,13 @@
 const mix = require('laravel-mix');
+const tailwindcss = require('tailwindcss')
+require('laravel-mix-purgecss');
 require('laravel-mix-svg-vue');
 
 mix.js('resources/js/app.js', 'public/js')
     .svgVue()
-   .sass('resources/sass/app.scss', 'public/css');
+    .sass('resources/sass/app.scss', 'public/css')
+    .options({
+        processCssUrls: false,
+        postCss: [ tailwindcss('./tailwind.config.js') ],
+    })
+    .purgeCss();