feat!: update to Tailwind CSS v4

.github/workflows/ci.yml

@@ -27,27 +27,3 @@ jobs:
       - run: pnpm build
       # - run: pnpm test:types
       - run: pnpm dev:build
-  examples:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/checkout@v4
-        with:
-          ref: docs-examples
-          path: docs-examples
-          sparse-checkout: |
-            examples
-      - run: npm i -g --force corepack && corepack enable
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: "pnpm"
-      - uses: pnpm/action-setup@v4
-      - run: pnpm install && pnpm dev:prepare
-      - run: pnpm link --global
-      - run: echo "  - \"docs-examples/examples/*\"" >> pnpm-workspace.yaml
-      - run: echo "  - \"!docs-examples/examples/nuxt-layers\"" >> pnpm-workspace.yaml
-      - run: echo "  - \"!docs-examples/examples/nuxtui\"" >> pnpm-workspace.yaml
-      # - run: pnpm --filter './examples/**' link @nuxtjs/tailwindcss
-      - run: pnpm install --no-frozen-lockfile
-      - run: pnpm --filter "./docs-examples/examples/**" build

docs/app/app.config.ts

@@ -1,90 +1,69 @@
-import { version as pkgVersion } from '../../package.json'
-
 export default defineAppConfig({
   ui: {
-    primary: 'sky',
-    gray: 'slate',
+    colors: {
+      primary: 'green',
+      neutral: 'slate'
+    }
+  },
+  uiPro: {
     footer: {
-      bottom: {
-        left: 'text-sm text-gray-500 dark:text-gray-400',
-        wrapper: 'border-t border-gray-200 dark:border-gray-800',
-      },
-    },
-    content: {
-      prose: {
-        code: {
-          icon: {
-            'nuxt.config': 'vscode-icons:file-type-nuxt',
-          },
-        },
-      },
-    },
+      slots: {
+        root: 'border-t border-default',
+        left: 'text-sm text-muted'
+      }
+    }
+  },
+  seo: {
+    siteName: '@nuxtjs/tailwindcss'
   },
   header: {
-    pkgVersion,
+    title: '',
+    to: '/',
     logo: {
-      light: {
-        src: '',
-      },
-      dark: {
-        src: '',
-      },
+      alt: '',
+      light: '',
+      dark: ''
     },
     search: true,
     colorMode: true,
     links: [{
       'icon': 'i-simple-icons-github',
-      'to': 'https://github.com/nuxt-modules/tailwindcss',
+      'to': 'https://github.com/nuxt-ui-pro/docs',
       'target': '_blank',
-      'aria-label': 'Docs template on GitHub',
-    }],
+      'aria-label': 'GitHub'
+    }]
   },
   footer: {
-    pkgVersion,
+    credits: `Copyright © ${new Date().getFullYear()}`,
     colorMode: false,
     links: [{
       'icon': 'i-simple-icons-nuxtdotjs',
       'to': 'https://nuxt.com',
       'target': '_blank',
-      'aria-label': 'Nuxt Website',
-    }, {
-      'icon': 'i-simple-icons-discord',
-      'to': 'https://chat.nuxt.dev/',
-      'target': '_blank',
-      'aria-label': 'Nuxt Discord',
-    }, {
-      'icon': 'i-simple-icons-x',
-      'to': 'https://twitter.nuxt.dev/',
-      'target': '_blank',
-      'aria-label': 'Nuxt on X',
+      'aria-label': 'Nuxt Website'
     }, {
       'icon': 'i-simple-icons-github',
       'to': 'https://github.com/nuxt-modules/tailwindcss',
       'target': '_blank',
-      'aria-label': 'GitHub Repository',
-    }],
+      'aria-label': '@nuxtjs/tailwindcss on GitHub'
+    }]
   },
   toc: {
     title: 'Table of Contents',
     bottom: {
       title: 'Community',
-      edit: 'https://github.com/nuxt-modules/tailwindcss/edit/main/docs/content',
+      edit: 'https://github.com/nuxt-modules/tailwindcss/edit/main/content',
       links: [{
-        icon: 'i-heroicons-star',
+        icon: 'i-lucide-star',
         label: 'Star on GitHub',
         to: 'https://github.com/nuxt-modules/tailwindcss',
-        target: '_blank',
+        target: '_blank'
       }, {
         icon: 'i-simple-icons-nuxtdotjs',
-        label: 'Nuxt documentation',
-        to: 'https://nuxt.com/docs',
-        target: '_blank',
-      }, {
-        icon: 'i-simple-icons-tailwindcss',
-        label: 'Tailwind CSS',
-        to: 'https://tailwindcss.com',
-        target: '_blank',
-      }],
-    },
-  },
+        label: 'Explore Nuxt UI',
+        to: 'https://ui.nuxt.com',
+        target: '_blank'
+      }]
+    }
+  }
 })

docs/app/app.vue

@@ -1,35 +1,38 @@
 <script setup lang="ts">
-import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+const { seo } = useAppConfig()
 
-const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
-const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
-  default: () => [],
-  server: false,
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
+  server: false
 })
 
 useHead({
   meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
   ],
   link: [
-    { rel: 'icon', href: '/favicon.ico' },
+    { rel: 'icon', href: '/favicon.ico' }
   ],
   htmlAttrs: {
-    lang: 'en',
-  },
+    lang: 'en'
+  }
 })
 
 useSeoMeta({
-  ogSiteName: 'Nuxt Tailwind',
-  twitterCard: 'summary_large_image',
+  titleTemplate: `%s - ${seo?.siteName}`,
+  ogSiteName: seo?.siteName,
+  twitterCard: 'summary_large_image'
 })
 
 provide('navigation', navigation)
 </script>
 
 <template>
-  <div>
+  <UApp>
+    <NuxtLoadingIndicator />
+
     <AppHeader />
+
     <UMain>
       <NuxtLayout>
         <NuxtPage />
@@ -44,7 +47,5 @@ provide('navigation', navigation)
         :navigation="navigation"
       />
     </ClientOnly>
-
-    <UNotifications />
-  </div>
+  </UApp>
 </template>

docs/app/assets/css/main.css

@@ -0,0 +1,20 @@
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@source "../../../content/**/*";
+
+@theme static {
+  --font-sans: 'Public Sans', sans-serif;
+
+  --color-green-50: #EFFDF5;
+  --color-green-100: #D9FBE8;
+  --color-green-200: #B3F5D1;
+  --color-green-300: #75EDAE;
+  --color-green-400: #00DC82;
+  --color-green-500: #00C16A;
+  --color-green-600: #00A155;
+  --color-green-700: #007F45;
+  --color-green-800: #016538;
+  --color-green-900: #0A5331;
+  --color-green-950: #052E16;
+}