Update tailwindcss

package.json

@@ -2,17 +2,19 @@
     "private": true,
     "scripts": {
         "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "development": "npx mix build",
-        "watch": "npm run development -- --watch",
+        "watch": "npx mix watch",
-        "watch-poll": "npm run watch -- --watch-poll",
+        "hot": "npx mix watch --hot",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "prod": "npx mix build --production",
-        "prod": "npm run production",
+        "production": "npm run prod",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
         "img": "rm -R public/img && cd resources/img/svg && svg-sprite -s --symbol-dest=sprite *.svg && mv sprite/svg/sprite.symbol.svg ../sprite.svg && rm -R sprite && cd ../../../ && cp -R resources/img public/img"
     },
     "devDependencies": {
+        "autoprefixer": "^10.4.2",
         "laravel-mix": "^6.0.1",
         "lodash": "^4.17.21",
+        "postcss": "^8.4.6",
+        "tailwindcss": "^3.0.19",
         "vue": "^2.6.12",
         "vue-loader": "^15.9.6",
         "vue-template-compiler": "^2.6.12"
@@ -26,7 +28,6 @@
         "postcss-import": "^14.0.1",
         "query-string": "^7.0.0",
         "socket.io-client": "^4.0.1",
-        "tailwindcss": "^2.1.1",
         "v-tooltip": "^2.1.3",
         "wnumb": "^1.2.0"
     }

phpstan.neon

@@ -5,6 +5,8 @@ parameters:
 
     paths:
         - app
+        - tests
+        - database
 
     # The level 8 is the highest level
     level: 5

resources/css/app.css

@@ -1,12 +1,15 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
-@import "base";
+
-@import "switch";
+@layer components {
-@import "layout";
+    @import "base";
-@import "buttons";
+    @import "switch";
-@import "table";
+    @import "layout";
-@import "sidebar";
+    @import "buttons";
-@import "bool";
+    @import "table";
-@import "form";
+    @import "sidebar";
-@import "tooltip";
+    @import "bool";
+    @import "form";
+    @import "tooltip";
+}

resources/css/base.css

@@ -38,14 +38,6 @@
     @apply flex flex-col;
 }
 
-.toolbar-title {
-    @apply font-bold text-gray-700 text-lg;
-}
-
-.subtitle {
-    @apply text-xl font-semibold mt-6 font-thin uppercase text-gray-600;
-}
-
 .mainnav > div > a {
     @apply py-2;
 }

resources/css/form.css

@@ -135,7 +135,7 @@
         input[type="checkbox"] {
             @apply invisible absolute;
             & + span {
-                @apply rounded transition-colors duration-300 relative cursor-pointer flex flex-grow h-full;
+                @apply rounded transition-colors duration-300 relative cursor-pointer flex grow h-full;
                 span {
                     @apply absolute flex items-center justify-center;
                 }

resources/js/components/FSwitch.vue

@@ -6,7 +6,7 @@
         }">{{ label }}</span>
         <div class="relative inner-field mt-1" :class="`h-field-${fieldSize}`">
             <input :id="id" type="checkbox" v-model="v" :disabled="disabled" class="invisible absolute" />
-            <span class="relative cursor-pointer flex flex-grow display" :class="{'bg-switch': v === true, 'bg-gray-700': v === false}">
+            <span class="relative cursor-pointer flex grow display" :class="{'bg-switch': v === true, 'bg-gray-700': v === false}">
                 <span><sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === null}" src="check"></sprite></span>
                 <span><sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === null}" src="close"></sprite></span>
                 <var class="absolute overlay bg-gray-400 rounded top-0"></var>

resources/js/components/Notification.vue

@@ -2,7 +2,7 @@
     <div class="grid gap-2 has-contents">
         <transition-group name="fadeRight" tag="div">
             <div v-for="(item, index) in items" :key="'i'+index"
-                 :class="`bg-${item.type}-300 text-${item.type}-800 h-12 flex flex-col items-start justify-center shadow-2xl rounded-sm px-6`"
+                 :class="`${colors[item.type].bg} ${colors[item.type].text} h-12 flex flex-col items-start justify-center shadow-2xl rounded-sm px-6`"
             >
                 <div class="text-sm" v-for="message in item.messages" v-text="message"></div>
             </div>
@@ -12,6 +12,20 @@
 
 <script>
 export default {
+    data: function() {
+        return {
+            colors: {
+                red: {
+                    bg: 'bg-red-300',
+                    text: 'text-red-800'
+                },
+                green: {
+                    bg: 'bg-green-300',
+                    text: 'text-green-800'
+                }
+            }
+        };
+    },
     computed: {
         items() {
             var i = [];

resources/js/layouts/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="app" class="flex font-sans flex-grow">
+    <div id="app" class="flex font-sans grow">
 
         <notification class="fixed z-40 right-0 bottom-0 mb-3 mr-3"></notification>
 
@@ -12,7 +12,7 @@
             </div>
         </div>
 
-        <div class="flex-grow ml-56 bg-gray-900 flex flex-col">
+        <div class="grow ml-56 bg-gray-900 flex flex-col">
             <div class="h-16 px-6 flex justify-between items-center border-b border-gray-600">
                 <div class="flex">
                     <span class="text-xl font-semibold text-white leading-none" v-html="$page.props.title"></span>
@@ -27,7 +27,7 @@
                 </label>
             </div>
 
-            <div class="flex-grow flex flex-col">
+            <div class="grow flex flex-col">
                 <slot></slot>
             </div>
         </div>

resources/js/layouts/Full.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="app" class="bg-gray-900 font-sans flex flex-col flex-grow items-center justify-center">
+    <div id="app" class="bg-gray-900 font-sans flex flex-col grow items-center justify-center">
         <notification class="fixed z-40 right-0 bottom-0 mb-3 mr-3"></notification>
         <div class="w-96 bg-gray-800 rounded-xl overflow-hidden shadow-lg">
             <slot></slot>

resources/js/views/home/Index.vue

@@ -9,13 +9,13 @@
         <block title="Gruppierungs-Verteilung">
             <div v-for="group in data.groups" class="flex mt-2 items-center leading-none text-gray-100">
                 <sprite class="w-4 h-4 mr-2" src="lilie" :class="`text-${group.slug}`"></sprite>
-                <span v-text="group.name" class="flex-grow"></span>
+                <span v-text="group.name" class="grow"></span>
                 <span v-text="group.count"></span>
             </div>
         </block>
         <block title="Endende Schhnupperzeiten">
             <div v-for="member in data.ending_tries" class="flex mt-2 items-center leading-none text-gray-100">
-                <span class="flex-grow" v-text="`${member.firstname} ${member.lastname}`"></span>
+                <span class="grow" v-text="`${member.firstname} ${member.lastname}`"></span>
                 <span class="mr-2 text-sm tex-gray-600" v-text="`${member.try_ends_at}`"></span>
                 <span class="text-xs tex-gray-600" v-text="`${member.try_ends_at_human}`"></span>
             </div>

resources/js/views/member/Courses.vue

@@ -10,7 +10,8 @@
             <button type="submit" class="btn btn-primary">Absenden</button>
         </form>
 
-        <table v-else class="custom-table custom-table-light custom-table-sm text-sm flex-grow">
+        <div class="grow" v-else>
+            <table class="custom-table custom-table-light custom-table-sm text-sm grow">
                 <thead>
                     <th>Baustein</th>
                     <th>Veranstaltung</th>
@@ -31,6 +32,7 @@
                 </tr>
             </table>
         </div>
+    </div>
 </template>
 
 <script>

resources/js/views/member/Form.vue

@@ -1,5 +1,5 @@
 <template>
-    <form class="flex flex-grow relative" @submit.prevent="submit">
+    <form class="flex grow relative" @submit.prevent="submit">
         <!-- ****************************** menu links ******************************* -->
         <div class="p-6 bg-gray-700 border-r border-gray-600 flex-none w-maxc flex flex-col justify-between">
             <div class="grid gap-1">
@@ -12,7 +12,7 @@
         </div>
 
         <!-- ***************************** Hauptbereich ****************************** -->
-        <div class="flex-grow">
+        <div class="grow">
             <div class="grid grid-cols-2 gap-3 p-4" v-if="menuTitle == 'Stammdaten'">
                 <f-select id="gender_id" :options="genders" v-model="inner.gender_id" label="Geschlecht"></f-select>
                 <f-text id="firstname" v-model="inner.firstname" label="Vorname" required></f-text>

resources/js/views/member/Memberships.vue

@@ -8,7 +8,8 @@
             <button type="submit" class="btn btn-primary">Absenden</button>
         </form>
 
-        <table v-else class="custom-table custom-table-light custom-table-sm text-sm flex-grow">
+        <div class="grow" v-else>
+            <table class="custom-table custom-table-light custom-table-sm text-sm">
                 <thead>
                     <th>Tätigkeit</th>
                     <th>Untertätigkeit</th>
@@ -27,6 +28,7 @@
                 </tr>
             </table>
         </div>
+    </div>
 </template>
 
 <script>

resources/js/views/member/Payments.vue

@@ -9,7 +9,8 @@
             <button type="submit" class="btn btn-primary">Absenden</button>
         </form>
 
-        <table v-else class="custom-table custom-table-light custom-table-sm text-sm flex-grow">
+        <div class="grow" v-else>
+            <table class="custom-table custom-table-light custom-table-sm text-sm">
                 <thead>
                     <th>Nr</th>
                     <th>Status</th>
@@ -28,6 +29,7 @@
                     </td>
                 </tr>
             </table>
+        </div>
         <div class="flex flex-col pb-6 px-6">
             <a href="#" @click.prevent="openLink(link)" :class="{'disabled': link.disabled}" target="_BLANK" v-for="link in value.payment_links" class="mt-1 text-center btn btn-primary" v-text="link.label"></a>
         </div>

tailwind.config.js

@@ -1,17 +1,14 @@
-var modules = require('js-modules/tailwind/index.js');
 const { colors } = require('tailwindcss/defaultTheme');
 
 module.exports = {
-    purge: {
-        enabled: false,
     content: [
         "resources/js/views/**/*.vue",
+        "resources/js/components/**/*.vue",
         "resources/js/layouts/**/*.vue",
-        ]
+        "resources/views/**/*.blade.php",
-    },
+    ],
     theme: {
         extend: {
-        },
             colors: {
                 woelfling: '#ff6400',
                 jungpfadfinder: '#2f53a7',
@@ -19,7 +16,6 @@ module.exports = {
                 rover: '#cc1f2f',
                 biber: '#ffed00',
                 leiter: '#9d9d9c',
-            teal: [],
                 primary: {
                     100: 'hsl(181, 98%, 93%)',
                     200: 'hsl(181, 84%, 78%)',
@@ -30,100 +26,8 @@ module.exports = {
                     700: 'hsl(181, 75%, 26%)', // locked
                     800: 'hsl(181, 86%, 16%)',
                     900: 'hsl(181, 94%, 10%)'
-            },
-            gray: colors.gray,
-            white: colors.white,
-            red: colors.red,
-            blue: {
-                100: colors.blue[100],
-                300: colors.blue[300],
-                500: colors.blue[500],
-                700: colors.blue[700],
-            },
-            yellow: {
-                500: colors.yellow[500],
-                700: colors.yellow[700],
-            },
-            green: {
-                100: colors.green[100],
-                300: colors.green[300],
-                800: colors.green[800],
                 }
             }
-    },
+        }
-    corePlugins: {
+    }
-        clear: false,
-        float: false,
-        boxSizing: false,
-        accessibility: false,
-        animation: false,
-        backgroundPosition: false,
-        backgroundRepeat: false,
-        skew: false,
-        verticalAlign: false,
-        wordBreak: false,
-        ringWidth: false,
-        ringColor: false,
-        ringOffsetColor: false,
-        ringOffsetWidth: false,
-        ringOpacity: false,
-        ringWidth: false,
-    },
-    variants: {
-        alignContent: ['responsive'],
-        alignItems: [],
-        alignSelf: [],
-        appearance: [],
-        backgroundAttachment: ['responsive'],
-        backgroundColor: ['hover'],
-        backgroundPosition: [],
-        backgroundSize: [],
-        borderCollapse: [],
-        borderColor: [],
-        borderRadius: [],
-        borderStyle: [],
-        borderWidth: [],
-        boxShadow: ['hover'],
-        cursor: [],
-        display: ['responsive', 'group-hover'],
-        fill: ['responsive'],
-        flex: ['responsive'],
-        flexDirection: ['responsive'],
-        flexGrow: ['responsive'],
-        flexShrink: [],
-        flexWrap: ['responsive'],
-        fontFamily: [],
-        fontSize: ['responsive'],
-        fontSmoothing: [],
-        fontStyle: ['responsive'],
-        fontWeight: ['hover'],
-        height: ['responsive'],
-        inset: [],
-        justifyContent: ['responsive'],
-        width: ['responsive'],
-        zIndex: [],
-        gap: ['responsive'],
-        gridAutoFlow: ['responsive'],
-        gridTemplateColumns: ['responsive'],
-        gridColumn: ['responsive'],
-        gridColumnStart: ['responsive'],
-        gridColumnEnd: ['responsive'],
-        gridTemplateRows: ['responsive'],
-        gridRow: ['responsive'],
-        gridRowStart: ['responsive'],
-        gridRowEnd: ['responsive'],
-        transform: [],
-        transformOrigin: [],
-        scale: [],
-        rotate: [],
-        translate: [],
-        skew: [],
-        transitionProperty: [],
-        transitionTimingFunction: [],
-        transitionDuration: [],
-    },
-    plugins: [
-        modules.checkbox({}),
-        modules.switch({})
-    ]
 }