refactor: migrate site to tailwind v4

Signed-off-by: ZTL-UwU <[email protected]>

.vscode/settings.json

@@ -21,5 +21,8 @@
     "**/.git/objects/**": true,
     "**/.git/subtree-cache/**": true,
     "**/node_modules/*/**": true
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

components/content/common/InspiraCarbonAds.vue

@@ -1,5 +1,5 @@
 <template>
-  <ScriptCarbonAdsFormat
+  <!-- <ScriptCarbonAdsFormat
     v-if="!isDesktop || isHomePage"
     :class="
       cn(
@@ -10,7 +10,17 @@
     serve="CW7DEK37"
     placement="inspira-uicom"
     format="cover"
-  />
+  /> -->
+  <LayoutCarbonAds
+    v-if="!isDesktop || isHomePage"
+    :class="
+      cn(
+        'p-4 w-fit gap-4 rounded-lg border border-gray-200 bg-white text-black dark:border-gray-800 dark:bg-white/5 dark:text-white',
+        props.class,
+      )
+    "
+  >
+  </LayoutCarbonAds>
 </template>
 
 <script lang="ts" setup>
@@ -26,13 +36,3 @@ const props = defineProps({
 
 const isDesktop = useMediaQuery("(min-width: 768px)");
 </script>
-
-<style>
-#carbon-responsive .carbon-poweredby {
-  @apply text-sm dark:text-zinc-200 dark:hover:text-zinc-50 text-zinc-800 hover:text-zinc-950;
-}
-
-#carbonads {
-  @apply p-4;
-}
-</style>

components/content/inspira/ui/aurora-background/AuroraBackground.vue

@@ -45,15 +45,10 @@ const props = withDefaults(defineProps<AuroraBackgroundProps>(), {
 </script>
 
 <style scoped>
+@import "tailwindcss";
+
 .aurora-background-gradient-after {
-  @apply after:content-[""] 
-          after:absolute 
-          after:inset-0 
-          after:[background-image:var(--white-gradient),var(--aurora)]
-          after:dark:[background-image:var(--dark-gradient),var(--aurora)]
-          after:[background-size:200%,_100%]
-          after:[background-attachment:fixed] 
-          after:mix-blend-difference;
+  @apply after:content-[""] after:absolute after:inset-0 after:[background-image:var(--white-gradient), var(--aurora)] after:dark:[background-image:var(--dark-gradient), var(--aurora)] after:[background-size:200%, _100%] after:[background-attachment:fixed] after:mix-blend-difference;
 }
 
 .aurora-gradient-animation::after {
@@ -66,6 +61,7 @@ const props = withDefaults(defineProps<AuroraBackgroundProps>(), {
       50% 50%,
       50% 50%;
   }
+
   100% {
     background-position:
       350% 50%,

eslint.config.js

@@ -2,7 +2,6 @@ import globals from "globals";
 import pluginJs from "@eslint/js";
 import tseslint from "typescript-eslint";
 import pluginVue from "eslint-plugin-vue";
-import pluginTailwind from "eslint-plugin-tailwindcss";
 import eslintConfigPrettier from "eslint-config-prettier";
 import importPlugin from "eslint-plugin-import";
 import eslintPluginUnicorn from "eslint-plugin-unicorn";
@@ -35,7 +34,6 @@ export default withNuxt(
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
   ...pluginVue.configs["flat/recommended"],
-  ...pluginTailwind.configs["flat/recommended"],
   eslintConfigPrettier,
   ...markdown.configs.processor,
   {
@@ -68,7 +66,6 @@ export default withNuxt(
           },
         },
       ],
-      "tailwindcss/no-custom-classname": "off",
       "@typescript-eslint/no-empty-object-type": [
         "error",
         { allowInterfaces: "with-single-extends" },

package.json

@@ -17,8 +17,8 @@
   "dependencies": {
     "@number-flow/vue": "^0.4.3",
     "@nuxt/image": "^1.9.0",
-    "@nuxt/scripts": "^0.10.1",
-    "@vueuse/core": "^12.5.0",
+    "@nuxt/scripts": "^0.10.3",
+    "@vueuse/core": "^12.7.0",
     "canvas-confetti": "^1.9.3",
     "class-variance-authority": "^0.7.1",
     "cobe": "^0.6.3",
@@ -29,7 +29,7 @@
     "nuxt-gtag": "^3.0.2",
     "postprocessing": "^6.36.7",
     "qss": "^3.0.0",
-    "shadcn-docs-nuxt": "^0.8.14",
+    "shadcn-docs-nuxt": "1.0.1-next.1",
     "simplex-noise": "^4.0.3",
     "theme-colors": "^0.1.0",
     "three": "^0.173.0",
@@ -49,10 +49,9 @@
     "clsx": "^2.1.1",
     "eslint": "^9.20.1",
     "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-check-file": "^3.0.0",
+    "eslint-plugin-check-file": "^3.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.3",
-    "eslint-plugin-tailwindcss": "^3.18.0",
     "eslint-plugin-unicorn": "^56.0.1",
     "eslint-plugin-vue": "^9.32.0",
     "globals": "^15.15.0",
@@ -63,4 +62,4 @@
     "typescript-eslint": "^8.24.0"
   },
   "packageManager": "[email protected]+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee"
-}
+}