From a10018b4ae2bbdc740726fbdb7d5e040e7f6c397 Mon Sep 17 00:00:00 2001
From: Vinicius Kiatkoski Neves <viniciuskneves@icloud.com>
Date: Fri, 6 Nov 2020 07:58:11 +0100
Subject: [PATCH] Apply transition (color) to category buttons (#21)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🔧 Add motion-reduce variant to transitionProperty

* 💄 Transition color from category buttons
---
 src/components/Main.vue | 2 +-
 tailwind.config.js      | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Main.vue b/src/components/Main.vue
index ef9eb1e..040b027 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -6,7 +6,7 @@
                 <div class="flex items-center justify-center mt-5 ">
                     <div class="mt-2 md:mt-0">
                         <span v-for="category in categories" :key="category.name">
-                            <button @click="searchText = category.name" class="ml-2 mt-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none" :class="category.name === searchText? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">{{ category.name }}</button>
+                            <button @click="searchText = category.name" class="ml-2 mt-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 motion-reduce:transition-none transition-colors duration-150 ease-in-out rounded text-sm focus:outline-none" :class="category.name === searchText? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">{{ category.name }}</button>
                         </span> 
                     </div>
                 </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index aae9762..5e65902 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,6 +13,8 @@ module.exports = {
             },
         },
     },
-    variants: {},
+    variants: {
+        transitionProperty: ({ after }) => after(['motion-reduce']),
+    },
     plugins: [],
 };