Add TailwindCSS (#1252)

* Setup TailwindCSS

* Fully setup configuration

* Refactor some tailwind variables

apps/frontend/src/components/ui/search/Categories.vue

@@ -15,7 +15,7 @@ export default {
     categories: {
       type: Array,
       default() {
-        return []
+        return [];
       },
     },
     type: {
@@ -24,9 +24,9 @@ export default {
     },
   },
   setup() {
-    const tags = useTags()
+    const tags = useTags();
 
-    return { tags }
+    return { tags };
   },
   computed: {
     categoriesFiltered() {
@@ -34,11 +34,11 @@ export default {
         .concat(this.tags.loaders)
         .filter(
           (x) =>
-            this.categories.includes(x.name) && (!x.project_type || x.project_type === this.type)
-        )
+            this.categories.includes(x.name) && (!x.project_type || x.project_type === this.type),
+        );
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>

apps/frontend/src/components/ui/search/SearchFilter.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import Checkbox from '~/components/ui/Checkbox.vue'
+import Checkbox from "~/components/ui/Checkbox.vue";
 
 export default {
   components: {
@@ -25,30 +25,30 @@ export default {
   props: {
     facetName: {
       type: String,
-      default: '',
+      default: "",
     },
     displayName: {
       type: String,
-      default: '',
+      default: "",
     },
     icon: {
       type: String,
-      default: '',
+      default: "",
     },
     activeFilters: {
       type: Array,
       default() {
-        return []
+        return [];
       },
     },
   },
-  emits: ['toggle'],
+  emits: ["toggle"],
   methods: {
     toggle() {
-      this.$emit('toggle', this.facetName)
+      this.$emit("toggle", this.facetName);
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>