Attempt to migrate more classes.

src/App.vue

@@ -1,9 +1,5 @@
 <template>
-    <div
-        class="uk-container uk-container-expand uk-height-viewport"
-        :style="[{ background: backgroundColor, colour: foregroundColor }]"
-        :class="{ 'uk-light': darkMode }"
-    >
+    <div class="w-full" :style="[{ background: backgroundColor, colour: foregroundColor }]" :class="{ dark: darkMode }">
         <Navigation />
         <router-view v-slot="{ Component }">
             <keep-alive :max="5">
@@ -120,7 +116,15 @@ b {
     @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 col-auto gap-x-1vw gap-y-0.2vh;
 }
 
-.uk-button {
-    background: #222;
+.btn {
+    @apply py-2 px-4 rounded bg-dark-400;
+}
+
+.dark {
+    @apply text-white;
+}
+
+h1 {
+    @apply text-2xl font-bold;
 }
 </style>

src/components/Channel.vue

@@ -2,14 +2,14 @@
     <ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
 
     <div v-if="channel" v-show="!channel.error">
-        <h1 class="uk-text-center">
-            <img height="48" width="48" class="uk-border-circle" :src="channel.avatarUrl" />{{ channel.name }}
+        <h1 class="text-center">
+            <img height="48" width="48" class="rounded-full" :src="channel.avatarUrl" />{{ channel.name }}
         </h1>
         <img v-if="channel.bannerUrl" :src="channel.bannerUrl" style="width: 100%" loading="lazy" />
         <!-- eslint-disable-next-line vue/no-v-html -->
         <p style="white-space: pre-wrap"><span v-html="purifyHTML(urlify(channel.description))"></span></p>
 
-        <button v-if="authenticated" class="uk-button uk-button-small" type="button" @click="subscribeHandler">
+        <button v-if="authenticated" class="btn" @click="subscribeHandler">
             {{ subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
         </button>
 

src/components/Comment.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="comment uk-flex">
+    <div class="comment flex">
         <img
             :src="comment.thumbnail"
-            class="comment-avatar uk-border-circle uk-margin-right"
+            class="comment-avatar rounded-full uk-margin-right"
             height="48"
             width="48"
             style="width: 48px; height: 48px"
@@ -18,7 +18,7 @@
                 </div>
 
                 <div class="comment-author">
-                    <router-link class="uk-text-bold uk-text-small" :to="comment.commentorUrl">
+                    <router-link class="font-bold uk-text-small" :to="comment.commentorUrl">
                         {{ comment.author }} </router-link
                     >&thinsp;<font-awesome-icon v-if="comment.verified" icon="check"></font-awesome-icon>
                 </div>

src/components/ErrorHandler.vue

@@ -1,6 +1,6 @@
 <template>
     <p>{{ message }}</p>
-    <button @click="toggleTrace" class="uk-button uk-button-small" type="button">
+    <button @click="toggleTrace" class="btn">
         {{ $t("actions.show_more") }}
     </button>
     <p ref="stacktrace" style="white-space: pre-wrap" hidden>{{ error }}</p>

src/components/FeedPage.vue

@@ -1,13 +1,7 @@
 <template>
-    <h1 v-t="'titles.feed'" class="uk-text-bold uk-text-center" />
+    <h1 v-t="'titles.feed'" class="font-bold text-center" />
 
-    <button
-        v-if="authenticated"
-        class="uk-button uk-button-small"
-        style="margin-right: 0.5rem"
-        type="button"
-        @click="exportHandler"
-    >
+    <button v-if="authenticated" class="btn" style="margin-right: 0.5rem" @click="exportHandler">
         <router-link to="/subscriptions"> Subscriptions </router-link>
     </button>
 

src/components/HistoryPage.vue

@@ -1,8 +1,8 @@
 <template>
-    <h1 class="uk-text-bold uk-text-center">{{ $t("titles.history") }}</h1>
+    <h1 class="font-bold text-center">{{ $t("titles.history") }}</h1>
 
     <div style="text-align: left">
-        <button class="uk-button" v-t="'actions.clear_history'" @click="clearHistory"></button>
+        <button class="btn" v-t="'actions.clear_history'" @click="clearHistory"></button>
     </div>
 
     <div style="text-align: right">

src/components/ImportPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="uk-vertical-align uk-text-center uk-height-1-1">
+    <div class="uk-vertical-align text-center uk-height-1-1">
         <form class="uk-panel uk-panel-box">
             <div class="uk-form-row">
                 <input ref="fileSelector" type="file" @change="fileChange" />
@@ -11,7 +11,7 @@
                 <b>Override: <input v-model="override" class="uk-checkbox" type="checkbox"/></b>
             </div>
             <div class="uk-form-row">
-                <a class="uk-width-1-1 uk-button uk-button-large uk-width-auto" @click="handleImport">Import</a>
+                <a class="uk-width-1-1 btn uk-button-large uk-width-auto" @click="handleImport">Import</a>
             </div>
         </form>
         <br />

src/components/LoginPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="uk-vertical-align uk-text-center uk-height-1-1">
+    <div class="uk-vertical-align text-center uk-height-1-1">
         <form class="uk-panel uk-panel-box">
             <div class="uk-form-row">
                 <input

src/components/Navigation.vue

@@ -1,11 +1,14 @@
 <template>
     <nav
-        class="uk-navbar uk-navbar-container uk-container-expand uk-position-relative"
+        class="uk-navbar uk-navbar-container uk-container-expand relative"
         :style="[{ background: backgroundColor, colour: foregroundColor }]"
         uk-navbar
     >
         <div class="uk-navbar-left">
-            <router-link class="uk-navbar-item uk-logo uk-text-bold" :style="[{ colour: foregroundColor }]" to="/"
+            <router-link
+                class="uk-navbar-item uk-logo font-bold font-2xl font-sans font-bold"
+                :style="[{ colour: foregroundColor }]"
+                to="/"
                 ><img
                     alt="logo"
                     src="/img/icons/logo.svg"
@@ -15,7 +18,7 @@
                 />iped</router-link
             >
         </div>
-        <div class="uk-navbar-center uk-flex uk-visible@m">
+        <div class="uk-navbar-center uk-flex md:visible">
             <input
                 v-model="searchText"
                 class="uk-input uk-width-medium"
@@ -49,7 +52,7 @@
             </ul>
         </div>
     </nav>
-    <div class="uk-container-expand uk-hidden@m">
+    <div class="w-full md:hidden">
         <input
             v-model="searchText"
             class="uk-input"

src/components/Player.vue

@@ -9,7 +9,7 @@
             <video
                 ref="videoEl"
                 data-shaka-player
-                class="uk-width-expand"
+                class="w-full"
                 :autoplay="shouldAutoPlay"
                 :loop="selectedAutoLoop"
             ></video>

src/components/Playlist.vue

@@ -2,7 +2,7 @@
     <ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
 
     <div v-if="playlist" v-show="!playlist.error">
-        <h1 class="uk-text-center">
+        <h1 class="text-center">
             <img :src="playlist.avatarUrl" height="48" width="48" loading="lazy" />
             {{ playlist.name }}
         </h1>
@@ -11,7 +11,7 @@
             <div>
                 <b
                     ><router-link class="uk-text-justify" :to="playlist.uploaderUrl || '/'">
-                        <img :src="playlist.uploaderAvatar" loading="lazy" class="uk-border-circle" />
+                        <img :src="playlist.uploaderAvatar" loading="lazy" class="rounded-full" />
                         {{ playlist.uploader }}</router-link
                     ></b
                 >

src/components/Preferences.vue

@@ -3,7 +3,7 @@
         <button class="uk-button uk-button-text" @click="$router.go(-1) || $router.push('/')">
             <font-awesome-icon icon="chevron-left" /> &nbsp;{{ $t("actions.back") }}
         </button>
-        <span><h1 v-t="'titles.preferences'" class="uk-text-bold uk-text-center"/></span>
+        <span><h1 v-t="'titles.preferences'" class="font-bold text-center"/></span>
         <span />
     </div>
     <hr />

src/components/RegisterPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="uk-vertical-align uk-text-center uk-height-1-1">
+    <div class="uk-vertical-align text-center uk-height-1-1">
         <form class="uk-panel uk-panel-box">
             <div class="uk-form-row">
                 <input

src/components/SearchResults.vue

@@ -1,5 +1,5 @@
 <template>
-    <h1 class="uk-text-center">
+    <h1 class="text-center">
         {{ $route.query.search_query }}
     </h1>
 
@@ -35,7 +35,7 @@
             <VideoItem v-if="shouldUseVideoItem(result)" :video="result" height="94" width="168" />
             <div v-if="!shouldUseVideoItem(result)" class="uk-text-secondary">
                 <router-link class="uk-text-emphasis" :to="result.url">
-                    <div class="uk-position-relative">
+                    <div class="relative">
                         <img style="width: 100%" :src="result.thumbnail" loading="lazy" />
                     </div>
                     <p>

src/components/SearchSuggestions.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="uk-position-absolute uk-panel uk-box-shadow-large suggestions-container"
+        class="absolute uk-panel uk-box-shadow-large suggestions-container"
         :style="[{ background: secondaryBackgroundColor }]"
     >
         <ul class="uk-list uk-margin-remove uk-text-secondary">

src/components/SubscriptionsPage.vue

@@ -1,20 +1,14 @@
 <template>
-    <h1 class="uk-text-bold uk-text-center">{{ $t("titles.subscriptions") }}</h1>
+    <h1 class="font-bold text-center">{{ $t("titles.subscriptions") }}</h1>
 
-    <div style="text-align: center">
-        <button v-if="authenticated" class="uk-button uk-button-small" style=" margin-right: 0.5rem" type="button">
+    <div>
+        <button v-if="authenticated" class="uk-button uk-button-small" style=" margin-right: 0.5rem">
             <router-link to="/import">
                 {{ $t("actions.import_from_json") }}
             </router-link>
         </button>
 
-        <button
-            v-if="authenticated"
-            class="uk-button uk-button-small"
-            style="color: white"
-            type="button"
-            @click="exportHandler"
-        >
+        <button v-if="authenticated" class="uk-button uk-button-small" style="color: white" @click="exportHandler">
             {{ $t("actions.export_to_json") }}
         </button>
     </div>
@@ -23,7 +17,7 @@
     <div v-for="subscription in subscriptions" :key="subscription.url" style="text-align: center">
         <div class="uk-text-primary" :style="[{ background: backgroundColor }]">
             <a :href="subscription.url">
-                <img :src="subscription.avatar" class="uk-margin-small-right uk-border-circle" width="96" height="96" />
+                <img :src="subscription.avatar" class="uk-margin-small-right rounded-full" width="96" height="96" />
                 <span
                     class="uk-text-large"
                     style="width: 30rem; display: inline-block; text-align: center; margin-left: 6rem"
@@ -33,7 +27,6 @@
             <button
                 class="uk-button uk-button-large"
                 style="background: #222; margin-left: 0.5rem; width: 185px"
-                type="button"
                 @click="handleButton(subscription)"
             >
                 {{ subscription.subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}

src/components/TrendingPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <h1 v-t="'titles.trending'" class="uk-text-bold uk-text-center" />
+    <h1 v-t="'titles.trending'" class="font-bold text-center" />
 
     <hr />
 

src/components/VideoItem.vue

@@ -2,17 +2,17 @@
     <div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
         <router-link class="uk-text-emphasis" :to="video.url">
             <img :height="height" :width="width" style="width: 100%" :src="video.thumbnail" alt="" loading="lazy" />
-            <div class="uk-position-relative">
+            <div class="relative">
                 <span
                     v-if="video.duration"
-                    class="uk-label uk-border-rounded uk-position-absolute video-duration"
-                    style="bottom: 5px; right: 5px; background: rgba(0, 0, 0, 0.75); color: white; padding: 0 5px"
+                    class="rounded-md absolute video-duration bg-black bg-opacity-75 bottom-5px right-5px"
+                    style="padding: 0 5px"
                     >{{ timeFormat(video.duration) }}</span
                 >
                 <span
                     v-if="video.watched"
-                    class="uk-label uk-border-rounded uk-position-absolute video-duration"
-                    style="bottom: 5px; left: 5px; background: rgba(0, 0, 0, 0.75); color: white; padding: 0 5px"
+                    class="rounded-md absolute video-duration bg-black bg-opacity-75 bottom-5px left-5px"
+                    style="padding: 0 5px"
                     >{{ $t("video.watched") }}</span
                 >
             </div>
@@ -51,7 +51,7 @@
                     :src="video.uploaderAvatar"
                     loading="lazy"
                     :alt="video.uploaderName"
-                    class="uk-border-circle"
+                    class="rounded-full"
                     style="margin-right: 0.5rem; margin-top: 0.5rem; width: 32px; height: 32px"
                 />
             </router-link>

src/components/WatchVideo.vue

@@ -10,7 +10,7 @@
         />
     </div>
 
-    <div v-if="video && !isEmbed" class="uk-container uk-container-expand">
+    <div v-if="video && !isEmbed" class="w-full">
         <ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
 
         <div v-show="!video.error">
@@ -21,7 +21,7 @@
                 :selected-auto-play="selectedAutoPlay"
                 :selected-auto-loop="selectedAutoLoop"
             />
-            <div class="uk-text-bold uk-margin-small-top uk-text-large uk-text-emphasis uk-text-break">
+            <div class="font-bold uk-margin-small-top text-lg break-words">
                 {{ video.title }}
             </div>
 
@@ -66,12 +66,12 @@
             </div>
 
             <div class="uk-flex uk-flex-middle uk-margin-small-top">
-                <img :src="video.uploaderAvatar" alt="" loading="lazy" class="uk-border-circle" />
+                <img :src="video.uploaderAvatar" alt="" loading="lazy" class="rounded-full" />
                 <router-link v-if="video.uploaderUrl" class="uk-link uk-margin-small-left" :to="video.uploaderUrl">
                     {{ video.uploader }} </router-link
                 >&thinsp;<font-awesome-icon v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
                 <div class="uk-flex-1"></div>
-                <button v-if="authenticated" class="uk-button uk-button-small" type="button" @click="subscribeHandler">
+                <button v-if="authenticated" class="uk-button uk-button-small" @click="subscribeHandler">
                     {{ subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
                 </button>
             </div>
@@ -114,8 +114,8 @@
 
         <hr />
 
-        <div class="uk-grid">
-            <div v-if="comments" ref="comments" class="uk-width-4-5@xl uk-width-3-4@s uk-width-1">
+        <div class="grid xl:grid-cols-5 sm:grid-cols-4 grid-cols-1">
+            <div v-if="comments" ref="comments" class="xl:col-span-4 sm:col-span-3">
                 <div
                     v-for="comment in comments.comments"
                     :key="comment.commentId"
@@ -127,7 +127,7 @@
             </div>
 
             <div v-if="video" class="uk-width-1-5@xl uk-width-1-4@s uk-width-1 uk-flex-last@s uk-flex-first">
-                <a class="uk-button uk-button-small uk-margin-small-bottom uk-hidden@s" @click="showRecs = !showRecs">
+                <a class="uk-button uk-button-small uk-margin-small-bottom sm:hidden" @click="showRecs = !showRecs">
                     {{ showRecs ? $t("actions.minimize_recommendations") : $t("actions.show_recommendations") }}
                 </a>
                 <div
@@ -139,7 +139,7 @@
                 >
                     <VideoItem :video="related" height="94" width="168" />
                 </div>
-                <hr class="uk-hidden@s" />
+                <hr class="sm:hidden" />
             </div>
         </div>
     </div>

src/main.js

@@ -34,7 +34,7 @@ library.add(
     faTv,
 );
 
-import("uikit/dist/css/uikit-core.css");
+// import("uikit/dist/css/uikit-core.css");
 
 import router from "@/router/router";
 import App from "./App.vue";