refactor: use tailwindcss v4

app/components/app-footer.vue

@@ -11,7 +11,7 @@ const links = computed(() => {
 </script>
 
 <template>
-	<footer class="border-t">
+	<footer class="border-t border-neutral-200">
 		<div class="container flex items-center justify-between gap-4 py-8">
 			<nav :aria-label="t('AppFooter.navigation-secondary')">
 				<ul class="flex items-center gap-4" role="list">

app/components/app-header.vue

@@ -11,7 +11,7 @@ const links = computed(() => {
 </script>
 
 <template>
-	<header class="border-b">
+	<header class="border-b border-neutral-200">
 		<div class="container flex items-center justify-between gap-4 py-8">
 			<nav :aria-label="t('AppHeader.navigation-main')">
 				<ul class="flex items-center gap-4" role="list">

app/styles/index.css

@@ -1,8 +1,25 @@
-:root {
-	--font-body: "Inter Variable";
+@import url("tailwindcss");
+
+@plugin "@tailwindcss/typography";
+
+@variant dark (:where([data-ui-color-scheme="dark"], [data-ui-color-scheme="dark"] *));
+
+@layer base {
+	:root,
+	body {
+		block-size: 100%;
+	}
+
+	#__nuxt {
+		block-size: 100%;
+		isolation: isolate;
+	}
+}
+
+@theme {
+	--default-font-family: "Inter Variable";
 }
 
-#__nuxt {
-	block-size: 100%;
-	isolation: isolate;
+@utility container {
+	@apply px-4 max-w-7xl w-full mx-auto md:px-8;
 }

eslint.config.js

@@ -3,7 +3,7 @@
 import baseConfig from "@acdh-oeaw/eslint-config";
 import nuxtConfig from "@acdh-oeaw/eslint-config-nuxt";
 import playwrightConfig from "@acdh-oeaw/eslint-config-playwright";
-import tailwindcssConfig from "@acdh-oeaw/eslint-config-tailwindcss";
+// import tailwindcssConfig from "@acdh-oeaw/eslint-config-tailwindcss";
 import vueConfig from "@acdh-oeaw/eslint-config-vue";
 import gitignore from "eslint-config-flat-gitignore";
 
@@ -15,7 +15,7 @@ const config = [
 	...baseConfig,
 	...vueConfig,
 	...nuxtConfig,
-	...tailwindcssConfig,
+	// ...tailwindcssConfig,
 	...playwrightConfig,
 	{
 		rules: {

nuxt.config.ts

@@ -1,5 +1,7 @@
 import { fileURLToPath } from "node:url";
 
+import tailwindcss from "@tailwindcss/vite";
+
 import { defaultLocale, localesMap } from "./app/config/i18n.config";
 
 const baseUrl = process.env.NUXT_PUBLIC_APP_BASE_URL!;
@@ -25,7 +27,6 @@ export default defineNuxtConfig({
 	css: [
 		"@fontsource-variable/inter/standard.css",
 		"@fontsource-variable/inter/standard-italic.css",
-		"tailwindcss/tailwind.css",
 		"@/styles/index.css",
 	],
 	devtools: {
@@ -86,11 +87,6 @@ export default defineNuxtConfig({
 			routes: ["/manifest.webmanifest", "/robots.txt", "/sitemap.xml"],
 		},
 	},
-	postcss: {
-		plugins: {
-			tailwindcss: {},
-		},
-	},
 	runtimeConfig: {
 		public: {
 			appBaseUrl: process.env.NUXT_PUBLIC_APP_BASE_URL,
@@ -115,4 +111,7 @@ export default defineNuxtConfig({
 			},
 		},
 	},
+	vite: {
+		plugins: [tailwindcss()],
+	},
 });

package.json

@@ -64,11 +64,12 @@
 		"@acdh-oeaw/eslint-config-vue": "^2.0.3",
 		"@acdh-oeaw/prettier-config": "^2.0.0",
 		"@acdh-oeaw/stylelint-config": "^2.0.3",
-		"@acdh-oeaw/tailwindcss-preset": "^0.0.22",
 		"@acdh-oeaw/tsconfig": "^1.1.1",
 		"@nuxt/devtools": "^1.4.1",
 		"@nuxt/eslint": "^0.5.6",
 		"@playwright/test": "^1.47.0",
+		"@tailwindcss/typography": "^0.5.15",
+		"@tailwindcss/vite": "next",
 		"@types/node": "^22.5.4",
 		"axe-core": "^4.10.0",
 		"axe-playwright": "^2.0.2",
@@ -86,7 +87,7 @@
 		"schema-dts": "^1.1.2",
 		"simple-git-hooks": "^2.11.1",
 		"stylelint": "^16.9.0",
-		"tailwindcss": "^3.4.10",
+		"tailwindcss": "next",
 		"typescript": "^5.5.4",
 		"vite": "^5.4.3",
 		"vue-tsc": "^2.1.6"
@@ -119,11 +120,6 @@
 		],
 		"*.!(css|js|ts|vue),!./content/**": "prettier --cache --cache-location ./.prettiercache --ignore-unknown --write"
 	},
-	"postcss": {
-		"plugins": {
-			"tailwindcss": {}
-		}
-	},
 	"prettier": "@acdh-oeaw/prettier-config",
 	"simple-git-hooks": {
 		"pre-commit": "pnpm exec lint-staged"