ปรับ look and feel

web/nuxt.config.ts

@@ -11,6 +11,13 @@ export default defineNuxtConfig({
 
   modules: ['@nuxtjs/tailwindcss'],
 
+  // ต้องระบุ cssPath ชัด (alias ~/ ชี้ srcDir = app/) — default แบบ relative
+  // "assets/css/tailwind.css" จะ resolve ต่อ rootDir แล้ว fallback ไปไฟล์ default
+  // ของ tailwindcss package แบบเงียบๆ (token/component classes ทั้งหมดหายจาก build)
+  tailwindcss: {
+    cssPath: '~/assets/css/tailwind.css',
+  },
+
   // config ทั้งหมดแยกเป็น env ได้ (กติกา: ห้าม hardcode) — override ด้วย env
   // NUXT_PUBLIC_API_BASE_URL / NUXT_PUBLIC_KEYCLOAK_AUTHORITY / NUXT_PUBLIC_KEYCLOAK_CLIENT_ID
   runtimeConfig: {
@@ -28,6 +35,17 @@ export default defineNuxtConfig({
   app: {
     head: {
       title: 'Word Versioning',
+      htmlAttrs: { lang: 'th' },
+      // ฟอนต์ไทย: Sarabun (ใกล้ Sukhumvit ที่สุดบน Google Fonts) — ต้องมี 500/600 ด้วย
+      // เพราะ UI ใช้ font-medium/font-semibold หนัก (โหลดแค่ 400/700 จะเกิด faux-bold)
+      link: [
+        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
+        {
+          rel: 'stylesheet',
+          href: 'https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700&display=swap',
+        },
+      ],
       // กัน dark-mode flash (FOUC) ก่อน Vue hydrate — ต้องใช้คีย์/ค่าเดียวกับ useTheme.ts
       script: [
         {