pkp/pkp-lib#10850 Migrate TailwindCSS from v3 to v4

Author: blesildaramirez

package-lock.json

@@ -54,9 +54,9 @@
     "@storybook/blocks": "^8.5.3",
     "@storybook/vue3": "^8.5.3",
     "@storybook/vue3-vite": "^8.5.3",
+    "@tailwindcss/postcss": "^4.0.0",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vue/eslint-config-prettier": "^8.0.0",
-    "autoprefixer": "^10.4.14",
     "chromatic": "^9.1.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.48.0",
@@ -70,17 +70,16 @@
     "msw-storybook-addon": "^2.0.4",
     "postcss": "^8.4.27",
     "prettier": "^3.0.2",
-    "prettier-plugin-tailwindcss": "^0.5.11",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "storybook": "^8.5.3",
     "storybook-mock-date-decorator": "^2.0.6",
-    "tailwindcss": "3.4",
+    "tailwindcss": "^4.0.0",
     "vite": "^5.0.12",
     "vitest": "^1.0.4"
   },
   "postcss": {
     "plugins": {
-      "autoprefixer": {},
-      "tailwindcss": {}
+      "@tailwindcss/postcss": {}
     }
   },
   "prettier": {

package.json

@@ -1,4 +1,4 @@
-@import "fonts.css";
+@import './fonts.css';
 
 html,
 body {

public/styles/content.css

@@ -1,4 +1,4 @@
-@import "content.css";
+@import './content.css';
 
 html {
   padding: 0;

public/styles/content_oneline.css

@@ -10,7 +10,7 @@
 		:disabled="element === 'a' && !isDisabled ? undefined : isDisabled"
 		@click="click"
 		@focus="emit('focus')"
-		@blur="emit('blur')"
+		@blur="emit('blur-sm')"
 	>
 		<Icon v-if="icon" class="h-5 w-5" :icon="icon" aria-hidden="true" />
 		<slot />
@@ -101,6 +101,6 @@ const emit = defineEmits([
 	/** When the button receives focus. */
 	'focus',
 	/** When focus moves away from the button. */
-	'blur',
+	'blur-sm',
 ]);
 </script>

public/styles/tinymce/skin.mobile.min.css

@@ -41,7 +41,7 @@ const styles = computed(() => ({
 	// Active
 	'text-on-dark bg-selection-dark border-transparent': props.isActive,
 	// Disabled
-	'hover:text-disabled hover:bg-secondary !text-disabled cursor-not-allowed':
+	'hover:text-disabled hover:bg-secondary text-disabled! cursor-not-allowed':
 		props.isDisabled,
 }));
 </script>

src/components/Button/Button.vue

@@ -11,7 +11,7 @@
 				<span v-if="!displayAsEllipsis">{{ label }}</span>
 				<Icon
 					v-if="buttonVariant === 'dropdown'"
-					class="h-5 w-5 text-primary"
+					class="text-primary h-5 w-5"
 					icon="Dropdown"
 					aria-hidden="true"
 				/>
@@ -32,7 +32,7 @@
 				leave-to-class="transform opacity-0 scale-95"
 			>
 				<MenuItems
-					class="absolute z-10 w-max border border-light bg-secondary shadow focus:outline-none"
+					class="border-light bg-secondary absolute z-10 w-max border shadow focus:outline-hidden"
 					:class="
 						direction === 'right'
 							? 'ltr:left-0 ltr:origin-top-left rtl:right-0 rtl:origin-top-left'

src/components/ButtonIcon/ButtonIcon.vue

@@ -33,7 +33,7 @@
 						{{ t('common.saving') }}
 					</span>
 					<span v-else-if="hasRecentSave" class="pkpFormPage__status">
-						<Icon icon="Complete" class="h-5 w-5 text-success" :inline="true" />
+						<Icon icon="Complete" class="text-success h-5 w-5" :inline="true" />
 						{{ t('form.saved') }}
 					</span>
 				</transition>
@@ -240,7 +240,7 @@ export default {
 
 	> .pkpButton {
 		white-space: nowrap;
-		flex-shrink: 0;
+		shrink: 0;
 	}
 }
 
@@ -254,7 +254,7 @@ export default {
 	font-size: @font-tiny;
 	transition: all 0.3s;
 	white-space: nowrap;
-	flex-shrink: 0;
+	shrink: 0;
 
 	.pkpSpinner {
 		margin-inline-end: 0.25rem;

src/components/DropdownActions/DropdownActions.vue

@@ -260,7 +260,7 @@ defineExpose({handleFocus});
 .pkpAutosuggest__autosuggester {
 	position: relative;
 	line-height: 1.6rem; // prevent jank when value is added or removed
-	flex-grow: 1;
+	grow: 1;
 }
 
 .autosuggest__results {

src/components/Form/FormPage.vue

@@ -124,9 +124,9 @@ export default {
 		 * (v5.10.7).
 		 *
 		 * This is a workaround that closes the popup toolbar when the TinyMCE
-		 * editor fires the `blur` event. This works, but the `blur` event does
+		 * editor fires the `blur-sm` event. This works, but the `blur-sm` event does
 		 * not cover every case. It is possible to open the popup toolbar without
-		 * moving focus into the editor. In such cases, the `blur` event is not
+		 * moving focus into the editor. In such cases, the `blur-sm` event is not
 		 * fired.
 		 *
 		 * To prevent such cases, we have hidden the popup toolbar button when

src/components/Form/fields/Autosuggest.vue

@@ -53,7 +53,7 @@
 				:plugins="plugins"
 				:init="compiledInit"
 				@focus="focus"
-				@blur="blur"
+				@blur="blur - sm"
 			/>
 			<div
 				v-if="(isMultilingual && locales.length > 1) || wordLimit"
@@ -257,7 +257,7 @@ export default {
 					// This mimics the focus event, without actually changing the user's
 					// focus.
 					editor.fire('focus');
-					editor.fire('blur');
+					editor.fire('blur-sm');
 				},
 				...this.init,
 			};

src/components/Form/fields/FieldRichText.vue

@@ -49,13 +49,13 @@
 						:pt="sliderStyling"
 					/>
 				</div>
-				<div class="mt-2 flex justify-between text-base-normal text-secondary">
+				<div class="text-base-normal text-secondary mt-2 flex justify-between">
 					<div>{{ minLabel || min }}</div>
 					<div>{{ maxLabel || max }}</div>
 				</div>
 			</div>
 			<div
-				class="ms-3 w-48 self-start rounded border border-form-fields p-2 text-center text-base-normal text-secondary"
+				class="border-form-fields text-base-normal text-secondary ms-3 w-48 self-start rounded border p-2 text-center"
 			>
 				{{ displayedValue }}
 			</div>
@@ -147,7 +147,7 @@ export default {
 
 						// States
 						'hover:bg-hover hover:border-primary-500',
-						'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring',
+						'focus-visible:outline-hidden focus-visible:outline-offset-0 focus-visible:ring-3',
 						'ring-primary/50',
 						// Transitions
 						'transition duration-200',

src/components/Form/fields/FieldRichTextarea.vue

@@ -474,7 +474,7 @@ export default {
 	}
 
 	.dz-details {
-		flex-grow: 1;
+		grow: 1;
 	}
 
 	.dz-filename {

src/components/Form/fields/FieldSlider.vue

@@ -151,6 +151,6 @@ export default {
 
 .insertContent__item__button {
 	margin-inline-start: auto;
-	flex-shrink: 0;
+	shrink: 0;
 }
 </style>

src/components/Form/fields/FieldUpload.vue

@@ -8,14 +8,14 @@
 		</template>
 		<template #item="{item}">
 			<div class="flex items-center">
-				<div class="me-2 flex-grow truncate">
+				<div class="me-2 grow truncate">
 					<File
 						:name="localize(item.name)"
 						:document-type="item.documentType"
 						:url="item.url"
 					/>
 				</div>
-				<div class="flex-shrink-0">
+				<div class="shrink-0">
 					<Badge
 						v-if="item.genreName"
 						:is-primary="!item.genreIsDependent && !item.genreIsSupplementary"

src/components/InsertContent/InsertContent.vue

@@ -148,7 +148,7 @@ export default {
 .selectSubmissionFileListItem__selector {
 	width: 3rem;
 	text-align: center;
-	flex-shrink: 0;
+	shrink: 0;
 }
 
 .selectSubmissionFileListItem__download {

src/components/ListPanel/listingFiles/ListingFilesListPanel.vue

@@ -11,7 +11,7 @@
 				leave-to="opacity-0"
 			>
 				<div
-					class="fixed inset-0 z-10 bg-blur bg-opacity-75 transition-opacity"
+					class="bg-blur bg-opacity-75 fixed inset-0 z-10 transition-opacity"
 				/>
 			</TransitionChild>
 			<div class="fixed inset-0 z-20 overflow-y-auto">
@@ -30,11 +30,11 @@
 						<DialogPanel data-cy="dialog" :class="styles">
 							<button
 								v-if="noActions"
-								class="absolute right-3 top-3 cursor-pointer bg-transparent"
+								class="absolute top-3 right-3 cursor-pointer bg-transparent"
 								@click="onClose"
 							>
 								<Icon
-									class="h-6 w-6 text-negative"
+									class="text-negative h-6 w-6"
 									icon="Cancel"
 									:aria-hidden="true"
 								/>
@@ -45,11 +45,11 @@
 							<div class="flex min-h-12 items-center">
 								<DialogTitle
 									v-if="title"
-									class="m-0 inline-flex min-w-[1px] items-center overflow-x-hidden overflow-ellipsis px-8 pt-12 text-4xl-bold"
+									class="text-4xl-bold m-0 inline-flex min-w-[1px] items-center overflow-x-hidden px-8 pt-12 text-ellipsis"
 									:class="icon ? 'pb-5' : 'pb-8'"
 								>
 									<div v-if="icon" :class="iconStyles">
-										<Icon :icon="icon" class="h-11 w-11 text-on-dark"></Icon>
+										<Icon :icon="icon" class="text-on-dark h-11 w-11"></Icon>
 									</div>
 									<span class="px-4">{{ title }}</span>
 								</DialogTitle>

src/components/ListPanel/submissionFiles/SelectSubmissionFileListItem.vue

@@ -535,7 +535,7 @@ const SideModalWithSideMenu = {
 				<SideModalLayout2Columns>
 					<template #left>
 						<div class="flex">
-							<div class="flex-shrink-0">
+							<div class="shrink-0">
 								<SideMenu v-bind="sideMenuProps"></SideMenu>
 							</div>
 							<p class="px-5">

src/components/Modal/Dialog.vue

@@ -3,33 +3,33 @@
 		class="pointer-events-auto h-screen w-screen"
 		:class="levelClasses"
 	>
-		<div class="shadow-xl flex h-full flex-col bg-default py-6">
+		<div class="bg-default flex h-full flex-col py-6 shadow-xl">
 			<div class="">
 				<div class="flex items-start">
 					<div class="ms-4">
 						<button
 							type="button"
-							class="rounded-md text-gray-400 hover:text-gray-500 focus:ring-indigo-500 relative inline-flex focus:outline-none focus:ring-2 focus:ring-offset-2"
+							class="relative inline-flex rounded-md text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
 							@click="closeModal"
 						>
 							<span class="sr-only">{{ t('common.close') }}</span>
 							<Icon
-								class="h-8 w-8 text-primary"
+								class="text-primary h-8 w-8"
 								icon="BackButton"
 								:aria-hidden="true"
 							/>
 						</button>
 					</div>
-					<div class="ml-8 mr-8 flex-grow" data-cy="sidemodal-header">
+					<div class="mr-8 ml-8 grow" data-cy="sidemodal-header">
 						<div class="flex">
-							<div class="flex-grow">
+							<div class="grow">
 								<!-- @slot Small text above title, might be useful for example to display submission Id-->
 								<div class="text-xl-medium"><slot name="pre-title"></slot></div>
-								<DialogTitle as="h1" class="mt-1 text-4xl-bold text-heading">
+								<DialogTitle as="h1" class="text-4xl-bold text-heading mt-1">
 									<!-- @slot Main title, also used for accessibility (aria-labelledby) -->
 									<slot name="title"></slot>
 								</DialogTitle>
-								<DialogDescription class="mt-1 text-3xl-normal">
+								<DialogDescription class="text-3xl-normal mt-1">
 									<!-- @slot Optionally descrition, also used for accessibility (aria-describedby) -->
 									<slot name="description"></slot>
 								</DialogDescription>

src/components/Modal/SideModal.stories.js

@@ -1,12 +1,12 @@
 <template>
-	<div class="flex w-full border-t border-light">
-		<div class="flex-grow border-e border-light p-4">
+	<div class="border-light flex w-full border-t">
+		<div class="border-light grow border-e p-4">
 			<div class="bg-secondary p-5">
 				<slot name="left"></slot>
 			</div>
 		</div>
 		<div class="w-96">
-			<div class="border-b border-light p-4">
+			<div class="border-light border-b p-4">
 				<slot name="right1"></slot>
 			</div>
 			<div class="p-4">

src/components/Modal/SideModalBody.vue

@@ -1,25 +1,25 @@
 <template>
 	<div class="min-w-max p-4">
-		<div class="flex w-full bg-secondary">
-			<div class="flex flex-col border-t border-light">
+		<div class="bg-secondary flex w-full">
+			<div class="border-light flex flex-col border-t">
 				<slot name="menu"></slot>
-				<div class="flex-grow border-x border-b border-light bg-tertiary"></div>
+				<div class="border-light bg-tertiary grow border-x border-b"></div>
 			</div>
-			<div class="flex w-full flex-col border-y border-e border-s border-light">
+			<div class="border-light flex w-full flex-col border-y border-s border-e">
 				<div
-					class="border-b border-light p-5 text-3xl-bold uppercase text-heading"
+					class="border-light text-3xl-bold text-heading border-b p-5 uppercase"
 				>
 					<slot name="heading"></slot>
 				</div>
-				<div class="flex-grow">
+				<div class="grow">
 					<div class="flex h-full">
-						<div class="flex-grow border-e border-light">
+						<div class="border-light grow border-e">
 							<div
 								v-if="
 									$slots['publication-controls-left'] ||
 									$slots['publication-controls-right']
 								"
-								class="flex justify-between border-b border-light p-4"
+								class="border-light flex justify-between border-b p-4"
 							>
 								<div class="">
 									<slot name="publication-controls-left"></slot>
@@ -33,9 +33,9 @@
 						</div>
 						<div
 							v-if="$slots.secondary || $slots.actions"
-							class="w-96 border-s border-light"
+							class="border-light w-96 border-s"
 						>
-							<div class="border-b border-light"><slot name="actions" /></div>
+							<div class="border-light border-b"><slot name="actions" /></div>
 							<div><slot name="secondary"></slot></div>
 						</div>
 					</div>