chore(deps): update dependency tailwindcss to v4

package.json

@@ -78,6 +78,7 @@
     "@types/react": "^19.1.4",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^6.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.0.0",
     "eslint-config-next": "16.2.2",
@@ -87,7 +88,7 @@
     "postcss": "^8.4.49",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.7.0",
-    "tailwindcss": "^3.4.10",
+    "tailwindcss": "^4.0.0",
     "typescript": "^6.0.0",
     "vitest": "^4.0.0"
   },

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
 	plugins: {
-		tailwindcss: {},
-		autoprefixer: {},
+		"@tailwindcss/postcss": {},
 	},
 };

src/app/about/organisation.tsx

@@ -83,7 +83,7 @@ export default function Partners() {
 								alt={`${partner.title} logo`}
 							/>
 						</div>
-						<p className="whitespace-pre-line text-justify">
+						<p className="text-justify whitespace-pre-line">
 							{partner.description.map((part, i) => (
 								<React.Fragment key={i}>{part}</React.Fragment>
 							))}

src/app/about/page.tsx

@@ -20,35 +20,35 @@ export default function About() {
 						<TabsTrigger
 							value="overview"
 							variant="underline"
-							className="text-lg font-semibold text-gray-500 hover:text-foreground"
+							className="hover:text-foreground text-lg font-semibold text-gray-500"
 						>
 							Overview
 						</TabsTrigger>
 						<TabsTrigger
 							value="people"
 							variant="underline"
-							className="text-lg font-semibold text-gray-500 hover:text-foreground"
+							className="hover:text-foreground text-lg font-semibold text-gray-500"
 						>
 							People
 						</TabsTrigger>
 						<TabsTrigger
 							value="partners"
 							variant="underline"
-							className="text-lg font-semibold text-gray-500 hover:text-foreground"
+							className="hover:text-foreground text-lg font-semibold text-gray-500"
 						>
 							Partners
 						</TabsTrigger>
 						<TabsTrigger
 							value="projects"
 							variant="underline"
-							className="text-lg font-semibold text-gray-500 hover:text-foreground"
+							className="hover:text-foreground text-lg font-semibold text-gray-500"
 						>
 							Projects and organisations
 						</TabsTrigger>
 						<TabsTrigger
 							value="contact-us"
 							variant="underline"
-							className="text-lg font-semibold text-gray-500 hover:text-foreground"
+							className="hover:text-foreground text-lg font-semibold text-gray-500"
 						>
 							Contact Us
 						</TabsTrigger>

src/app/about/partners.tsx

@@ -138,7 +138,7 @@ export default function Partners() {
 								alt={`${partner.title} logo`}
 							/>
 						</div>
-						<p className="whitespace-pre-line text-justify">
+						<p className="text-justify whitespace-pre-line">
 							{partner.description.map((part, i) => (
 								<React.Fragment key={i}>{part}</React.Fragment>
 							))}

src/app/about/pathogen-portal-contributors.tsx

@@ -97,15 +97,15 @@ export default function PathogenPortalContributors() {
 						<CardTitle>{contributor.name}</CardTitle>
 						<CardDescription>{contributor.position}</CardDescription>
 					</CardHeader>
-					<CardContent className="flex flex-grow flex-col items-center justify-between">
+					<CardContent className="flex grow flex-col items-center justify-between">
 						<Image
 							src={contributor.image}
 							alt={contributor.name}
 							width={200}
 							height={200}
 							className="mb-4 rounded-full object-cover"
 						/>
-						<p className="flex-grow text-justify text-sm font-semibold">
+						<p className="grow text-justify text-sm font-semibold">
 							{contributor.description}
 						</p>
 					</CardContent>

src/app/dashboards/norm-atlas/atlas.tsx

@@ -306,7 +306,7 @@ export function MicrobeSelector({
 					.sort()
 					.map(([microbe, antibiotics]) => (
 						<AccordionItem key={microbe} value={microbe}>
-							<AccordionTrigger className="inline-flex items-center justify-start gap-2 rounded-md px-2 text-sm hover:bg-accent/50 hover:no-underline">
+							<AccordionTrigger className="hover:bg-accent/50 inline-flex items-center justify-start gap-2 rounded-md px-2 text-sm hover:no-underline">
 								<span>{microbe}</span>
 
 								<TooltipProvider>
@@ -333,7 +333,7 @@ export function MicrobeSelector({
 									{antibiotics.map((antibiotic) => (
 										<button
 											key={`${microbe}-${antibiotic}`}
-											className={`rounded-md px-4 py-1 text-left text-sm transition-colors hover:bg-accent ${
+											className={`hover:bg-accent rounded-md px-4 py-1 text-left text-sm transition-colors ${
 												selectedMicrobe === microbe &&
 												selectedAntibiotic === antibiotic
 													? "bg-accent"
@@ -379,7 +379,7 @@ function RegionSelector({
 				{regions.map((region) => (
 					<button
 						key={region}
-						className={`rounded-md px-4 py-2 text-left text-sm transition-colors hover:bg-accent ${
+						className={`hover:bg-accent rounded-md px-4 py-2 text-left text-sm transition-colors ${
 							selectedRegions.includes(region) ? "bg-accent" : ""
 						}`}
 						onClick={() => onRegionChange(region)}
@@ -433,7 +433,7 @@ function YearSelector({
 	onYearChange,
 }: YearSelectorProps) {
 	return (
-		<div className="rounded-lg border bg-card p-4 text-card-foreground shadow-sm">
+		<div className="bg-card text-card-foreground rounded-lg border p-4 shadow-sm">
 			<ScrollArea className="w-full whitespace-nowrap">
 				<div className="flex flex-row justify-center space-x-2 pb-2">
 					{availableYears.map((year) => (
@@ -526,7 +526,7 @@ function TableView({
 	})();
 
 	return (
-		<div className="rounded-lg border bg-card p-4 text-card-foreground shadow-sm">
+		<div className="bg-card text-card-foreground rounded-lg border p-4 shadow-sm">
 			<Table>
 				<TableHeader>
 					<TableRow>
@@ -709,7 +709,7 @@ function ResistanceChart({
 				/>
 				<label
 					htmlFor="show-average-line-chart"
-					className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+					className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 				>
 					Norges gjennomsnitt
 				</label>
@@ -802,7 +802,7 @@ function ResistanceChart({
 	);
 
 	return (
-		<div className="rounded-lg border bg-card p-4">
+		<div className="bg-card rounded-lg border p-4">
 			<div className="mb-2 flex justify-end">
 				<Button onClick={() => setExportOptionsOpen(true)} variant="ghost">
 					<Download />
@@ -1030,7 +1030,7 @@ function ResistanceTrendChart({
 					/>
 					<label
 						htmlFor="show-line-chart"
-						className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+						className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 					>
 						Antall prøveisolater
 					</label>
@@ -1047,7 +1047,7 @@ function ResistanceTrendChart({
 					/>
 					<label
 						htmlFor="show-regression-line"
-						className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+						className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 					>
 						Trend
 					</label>
@@ -1138,7 +1138,7 @@ function ResistanceTrendChart({
 	);
 
 	return (
-		<div className="rounded-lg border bg-card p-4">
+		<div className="bg-card rounded-lg border p-4">
 			<div className="mb-2 flex justify-end">
 				<Button onClick={() => setExportOptionsOpen(true)} variant="ghost">
 					<Download />
@@ -1563,7 +1563,7 @@ export const MyChart = forwardRef<SVGSVGElement, MyChartProps>(
 		]);
 
 		return (
-			<div className="chart-container rounded-lg border bg-card pb-4 text-card-foreground shadow-sm">
+			<div className="chart-container bg-card text-card-foreground rounded-lg border pb-4 shadow-sm">
 				<div className="mb-2">
 					<div className="flex items-center justify-between rounded-t-lg bg-gray-300 px-4 py-3 font-bold text-gray-800 shadow-md">
 						<span>
@@ -1598,7 +1598,7 @@ export const MyChart = forwardRef<SVGSVGElement, MyChartProps>(
 
 				{hoveredRegion && tooltip.visible && (
 					<div
-						className={`tooltip absolute z-50 rounded bg-black bg-opacity-70 p-2 text-sm text-white ${
+						className={`tooltip absolute z-50 rounded bg-black/70 p-2 text-sm text-white ${
 							hoveredRegion ? "visible" : ""
 						}`}
 						style={{

src/app/dashboards/norm-atlas/tabsNorm.tsx

@@ -36,20 +36,20 @@ export default function TabsNorm({
 					<TabsTrigger
 						value="atlas"
 						variant="underline"
-						className="text-lg font-semibold text-gray-500 hover:text-foreground"
+						className="hover:text-foreground text-lg font-semibold text-gray-500"
 					>
 						Atlas
 					</TabsTrigger>
 					<TabsTrigger
 						value="trends"
 						variant="underline"
-						className="text-lg font-semibold text-gray-500 hover:text-foreground"
+						className="hover:text-foreground text-lg font-semibold text-gray-500"
 					>
 						Trends
 					</TabsTrigger>
 				</TabsList>
 				<TabsContent value="atlas">
-					<div className="-mx-[calc((100vw-75vw)/2)] mt-10 w-screen pl-2 pr-16">
+					<div className="-mx-[calc((100vw-75vw)/2)] mt-10 w-screen pr-16 pl-2">
 						{children[0]}
 					</div>
 				</TabsContent>

src/app/dashboards/norm-atlas/view/page.tsx

@@ -8,7 +8,7 @@ export default async function DataLoader() {
 	const geoData = await loadGeoJSON();
 
 	return (
-		<div className="-mx-[calc((100vw-75vw)/2)] mt-10 w-full w-screen pl-2 pr-16">
+		<div className="-mx-[calc((100vw-75vw)/2)] mt-10 w-full w-screen pr-16 pl-2">
 			<RegionsPanel />
 			<Atlas data={data} geoData={geoData} />
 		</div>

src/app/layout.tsx

@@ -35,7 +35,7 @@ export default async function RootLayout({
 		<html lang="en">
 			<body
 				className={cn(
-					"flex min-h-screen flex-col bg-background font-sans antialiased",
+					"bg-background flex min-h-screen flex-col font-sans antialiased",
 					fontSans.variable
 				)}
 			>

src/app/one-health/environmentally-transmitted-pathogens/page.tsx

@@ -195,7 +195,7 @@ function ReferenceHoverCard({
 }) {
 	return (
 		<HoverCard>
-			<HoverCardTrigger className="cursor-pointer text-primary hover:underline">
+			<HoverCardTrigger className="text-primary cursor-pointer hover:underline">
 				{refNumber}
 			</HoverCardTrigger>
 			<HoverCardContent className="text-small w-[500px] text-justify">

src/app/one-health/food-and-waterborne-pathogens/page.tsx

@@ -48,7 +48,7 @@ const resources: CardGridData[] = [
 export default function FoodWaterbornePathogensPage() {
 	return (
 		<>
-			<div className="fixed right-12 top-32 z-10">
+			<div className="fixed top-32 right-12 z-10">
 				<div className="flex flex-col space-y-2">
 					<ContributorsPanel contributors={["author1", "author2", "author3"]} />
 				</div>

src/app/one-health/page.tsx

@@ -86,7 +86,7 @@ export default function OneHealthPage() {
 					Figure by the World Health Organization depicting the One Health
 					concept
 					<a
-						className="ml-1 text-primary hover:underline"
+						className="text-primary ml-1 hover:underline"
 						href="https://www.who.int/news/item/01-12-2021-tripartite-and-unep-support-ohhlep-s-definition-of-one-health"
 					>
 						(www.who.int)
@@ -206,7 +206,7 @@ function ReferenceHoverCard({
 }) {
 	return (
 		<HoverCard>
-			<HoverCardTrigger className="cursor-pointer text-primary hover:underline">
+			<HoverCardTrigger className="text-primary cursor-pointer hover:underline">
 				{refNumber}
 			</HoverCardTrigger>
 			<HoverCardContent className="text-small w-[500px] text-justify">

src/app/one-health/zoonotic-pathogens/page.tsx

@@ -41,7 +41,7 @@ const resources: CardGridData[] = [
 export default function ZoonoticPathogensPage() {
 	return (
 		<>
-			<div className="fixed right-12 top-32 z-10">
+			<div className="fixed top-32 right-12 z-10">
 				<div className="flex flex-col space-y-2">
 					<ContributorsPanel contributors={["author1", "author2", "author3"]} />
 				</div>

src/app/rdm/_pathogen-data-hub/page.tsx

@@ -3,7 +3,7 @@ import ContributorsPanel from "@/components/contributors-panel";
 export default function PathogenDataHubPage() {
 	return (
 		<>
-			<div className="fixed right-12 top-32 z-10">
+			<div className="fixed top-32 right-12 z-10">
 				<div className="flex flex-col space-y-2">
 					<ContributorsPanel contributors={["erik"]} />
 				</div>

src/app/rdm/about-rdm/page.tsx

@@ -375,10 +375,10 @@ function ReferenceHoverCard({
 }) {
 	return (
 		<HoverCard>
-			<HoverCardTrigger className="cursor-pointer text-primary hover:underline">
+			<HoverCardTrigger className="text-primary cursor-pointer hover:underline">
 				{refNumber}
 			</HoverCardTrigger>
-			<HoverCardContent className="text-small w-[fit] text-wrap text-left">
+			<HoverCardContent className="text-small w-[fit] text-left text-wrap">
 				{paper};
 				<a href={href} className="text-primary hover:underline">
 					{new URL(href).hostname}

src/app/rdm/sharing-data/page.tsx

@@ -158,7 +158,7 @@ function ReferenceHoverCard({
 }) {
 	return (
 		<HoverCard>
-			<HoverCardTrigger className="cursor-pointer text-primary hover:underline">
+			<HoverCardTrigger className="text-primary cursor-pointer hover:underline">
 				{refNumber}
 			</HoverCardTrigger>
 			<HoverCardContent className="text-small w-[500px] text-justify">

src/app/topics/influenza/page.tsx

@@ -257,7 +257,7 @@ function ReferenceHoverCard({
 }) {
 	return (
 		<HoverCard>
-			<HoverCardTrigger className="cursor-pointer text-primary hover:underline">
+			<HoverCardTrigger className="text-primary cursor-pointer hover:underline">
 				{refNumber}
 			</HoverCardTrigger>
 			<HoverCardContent className="text-small w-[500px] text-justify">

src/app/topics/mpox/page.tsx

@@ -242,7 +242,7 @@ function ReferenceHoverCard({
 }) {
 	return (
 		<HoverCard>
-			<HoverCardTrigger className="cursor-pointer text-primary hover:underline">
+			<HoverCardTrigger className="text-primary cursor-pointer hover:underline">
 				{refNumber}
 			</HoverCardTrigger>
 			<HoverCardContent className="text-small w-[500px] text-justify">

src/components/contributors-panel.tsx

@@ -67,7 +67,7 @@ export default function ContributorsPanel({
 }) {
 	return (
 		<Sheet>
-			<SheetTrigger className="fixed right-[-56px] top-80 z-10 flex h-[45px] w-[140px] -rotate-90 justify-center rounded-t-2xl bg-primary px-4 py-1 text-lg font-semibold text-primary-foreground shadow-md transition-all duration-200 hover:right-[-50px] md:h-[80px] md:hover:right-[-30px]">
+			<SheetTrigger className="bg-primary text-primary-foreground fixed top-80 right-[-56px] z-10 flex h-[45px] w-[140px] -rotate-90 justify-center rounded-t-2xl px-4 py-1 text-lg font-semibold shadow-md transition-all duration-200 hover:right-[-50px] md:h-[80px] md:hover:right-[-30px]">
 				Contributors
 			</SheetTrigger>
 			<SheetContent>
@@ -88,7 +88,7 @@ export default function ContributorsPanel({
 							<div className="flex flex-col">
 								<p className="font-bold">{getNameByAlias(contributor)}</p>
 								<a
-									className="italic text-primary hover:underline"
+									className="text-primary italic hover:underline"
 									href={`mailto:${getEmailByAlias(contributor)}`}
 								>
 									{getEmailByAlias(contributor)}

src/components/elixir-norway-logo-mode-toggle.tsx

@@ -27,7 +27,7 @@ export function ElixirNorwayLogoModeToggle() {
 			alt="Logo of ELIXIR Norway"
 			width={150}
 			height={50}
-			className={cn("hover:ring-2 hover:ring-primary")}
+			className={cn("hover:ring-primary hover:ring-2")}
 			priority={true}
 		/>
 	);

src/components/eu-co-founded-logo-mode-toggle.tsx

@@ -27,7 +27,7 @@ export function EuCoFoundedLogoModeToggle() {
 			alt="EU co-funded Logo"
 			width={160}
 			height={50}
-			className={cn("hover:ring-2 hover:ring-primary")}
+			className={cn("hover:ring-primary hover:ring-2")}
 			priority={true}
 		/>
 	);

src/components/fhi-logo-mode-toggle.tsx

@@ -27,7 +27,7 @@ export function FHILogoModeToggle() {
 			alt="Logo of Veterinærinstituttet"
 			width={200}
 			height={200}
-			className={cn("hover:ring-2 hover:ring-primary")}
+			className={cn("hover:ring-primary hover:ring-2")}
 			priority={true}
 		/>
 	);