diff --git a/frontend/src/components/home/AppHeader.vue b/frontend/src/components/home/AppHeader.vue
index 87fee03e5..27d518a76 100644
--- a/frontend/src/components/home/AppHeader.vue
+++ b/frontend/src/components/home/AppHeader.vue
@@ -30,7 +30,7 @@
 				:to="{ name: 'project.info', params: { projectId: currentProject.id } }"
 				class="project-title-button"
 			>
-				<span class="tw-sr-only">{{ $t('project.description') }}</span>
+				<span class="is-sr-only">{{ $t('project.description') }}</span>
 				<Icon icon="circle-info" />
 			</BaseButton>
 
@@ -44,7 +44,7 @@
 						class="project-title-button"
 						@click="toggleOpen"
 					>
-						<span class="tw-sr-only">{{ $t('project.openSettingsMenu') }}</span>
+						<span class="is-sr-only">{{ $t('project.openSettingsMenu') }}</span>
 						<Icon
 							icon="ellipsis-h"
 							class="icon"
diff --git a/frontend/src/components/home/ProjectsNavigationItem.vue b/frontend/src/components/home/ProjectsNavigationItem.vue
index d91dc03e4..b7234625a 100644
--- a/frontend/src/components/home/ProjectsNavigationItem.vue
+++ b/frontend/src/components/home/ProjectsNavigationItem.vue
@@ -54,7 +54,7 @@
 				:class="{'is-favorite': project.isFavorite}"
 				@click="projectStore.toggleProjectFavorite(project)"
 			>
-				<span class="tw-sr-only">{{ project.isFavorite ? $t('project.unfavorite') : $t('project.favorite') }}</span>
+				<span class="is-sr-only">{{ project.isFavorite ? $t('project.unfavorite') : $t('project.favorite') }}</span>
 				<Icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
 			</BaseButton>
 			<ProjectSettingsDropdown
@@ -67,7 +67,7 @@
 						class="menu-list-dropdown-trigger"
 						@click="toggleOpen"
 					>
-						<span class="tw-sr-only">{{ $t('project.openSettingsMenu') }}</span>
+						<span class="is-sr-only">{{ $t('project.openSettingsMenu') }}</span>
 						<Icon
 							icon="ellipsis-h"
 							class="icon"
diff --git a/frontend/src/components/input/Reactions.vue b/frontend/src/components/input/Reactions.vue
index 26262afe4..8f1aef487 100644
--- a/frontend/src/components/input/Reactions.vue
+++ b/frontend/src/components/input/Reactions.vue
@@ -155,7 +155,7 @@ async function toggleReaction(value: string) {
 			class="reaction-button"
 			@click.stop="toggleEmojiPicker"
 		>
-			<span class="tw-sr-only">{{ $t('reaction.add') }}</span>
+			<span class="is-sr-only">{{ $t('reaction.add') }}</span>
 			<Icon :icon="['far', 'face-laugh']" />
 		</BaseButton>
 		<CustomTransition name="fade">
diff --git a/frontend/src/components/input/editor/EditorToolbar.vue b/frontend/src/components/input/editor/EditorToolbar.vue
index b5b834727..900e72b24 100644
--- a/frontend/src/components/input/editor/EditorToolbar.vue
+++ b/frontend/src/components/input/editor/EditorToolbar.vue
@@ -14,7 +14,7 @@
 						aria-hidden="true"
 					>1</span>
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.heading1') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.heading1') }}</span>
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.heading2')"
@@ -29,7 +29,7 @@
 						aria-hidden="true"
 					>2</span>
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.heading2') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.heading2') }}</span>
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.heading3')"
@@ -44,7 +44,7 @@
 						aria-hidden="true"
 					>3</span>
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.heading3') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.heading3') }}</span>
 			</BaseButton>
 		</div>
 
@@ -58,7 +58,7 @@
 				<span class="icon">
 					<Icon :icon="['fa', 'fa-bold']" />
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.bold') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.bold') }}</span>
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.italic')"
@@ -69,7 +69,7 @@
 				<span class="icon">
 					<Icon :icon="['fa', 'fa-italic']" />
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.italic') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.italic') }}</span>
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.underline')"
@@ -80,7 +80,7 @@
 				<span class="icon">
 					<Icon :icon="['fa', 'fa-underline']" />
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.underline') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.underline') }}</span>
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.strikethrough')"
@@ -91,7 +91,7 @@
 				<span class="icon">
 					<Icon :icon="['fa', 'fa-strikethrough']" />
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.strikethrough') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.strikethrough') }}</span>
 			</BaseButton>
 		</div>
 
@@ -105,7 +105,7 @@
 				<span class="icon">
 					<Icon :icon="['fa', 'fa-code']" />
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.code') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.code') }}</span>
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.quote')"
@@ -116,7 +116,7 @@
 				<span class="icon">
 					<Icon :icon="['fa', 'fa-quote-right']" />
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.quote') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.quote') }}</span>
 			</BaseButton>
 		</div>
 
@@ -130,7 +130,7 @@
 				<span class="icon">
 					<Icon :icon="['fa', 'fa-list-ul']" />
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.bulletList') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.bulletList') }}</span>
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.orderedList')"
@@ -141,7 +141,7 @@
 				<span class="icon">
 					<Icon :icon="['fa', 'fa-list-ol']" />
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.orderedList') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.orderedList') }}</span>
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.taskList')"
@@ -152,7 +152,7 @@
 				<span class="icon">
 					<Icon icon="fa-list-check" />
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.taskList') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.taskList') }}</span>
 			</BaseButton>
 		</div>
 
@@ -165,7 +165,7 @@
 				<span class="icon">
 					<Icon icon="fa-image" />
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.image') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.image') }}</span>
 			</BaseButton>
 		</div>
 
@@ -180,7 +180,7 @@
 				<span class="icon">
 					<Icon :icon="['fa', 'fa-link']" />
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.link') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.link') }}</span>
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.text')"
@@ -192,7 +192,7 @@
 				<span class="icon">
 					<Icon :icon="['fa', 'fa-paragraph']" />
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.text') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.text') }}</span>
 			</BaseButton>
 
 			<BaseButton
@@ -203,7 +203,7 @@
 				<span class="icon">
 					<Icon :icon="['fa', 'fa-ruler-horizontal']" />
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.horizontalRule') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.horizontalRule') }}</span>
 			</BaseButton>
 		</div>
 
@@ -216,7 +216,7 @@
 				<span class="icon">
 					<Icon :icon="['fa', 'fa-undo']" />
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.undo') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.undo') }}</span>
 			</BaseButton>
 			<BaseButton
 				v-tooltip="$t('input.editor.redo')"
@@ -226,7 +226,7 @@
 				<span class="icon">
 					<Icon :icon="['fa', 'fa-redo']" />
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.redo') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.redo') }}</span>
 			</BaseButton>
 		</div>
 
@@ -241,7 +241,7 @@
 				<span class="icon">
 					<Icon :icon="['fa', 'fa-table']" />
 				</span>
-				<span class="tw-sr-only">{{ $t('input.editor.table.title') }}</span>
+				<span class="is-sr-only">{{ $t('input.editor.table.title') }}</span>
 			</BaseButton>
 			<div
 				v-if="tableMode"
diff --git a/frontend/src/components/project/ProjectSettingsDropdown.vue b/frontend/src/components/project/ProjectSettingsDropdown.vue
index 690642479..96a18bbb0 100644
--- a/frontend/src/components/project/ProjectSettingsDropdown.vue
+++ b/frontend/src/components/project/ProjectSettingsDropdown.vue
@@ -9,7 +9,7 @@
 					class="dropdown-trigger"
 					@click="triggerProps.toggleOpen"
 				>
-					<span class="tw-sr-only">{{ $t('project.openSettingsMenu') }}</span>
+					<span class="is-sr-only">{{ $t('project.openSettingsMenu') }}</span>
 					<Icon
 						icon="ellipsis-h"
 						class="icon"
diff --git a/frontend/src/components/tasks/AddTask.vue b/frontend/src/components/tasks/AddTask.vue
index f9ae9a4b5..2644572d5 100644
--- a/frontend/src/components/tasks/AddTask.vue
+++ b/frontend/src/components/tasks/AddTask.vue
@@ -6,7 +6,7 @@
 		<div class="add-task__field field is-grouped">
 			<p class="control has-icons-left has-icons-right is-expanded">
 				<label
-					class="tw-sr-only"
+					class="is-sr-only"
 					:for="textareaId"
 				>
 					{{ $t('project.list.addPlaceholder') }}
diff --git a/frontend/src/components/tasks/partials/Comments.vue b/frontend/src/components/tasks/partials/Comments.vue
index b49514093..9f98970dc 100644
--- a/frontend/src/components/tasks/partials/Comments.vue
+++ b/frontend/src/components/tasks/partials/Comments.vue
@@ -35,7 +35,7 @@
 						height="48"
 						width="48"
 					>
-					<figcaption class="tw-sr-only">
+					<figcaption class="is-sr-only">
 						{{ $t('misc.avatarOfUser', {user: getDisplayName(c.author)}) }}
 					</figcaption>
 				</figure>
@@ -68,7 +68,7 @@
 							:title="$t('task.comment.permalink')"
 							@click.prevent.stop="copy(getCommentUrl(`${c.id}`))"
 						>
-							<span class="tw-sr-only">{{ $t('task.comment.permalink') }}</span>
+							<span class="is-sr-only">{{ $t('task.comment.permalink') }}</span>
 							<Icon icon="link" />
 						</a>
 						<CustomTransition name="fade">
@@ -142,7 +142,7 @@
 						height="48"
 						width="48"
 					>
-					<figcaption class="tw-sr-only">
+					<figcaption class="is-sr-only">
 						{{ $t('misc.avatarOfUser', {user: getDisplayName(authStore.info)}) }}
 					</figcaption>
 				</figure>
diff --git a/frontend/src/components/tasks/partials/SingleTaskInProject.vue b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
index 4f514f527..bbdeb22fe 100644
--- a/frontend/src/components/tasks/partials/SingleTaskInProject.vue
+++ b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
@@ -152,7 +152,7 @@
 				class="favorite"
 				@click.stop="toggleFavorite"
 			>
-				<span class="tw-sr-only">{{ task.isFavorite ? $t('task.detail.actions.unfavorite') : $t('task.detail.actions.favorite') }}</span>
+				<span class="is-sr-only">{{ task.isFavorite ? $t('task.detail.actions.unfavorite') : $t('task.detail.actions.favorite') }}</span>
 				<Icon
 					v-if="task.isFavorite"
 					icon="star"