pkp/pkp-lib#10850 Fix error in @apply directive

Author: blesildaramirez

.storybook/preview.js

@@ -27,7 +27,7 @@ import ModalManager from '@/components/Modal/ModalManager.vue';
 
 import VueScrollTo from 'vue-scrollto';
 
-import '../src/styles/_import.less';
+import '../tailwind.css';
 import '../src/styles/_global.less';
 import {allModes} from './modes';
 import {initialize, mswLoader} from 'msw-storybook-addon';

src/components/Composer/Composer.vue

@@ -1008,6 +1008,7 @@ export default {
 
 <style lang="less">
 @import '../../styles/_import';
+@reference '../../../tailwind.css';
 
 .composer__message {
 	position: relative;

src/components/Container/StatsPage.vue

@@ -238,6 +238,7 @@ export default {
 
 <style lang="less">
 @import '../../styles/_import';
+@reference '../../../tailwind.css';
 
 .pkpStats > .pkpHeader {
 	padding: 0.5rem 0;

src/components/DateRange/DateRange.vue

@@ -9,7 +9,7 @@
 			@blur="closeOnBlur"
 		>
 			<div
-				class="flex h-8 w-8 items-center justify-center border-e border-e-light border-opacity-40 text-primary"
+				class="border-e-light border-opacity-40 text-primary flex h-8 w-8 items-center justify-center border-e"
 			>
 				<Icon icon="Calendar" class="h-5 w-5" :inline="true" />
 			</div>
@@ -65,7 +65,7 @@
 					</label>
 				</fieldset>
 				<PkpButton @click="applyCustomRange">{{ applyLabel }}</PkpButton>
-				<div v-if="errorMessage" class="pt-2 text-base-normal">
+				<div v-if="errorMessage" class="text-base-normal pt-2">
 					<Icon icon="Error" class="me-1 h-5 w-5" :inline="true" />
 					<span class="align-middle" v-html="errorMessage" />
 				</div>
@@ -421,6 +421,7 @@ export default {
 
 <style lang="less">
 @import '../../styles/_import';
+@reference '../../../tailwind.css';
 
 .pkpDateRange {
 	position: relative;

src/components/Header/Header.vue

@@ -31,6 +31,7 @@ export default {
 
 <style lang="less">
 @import '../../styles/_import';
+@reference '../../../tailwind.css';
 
 .pkpHeader {
 	padding: 1rem 2rem;

src/components/Search/Search.vue

@@ -13,13 +13,13 @@
 			<span class="pkpSearch__icons">
 				<Icon
 					icon="Search"
-					class="absolute left-2/4 top-2/4 h-5 w-5 -translate-x-1/2 -translate-y-1/2 transform text-primary"
+					class="text-primary absolute top-2/4 left-2/4 h-5 w-5 -translate-x-1/2 -translate-y-1/2 transform"
 				/>
 			</span>
 		</label>
 		<button
 			v-if="searchPhrase"
-			class="absolute top-0 h-full w-8 text-negative hover:bg-negative hover:text-on-dark focus:bg-negative focus:text-on-dark ltr:right-0 rtl:left-0 rtl:right-auto"
+			class="text-negative hover:bg-negative hover:text-on-dark focus:bg-negative focus:text-on-dark absolute top-0 h-full w-8 ltr:right-0 rtl:right-auto rtl:left-0"
 			:aria-controls="inputId"
 			@click.prevent="clearSearchPhrase"
 		>
@@ -90,6 +90,7 @@ export default {
 
 <style lang="less">
 @import '../../styles/_import';
+@reference '../../../tailwind.css';
 
 .pkpSearch {
 	position: relative;

src/components/SideMenu/SideMenu.vue

@@ -186,6 +186,7 @@ function getButtonStyles(item, isFocused) {
 
 <style lang="less" scoped>
 @import '../../styles/_import';
+@reference '../../../tailwind.css';
 
 /* Override legacy styles for: a:hover, a:focus, where the color is being set to #008acb */
 a.text-on-dark:hover,

src/pages/dashboard/DashboardPage.vue

@@ -1,8 +1,8 @@
 <template>
-	<div class="min-h-screentext-base-normal me-3 ms-5 text-base-normal">
+	<div class="min-h-screentext-base-normal text-base-normal ms-5 me-3">
 		<div class="">
 			<span>
-				<h1 class="flex-inline items-center gap-4 py-6 text-5xl-bold">
+				<h1 class="flex-inline text-5xl-bold items-center gap-4 py-6">
 					{{
 						`${store.currentView.name} (${store.submissionsPagination.itemCount})`
 					}}
@@ -115,6 +115,7 @@ const store = useDashboardPageStore(props);
 </script>
 
 <style>
+@reference '../../../tailwind.css';
 .pkp_page_dashboard .app__main {
 	@apply bg-secondary p-0;
 }

src/styles/_global.less

@@ -1,6 +1,7 @@
 // disabled for now as its different normalisation than existing one
 
 @tailwind base;
+@reference '../../tailwind.css';
 
 /*
    Apply some styles for backward-compatibility as tailwind by