chore: playground migrate to tailwind 4

stefanobartoletti · stefanobartoletti · commit bce2cf20f696 · 2025-04-09T11:39:09.000+02:00
diff --git a/playground/assets/css/tailwind.css b/playground/assets/css/tailwind.css
@@ -0,0 +1,11 @@
+@import 'tailwindcss';
+@plugin "daisyui";
+
+pre {
+  @apply bg-slate-600 text-white rounded-md p-4 whitespace-pre-wrap;
+}
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+}
diff --git a/playground/components/SiteFooter.vue b/playground/components/SiteFooter.vue
@@ -1,6 +1,6 @@
 <template>
   <footer class="navbar bg-base-200">
-    <div class="container">
+    <div class="container flex">
       <div class="flex flex-row gap-8 mx-auto">
         <SocialShare
           v-for="network in ['facebook', 'x', 'linkedin', 'email']"
diff --git a/playground/components/SiteHeader.vue b/playground/components/SiteHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <header class="navbar bg-base-200">
-    <div class="container">
+    <div class="container flex">
       <h1 class="font-bold text-xl">Nuxt Social Share</h1>
 
       <ul class="ml-auto">
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -1,14 +1,18 @@
+import tailwindcss from '@tailwindcss/vite'
+
 export default defineNuxtConfig({
   modules: [
     '../src/module',
-    '@nuxtjs/tailwindcss',
   ],
 
-  socialShare: {
-    // styled: true,
-    // label: false,
-    // icon: false,
-    baseUrl: 'https://stefanobartoletti.github.io/nuxt-social-share/',
+  css: [
+    './assets/css/tailwind.css',
+  ],
+
+  vite: {
+    plugins: [
+      tailwindcss(),
+    ],
   },
 
   devtools: { enabled: true },
diff --git a/playground/package.json b/playground/package.json
@@ -8,8 +8,9 @@
     "generate": "nuxi generate"
   },
   "dependencies": {
-    "@nuxtjs/tailwindcss": "^6.13.1",
-    "daisyui": "^4.12.23",
-    "nuxt": "^3.15.2"
+    "@tailwindcss/vite": "^4.1.3",
+    "daisyui": "^5.0.17",
+    "nuxt": "^3.15.2",
+    "tailwindcss": "^4.1.3"
   }
 }
diff --git a/playground/pages/composable.vue b/playground/pages/composable.vue
@@ -41,8 +41,4 @@ const getFacebook = useSocialShare({ network: 'facebook' })
     border-radius: 0;
   }
 }
-
-pre {
-  @apply bg-slate-600 text-white rounded-md p-4 whitespace-pre-wrap;
-}
 </style>
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -84,8 +84,4 @@ const instances = [
     border-radius: 0;
   }
 }
-
-pre {
-  @apply bg-slate-600 text-white rounded-md p-4 whitespace-pre-wrap;
-}
 </style>
diff --git a/playground/pages/urls.vue b/playground/pages/urls.vue
@@ -53,8 +53,4 @@ testNetworks.forEach((el) => {
     border-radius: 0;
   }
 }
-
-pre {
-  @apply bg-slate-600 text-white rounded-md p-4 whitespace-pre-wrap;
-}
 </style>
diff --git a/playground/tailwind.config.js b/playground/tailwind.config.js
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -8,8 +8,9 @@`
`8`	`8`	`"generate": "nuxi generate"`
`9`	`9`	`},`
`10`	`10`	`"dependencies": {`
`11`		`- "@nuxtjs/tailwindcss": "^6.13.1",`
`12`		`- "daisyui": "^4.12.23",`
`13`		`- "nuxt": "^3.15.2"`
	`11`	`+ "@tailwindcss/vite": "^4.1.3",`
	`12`	`+ "daisyui": "^5.0.17",`
	`13`	`+ "nuxt": "^3.15.2",`
	`14`	`+ "tailwindcss": "^4.1.3"`
`14`	`15`	`}`
`15`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -41,8 +41,4 @@ const getFacebook = useSocialShare({ network: 'facebook' })`
`41`	`41`	`border-radius: 0;`
`42`	`42`	`}`
`43`	`43`	`}`
`44`		`-`
`45`		`-pre {`
`46`		`- @apply bg-slate-600 text-white rounded-md p-4 whitespace-pre-wrap;`
`47`		`-}`
`48`	`44`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -84,8 +84,4 @@ const instances = [`
`84`	`84`	`border-radius: 0;`
`85`	`85`	`}`
`86`	`86`	`}`
`87`		`-`
`88`		`-pre {`
`89`		`- @apply bg-slate-600 text-white rounded-md p-4 whitespace-pre-wrap;`
`90`		`-}`
`91`	`87`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -53,8 +53,4 @@ testNetworks.forEach((el) => {`
`53`	`53`	`border-radius: 0;`
`54`	`54`	`}`
`55`	`55`	`}`
`56`		`-`
`57`		`-pre {`
`58`		`- @apply bg-slate-600 text-white rounded-md p-4 whitespace-pre-wrap;`
`59`		`-}`
`60`	`56`	`</style>`