fix: tailwind screen info extraction (#90)

Author: TheAlexLichter

components/Navbar.vue

@@ -18,9 +18,9 @@
           @click.native="isUncollapsed = false"
         >
           <img
-            src="~/assets/img/logo.png"
-            class="w-48 xl:w-64 h-auto"
             alt="Developmint Logo"
+            class="w-48 xl:w-64 h-auto"
+            src="~/assets/img/logo.png"
           >
         </NuxtLink>
         <div class="block lg:hidden mt-1">

nuxt.config.js

@@ -1,4 +1,5 @@
-import { colors } from './tailwind_old.js'
+import resolveConfig from 'tailwindcss/resolveConfig'
+import rawTailwindConfig from './tailwind.config.js'
 import i18n from './i18n'
 
 const titleTemplate = c => c ? `${c} - Developmint` : 'Developmint'
@@ -7,6 +8,8 @@ const isDev = !isProd
 
 const baseUrl = process.env.BASE_URL || 'https://developmint.de/'
 
+const { theme: { colors } } = resolveConfig(rawTailwindConfig)
+
 export default {
   modern: isProd && 'client',
   generate: {
@@ -200,11 +203,11 @@ export default {
   /*
    * Customize the progress bar color
    */
-  loading: { color: colors.developmint },
+  loading: { color: colors.developmint['500'] },
   loadingIndicator: {
     name: 'rectangle-bounce',
     color: 'white',
-    background: colors.developmint
+    background: colors.developmint['500']
   },
 
   /*
@@ -215,8 +218,8 @@ export default {
     short_name: 'Developmint',
     start_url: '/',
     display: 'standalone',
-    background_color: colors.rains,
-    theme_color: colors.developmint
+    background_color: colors.rains['500'],
+    theme_color: colors.developmint['500']
   },
 
   purgeCSS: {

pages/about.vue

@@ -10,9 +10,9 @@
     </section>
     <section class="md:mx-16 my-24 bg-rains-light xl:flex">
       <TeamMember
+        v-for="member in $options.members"
         :key="member.slug"
         v-bind="member"
-        v-for="member in $options.members"
       />
     </section>
   </div>

shared/helpers.js

@@ -1,9 +1,11 @@
+const screens = require('./tailwind/screens')
 module.exports = {
   'theme': {
     'container': {
       'center': true,
       'padding': '1rem'
     },
+    screens,
     'extend': {
       'colors': {
         'developmint': {

tailwind.config.js

@@ -1,6 +1,6 @@
 {
-  "sm": "576px",
-  "md": "768px",
-  "lg": "992px",
-  "xl": "1200px"
+"sm": "640px",
+"md": "768px",
+"lg": "1024px",
+"xl": "1280px"
 }