Migration from tailwindcss v3 to v4. Deletion of nuxt/tailwindcss.

nuxt.config.ts

@@ -1,6 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 import fs from 'node:fs'
 import path from 'node:path'
+import tailwindcss from '@tailwindcss/vite'
 
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
@@ -8,113 +9,11 @@ export default defineNuxtConfig({
   modules: [
     '@nuxtjs/color-mode',
     'nuxt-security',
-    '@nuxtjs/tailwindcss',
     '@vueuse/nuxt',
     'radix-vue/nuxt',
     '@nuxtjs/sitemap',
   ],
-  tailwindcss: {
-    viewer: false,
-    config: {
-      content: {
-        files: [
-          "./shared/**/*.{vue,js,jsx,mjs,ts,tsx}"
-        ]
-      },
-      theme: {
-        extend: {
-          boxShadow: {
-            raw: '0 0 0 2px var(--tw-shadow-color)'
-          },
-          keyframes: {
-            slideDownAndFade: {
-              from: { opacity: '0', transform: 'translateY(-2px)' },
-              to: { opacity: '1', transform: 'translateY(0)' },
-            },
-            slideLeftAndFade: {
-              from: { opacity: '0', transform: 'translateX(2px)' },
-              to: { opacity: '1', transform: 'translateX(0)' },
-            },
-            slideUpAndFade: {
-              from: { opacity: '0', transform: 'translateY(2px)' },
-              to: { opacity: '1', transform: 'translateY(0)' },
-            },
-            slideRightAndFade: {
-              from: { opacity: '0', transform: 'translateX(-2px)' },
-              to: { opacity: '1', transform: 'translateX(0)' },
-            },
-            contentShow: {
-              from: { opacity: '0', transform: 'translate(-50%, -48%) scale(0.96)' },
-              to: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' },
-            },
-          },
-          animation: {
-            slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-            slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-            slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-            slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-            contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-          },
-        },
-        colors: {
-          transparent: 'transparent',
-          current: 'currentColor',
-          light: {
-            red: '#e93147',
-            orange: '#FF9800',
-            yellow: '#FFEB3B',
-            green: '#388E3C',
-            indigo: '#7986CB',
-            cyan: '#00bfbc',
-            lime: '#8BC34A',
-            blue: '#086ddd',
-            purple: '#AB47BC',
-            pink: '#d53984',
-            0: "#ffffff",
-            5: "#fcfcfc",
-            10: "#fafafa",
-            20: "#f7f7f7",
-            25: "#e4e4e4",
-            30: "#dfdfdf",
-            35: "#d2d2d2",
-            40: "#bdbdbd",
-            50: "#ababab",
-            60: "#707070",
-            70: "#5c5c5c",
-            100: "#202020",
-          },
-          dark: {
-            red: '#fb464c',
-            redBack: '#5A292B',
-            orange: '#e9973f',
-            yellow: '#e0de71',
-            green: '#44cf6e',
-            greenBack: '#284E34',
-            cyan: '#53dfdd',
-            blue: '#027aff',
-            purple: '#a882ff',
-            pink: '#fa99cd',
-            0: '#1e1e1e',
-            5: '#212121',
-            10: '#242424',
-            20: '#262626',
-            25: '#2a2a2a',
-            30: '#363636',
-            35: '#3f3f3f',
-            40: '#555555',
-            50: '#666666',
-            60: '#999999',
-            70: '#b3b3b3',
-            100: '#dadada',
-          },
-          accent: {
-            purple: '#43A047',
-            blue: '#26C6DA',
-          },
-        }
-      }
-    }
-  },
+  css: ['~/assets/css/main.css'],
   app: {
     pageTransition: false,
     layoutTransition: false
@@ -225,6 +124,9 @@ export default defineNuxtConfig({
     }
   },
   vite: {
+    plugins: [
+      tailwindcss(),
+    ],
     server: {
       hmr: {
         protocol: 'wss',