Skip to content

chore(deps): upgrade tailwind to v4 #1023

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

chore(deps): upgrade tailwind to v4 #1023

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
03962fa
chore: change prefix
kolaente Jun 25, 2025
89f4c05
chore(deps): update tailwind dependencies
kolaente Jun 25, 2025
e6d7ac4
chore: remove unused tailwind config
kolaente Jun 25, 2025
f2a39d3
chore: use tailwind vite plugin
kolaente Jun 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@
"pinia": "3.0.3",
"register-service-worker": "1.7.2",
"sortablejs": "1.15.6",
"tailwindcss": "3.4.17",
"tailwindcss": "4.1.10",
"tippy.js": "6.3.7",
"ufo": "1.6.1",
"vue": "3.5.17",
Expand All @@ -114,6 +114,7 @@
"@faker-js/faker": "9.8.0",
"@histoire/plugin-screenshot": "1.0.0-alpha.2",
"@histoire/plugin-vue": "1.0.0-alpha.2",
"@tailwindcss/vite": "^4.1.10",
"@tsconfig/node22": "22.0.2",
"@types/codemirror": "5.60.16",
"@types/is-touch-device": "1.0.3",
Expand Down
663 changes: 406 additions & 257 deletions frontend/pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions frontend/src/components/home/AppHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="tw:sr-only">{{ $t('project.description') }}</span>
<Icon icon="circle-info" />
</BaseButton>

Expand All @@ -44,7 +44,7 @@
class="project-title-button"
@click="toggleOpen"
>
<span class="tw-sr-only">{{ $t('project.openSettingsMenu') }}</span>
<span class="tw:sr-only">{{ $t('project.openSettingsMenu') }}</span>
<Icon
icon="ellipsis-h"
class="icon"
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/home/ProjectsNavigationItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="tw:sr-only">{{ project.isFavorite ? $t('project.unfavorite') : $t('project.favorite') }}</span>
<Icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
</BaseButton>
<ProjectSettingsDropdown
Expand All @@ -67,7 +67,7 @@
class="menu-list-dropdown-trigger"
@click="toggleOpen"
>
<span class="tw-sr-only">{{ $t('project.openSettingsMenu') }}</span>
<span class="tw:sr-only">{{ $t('project.openSettingsMenu') }}</span>
<Icon
icon="ellipsis-h"
class="icon"
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/input/Reactions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="tw:sr-only">{{ $t('reaction.add') }}</span>
<Icon :icon="['far', 'face-laugh']" />
</BaseButton>
<CustomTransition name="fade">
Expand Down
38 changes: 19 additions & 19 deletions frontend/src/components/input/editor/EditorToolbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
aria-hidden="true"
>1</span>
</span>
<span class="tw-sr-only">{{ $t('input.editor.heading1') }}</span>
<span class="sr-only">{{ $t('input.editor.heading1') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.heading2')"
Expand All @@ -29,7 +29,7 @@
aria-hidden="true"
>2</span>
</span>
<span class="tw-sr-only">{{ $t('input.editor.heading2') }}</span>
<span class="tw:sr-only">{{ $t('input.editor.heading2') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.heading3')"
Expand All @@ -44,7 +44,7 @@
aria-hidden="true"
>3</span>
</span>
<span class="tw-sr-only">{{ $t('input.editor.heading3') }}</span>
<span class="tw:sr-only">{{ $t('input.editor.heading3') }}</span>
</BaseButton>
</div>

Expand All @@ -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="tw:sr-only">{{ $t('input.editor.bold') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.italic')"
Expand All @@ -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="tw:sr-only">{{ $t('input.editor.italic') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.underline')"
Expand All @@ -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="tw:sr-only">{{ $t('input.editor.underline') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.strikethrough')"
Expand All @@ -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="tw:sr-only">{{ $t('input.editor.strikethrough') }}</span>
</BaseButton>
</div>

Expand All @@ -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="tw:sr-only">{{ $t('input.editor.code') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.quote')"
Expand All @@ -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="tw:sr-only">{{ $t('input.editor.quote') }}</span>
</BaseButton>
</div>

Expand All @@ -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="tw:sr-only">{{ $t('input.editor.bulletList') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.orderedList')"
Expand All @@ -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="tw:sr-only">{{ $t('input.editor.orderedList') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.taskList')"
Expand All @@ -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="tw:sr-only">{{ $t('input.editor.taskList') }}</span>
</BaseButton>
</div>

Expand All @@ -165,7 +165,7 @@
<span class="icon">
<Icon icon="fa-image" />
</span>
<span class="tw-sr-only">{{ $t('input.editor.image') }}</span>
<span class="tw:sr-only">{{ $t('input.editor.image') }}</span>
</BaseButton>
</div>

Expand All @@ -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="tw:sr-only">{{ $t('input.editor.link') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.text')"
Expand All @@ -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="tw:sr-only">{{ $t('input.editor.text') }}</span>
</BaseButton>

<BaseButton
Expand All @@ -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="tw:sr-only">{{ $t('input.editor.horizontalRule') }}</span>
</BaseButton>
</div>

Expand All @@ -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="tw:sr-only">{{ $t('input.editor.undo') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.redo')"
Expand All @@ -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="tw:sr-only">{{ $t('input.editor.redo') }}</span>
</BaseButton>
</div>

Expand All @@ -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="tw:sr-only">{{ $t('input.editor.table.title') }}</span>
</BaseButton>
<div
v-if="tableMode"
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/project/ProjectSettingsDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
class="dropdown-trigger"
@click="triggerProps.toggleOpen"
>
<span class="tw-sr-only">{{ $t('project.openSettingsMenu') }}</span>
<span class="tw:sr-only">{{ $t('project.openSettingsMenu') }}</span>
<Icon
icon="ellipsis-h"
class="icon"
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/project/partials/Filters.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

<div
v-if="filterFromView"
class="tw-text-sm tw-mb-2"
class="tw:text-sm tw:mb-2"
>
{{ $t('filters.fromView') }}
<code>{{ filterFromView }}</code><br>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/tasks/AddTask.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="tw:sr-only"
:for="textareaId"
>
{{ $t('project.list.addPlaceholder') }}
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/tasks/partials/Comments.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
height="48"
width="48"
>
<figcaption class="tw-sr-only">
<figcaption class="tw:sr-only">
{{ $t('misc.avatarOfUser', {user: getDisplayName(c.author)}) }}
</figcaption>
</figure>
Expand Down Expand Up @@ -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="tw:sr-only">{{ $t('task.comment.permalink') }}</span>
<Icon icon="link" />
</a>
<CustomTransition name="fade">
Expand Down Expand Up @@ -142,7 +142,7 @@
height="48"
width="48"
>
<figcaption class="tw-sr-only">
<figcaption class="tw:sr-only">
{{ $t('misc.avatarOfUser', {user: getDisplayName(authStore.info)}) }}
</figcaption>
</figure>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/tasks/partials/Heading.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="heading">
<div class="tw-flex tw-items-center md:tw-items-stretch tw-flex-col tw-gap-1 task-properties">
<div class="tw-flex tw-items-center tw-gap-2">
<div class="tw:flex tw:items-center md:tw:items-stretch tw:flex-col tw:gap-1 task-properties">
<div class="tw:flex tw:items-center tw:gap-2">
<ColorBubble
v-if="task.hexColor !== ''"
:color="getHexColor(task.hexColor)"
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/tasks/partials/KanbanCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@
v-if="coverImageBlobUrl"
:src="coverImageBlobUrl"
alt=""
class="tw-w-full"
class="tw:w-full"
>
<div class="p-2">
<div class="task-id tw-flex tw-justify-between">
<div class="task-id tw:flex tw:justify-between">
<div>
<Done
class="kanban-card__done"
Expand All @@ -34,7 +34,7 @@
</template>
<span
v-if="showTaskPosition"
class="tw-text-red-600 tw-pl-2"
class="tw:text-red-600 tw:pl-2"
>
{{ task.position }}
</span>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/tasks/partials/SingleTaskInProject.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,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="tw:sr-only">{{ task.isFavorite ? $t('task.detail.actions.unfavorite') : $t('task.detail.actions.favorite') }}</span>
<Icon
v-if="task.isFavorite"
icon="star"
Expand Down
12 changes: 2 additions & 10 deletions frontend/src/styles/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "./tailwind.css";

@import "fonts";

Expand All @@ -19,7 +17,6 @@
@import "bulma-css-variables/sass/base/generic";
@import "bulma-css-variables/sass/base/animations";


// imports from "bulma-css-variables/sass/elements/_all";
@import "bulma-css-variables/sass/elements/box";
@import "bulma-css-variables/sass/elements/button";
Expand All @@ -35,7 +32,6 @@

@import "bulma-css-variables/sass/elements/other";


// imports from "bulma-css-variables/sass/form/_all";
@import "bulma-css-variables/sass/form/shared";
@import "bulma-css-variables/sass/form/input-textarea";
Expand All @@ -44,13 +40,12 @@
@import "bulma-css-variables/sass/form/file";
@import "bulma-css-variables/sass/form/tools";


// imports from "bulma-css-variables/sass/components/_all";
// @import "bulma-css-variables/sass/components/breadcrumb"; // not used
@import "bulma-css-variables/sass/components/card";
// @import "bulma-css-variables/sass/components/dropdown"; // moved to component
// @import "bulma-css-variables/sass/components/level"; // not used
@import "bulma-css-variables/sass/components/media";
@import "bulma-css-variables/sass/components/media";
@import "bulma-css-variables/sass/components/menu";
//@import "bulma-css-variables/sass/components/message"; // not used
@import "bulma-css-variables/sass/components/modal";
Expand All @@ -59,12 +54,10 @@
// @import "bulma-css-variables/sass/components/panel"; // not used
// @import "bulma-css-variables/sass/components/tabs"; // not used


// imports from "bulma-css-variables/sass/grid/_all";
@import "bulma-css-variables/sass/grid/columns";
// @import "bulma-css-variables/sass/grid/tiles"; // not used


// imports from "bulma-css-variables/sass/helpers/_all";
@import "bulma-css-variables/sass/helpers/color";
@import "bulma-css-variables/sass/helpers/flexbox";
Expand All @@ -76,7 +69,6 @@
@import "bulma-css-variables/sass/helpers/typography";
@import "bulma-css-variables/sass/helpers/visibility";


// imports from "bulma-css-variables/sass/layout/_all";
// @import "bulma-css-variables/sass/layout/hero"; // not used
// @import "bulma-css-variables/sass/layout/section"; // not used
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/styles/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
@layer theme, utilities;

@import "tailwindcss/theme.css" layer(theme) prefix(tw);
@import "tailwindcss/utilities.css" layer(utilities) prefix(tw);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why didn't you import base and components?

/*
** see discussion under:
** [tailwindlabs/tailwindcss#17594 (comment)](https://github.com/tailwindlabs/tailwindcss/discussions/17594?utm_source=chatgpt.com#discussioncomment-12752302)
 */
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme) prefix(tw);
@import "tailwindcss/utilities.css" layer(utilities);

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried, but it does not seem to make a difference

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What exactly is the issue?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks broken when adding it, looks broken when not adding it.

Loading
Loading