Migrate to Tailwind CSS 4

package.json

@@ -20,17 +20,16 @@
     "react-router-dom": "^7.12.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^6.1.2",
-    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "gh-pages": "^6.1.1",
-    "postcss": "^8.4.40",
-    "tailwindcss": "^3.4.7",
+    "tailwindcss": "^4.3.3",
     "vite": "^8.3.3"
   }
 }

src/App.jsx

@@ -10,7 +10,7 @@ function App() {
   return (
     <Router>
       <ScrollToTop />
-      <div className="min-h-screen bg-gradient-to-br from-dark-900 via-dark-800 to-dark-900">
+      <div className="min-h-screen bg-linear-to-br from-dark-900 via-dark-800 to-dark-900">
         <Navigation />
         <main>
           <Routes>

src/components/About.jsx

@@ -101,7 +101,7 @@ const About = () => {
                 whileHover={{ scale: 1.05, y: -5 }}
                 className="bg-dark-700/50 backdrop-blur-sm border border-gray-600/30 rounded-xl p-6 text-center group hover:border-primary-400/50 transition-all duration-300"
               >
-                <div className="w-12 h-12 mx-auto mb-4 bg-gradient-to-r from-primary-500 to-primary-600 rounded-lg p-3 group-hover:scale-110 transition-transform duration-300">
+                <div className="w-12 h-12 mx-auto mb-4 bg-linear-to-r from-primary-500 to-primary-600 rounded-lg p-3 group-hover:scale-110 transition-transform duration-300">
                   <stat.icon className="w-full h-full text-white" />
                 </div>
                 <div className="text-3xl font-bold text-white mb-2 group-hover:text-primary-400 transition-colors duration-300">
@@ -122,7 +122,7 @@ const About = () => {
           viewport={{ once: true }}
           className="mt-20 text-center"
         >
-          <div className="bg-gradient-to-r from-primary-500/10 to-primary-600/10 border border-primary-500/20 rounded-2xl p-8 md:p-12">
+          <div className="bg-linear-to-r from-primary-500/10 to-primary-600/10 border border-primary-500/20 rounded-2xl p-8 md:p-12">
             <h3 className="text-2xl md:text-3xl font-bold mb-6 gradient-text">
               Our Mission
             </h3>

src/components/Contact.jsx

@@ -176,7 +176,7 @@ const Contact = () => {
                   transition={{ delay: index * 0.1 }}
                   className="flex items-center group"
                 >
-                  <div className="w-12 h-12 bg-gradient-to-r from-primary-500 to-primary-600 rounded-lg p-3 mr-4 group-hover:scale-110 transition-transform duration-300">
+                  <div className="w-12 h-12 bg-linear-to-r from-primary-500 to-primary-600 rounded-lg p-3 mr-4 group-hover:scale-110 transition-transform duration-300">
                     <info.icon className="w-full h-full text-white" />
                   </div>
                   <div>
@@ -237,7 +237,7 @@ const Contact = () => {
                       required
                       value={formData.name}
                       onChange={handleInputChange}
-                      className="w-full bg-dark-600 border border-gray-500 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:border-primary-400 focus:ring-2 focus:ring-primary-400/20 transition-all duration-300"
+                      className="w-full bg-dark-600 border border-gray-500 rounded-lg px-4 py-3 text-white placeholder:text-gray-400 focus:border-primary-400 focus:ring-2 focus:ring-primary-400/20 transition-all duration-300"
                       placeholder="John Doe"
                     />
                   </div>
@@ -252,7 +252,7 @@ const Contact = () => {
                       required
                       value={formData.email}
                       onChange={handleInputChange}
-                      className="w-full bg-dark-600 border border-gray-500 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:border-primary-400 focus:ring-2 focus:ring-primary-400/20 transition-all duration-300"
+                      className="w-full bg-dark-600 border border-gray-500 rounded-lg px-4 py-3 text-white placeholder:text-gray-400 focus:border-primary-400 focus:ring-2 focus:ring-primary-400/20 transition-all duration-300"
                       placeholder="john@example.com"
                     />
                   </div>
@@ -269,7 +269,7 @@ const Contact = () => {
                       name="company"
                       value={formData.company}
                       onChange={handleInputChange}
-                      className="w-full bg-dark-600 border border-gray-500 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:border-primary-400 focus:ring-2 focus:ring-primary-400/20 transition-all duration-300"
+                      className="w-full bg-dark-600 border border-gray-500 rounded-lg px-4 py-3 text-white placeholder:text-gray-400 focus:border-primary-400 focus:ring-2 focus:ring-primary-400/20 transition-all duration-300"
                       placeholder="Your Company"
                     />
                   </div>
@@ -305,7 +305,7 @@ const Contact = () => {
                     rows={5}
                     value={formData.message}
                     onChange={handleInputChange}
-                    className="w-full bg-dark-600 border border-gray-500 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:border-primary-400 focus:ring-2 focus:ring-primary-400/20 transition-all duration-300 resize-none"
+                    className="w-full bg-dark-600 border border-gray-500 rounded-lg px-4 py-3 text-white placeholder:text-gray-400 focus:border-primary-400 focus:ring-2 focus:ring-primary-400/20 transition-all duration-300 resize-none"
                     placeholder="Tell us about your project and how we can help..."
                   />
                 </div>
@@ -323,7 +323,7 @@ const Contact = () => {
                   type="submit"
                   whileHover={{ scale: 1.02 }}
                   whileTap={{ scale: 0.98 }}
-                  className="w-full bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white font-medium py-4 px-6 rounded-lg transition-all duration-300 flex items-center justify-center group"
+                  className="w-full bg-linear-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white font-medium py-4 px-6 rounded-lg transition-all duration-300 flex items-center justify-center group"
                 >
                   <Send size={20} className="mr-2 group-hover:translate-x-1 transition-transform duration-300" />
                   Send Message

src/components/Services.jsx

@@ -103,7 +103,7 @@ const Services = () => {
               className="bg-dark-700/50 backdrop-blur-sm border border-gray-600/30 rounded-xl p-8 group hover:border-primary-400/50 transition-all duration-300"
             >
               {/* Service Icon */}
-              <div className={`w-16 h-16 rounded-lg bg-gradient-to-r ${service.color} p-4 mb-6 group-hover:scale-110 transition-transform duration-300`}>
+              <div className={`w-16 h-16 rounded-lg bg-linear-to-r ${service.color} p-4 mb-6 group-hover:scale-110 transition-transform duration-300`}>
                 <service.icon className="w-full h-full text-white" />
               </div>
 
@@ -132,7 +132,7 @@ const Services = () => {
                 onClick={() => handleLearnMore(service.title)}
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
-                className="w-full bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300"
+                className="w-full bg-linear-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300"
               >
                 Learn More
               </motion.button>

src/index.css

@@ -1,7 +1,50 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@theme {
+  --color-primary-50: #f0f9ff;
+  --color-primary-100: #e0f2fe;
+  --color-primary-200: #bae6fd;
+  --color-primary-300: #7dd3fc;
+  --color-primary-400: #38bdf8;
+  --color-primary-500: #0ea5e9;
+  --color-primary-600: #0284c7;
+  --color-primary-700: #0369a1;
+  --color-primary-800: #075985;
+  --color-primary-900: #0c4a6e;
+
+  --color-dark-50: #f8fafc;
+  --color-dark-100: #f1f5f9;
+  --color-dark-200: #e2e8f0;
+  --color-dark-300: #cbd5e1;
+  --color-dark-400: #94a3b8;
+  --color-dark-500: #64748b;
+  --color-dark-600: #475569;
+  --color-dark-700: #334155;
+  --color-dark-800: #1e293b;
+  --color-dark-900: #0f172a;
+
+  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+
+  --animate-fade-in: fadeIn 0.5s ease-in-out;
+  --animate-slide-up: slideUp 0.6s ease-out;
+  --animate-bounce-slow: bounce 2s infinite;
+  --animate-pulse-slow: pulse 3s infinite;
+  --animate-float: float 6s ease-in-out infinite;
+
+  @keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+  @keyframes slideUp {
+    0% { transform: translateY(20px); opacity: 0; }
+    100% { transform: translateY(0); opacity: 1; }
+  }
+  @keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+  }
+}
 
 @layer base {
   html {
@@ -42,15 +85,15 @@
 
 @layer components {
   .gradient-text {
-    @apply bg-gradient-to-r from-primary-400 to-primary-600 bg-clip-text text-transparent;
+    @apply bg-linear-to-r from-primary-400 to-primary-600 bg-clip-text text-transparent;
   }
 
   .glass-effect {
     @apply backdrop-blur-sm bg-white/10 border border-white/20;
   }
 
   .btn-primary {
-    @apply bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl;
+    @apply bg-linear-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl;
   }
 
   .btn-secondary {
@@ -62,14 +105,14 @@
   }
 
   .form-input {
-    @apply w-full bg-dark-600 border border-gray-500 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:border-primary-400 focus:ring-2 focus:ring-primary-400/20 transition-all duration-300;
+    @apply w-full bg-dark-600 border border-gray-500 rounded-lg px-4 py-3 text-white placeholder:text-gray-400 focus:border-primary-400 focus:ring-2 focus:ring-primary-400/20 transition-all duration-300;
   }
 
   .form-select {
     @apply w-full bg-dark-600 border border-gray-500 rounded-lg px-4 py-3 text-white focus:border-primary-400 focus:ring-2 focus:ring-primary-400/20 transition-all duration-300;
   }
 
   .form-textarea {
-    @apply w-full bg-dark-600 border border-gray-500 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:border-primary-400 focus:ring-2 focus:ring-primary-400/20 transition-all duration-300 resize-none;
+    @apply w-full bg-dark-600 border border-gray-500 rounded-lg px-4 py-3 text-white placeholder:text-gray-400 focus:border-primary-400 focus:ring-2 focus:ring-primary-400/20 transition-all duration-300 resize-none;
   }
 }

vite.config.js

@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   base: '/',
   build: {
     outDir: 'dist',