chore: upgrade tailwind

Author: ScriptedAlchemy

examples/default-template/app/app.css

@@ -1,6 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../tailwind.config.ts';
 
 html,
 body {

examples/default-template/app/root.tsx

@@ -14,8 +14,6 @@ import {
 
 import type { Route } from './+types/root';
 import './app.css';
-// import stylesheet from "./app.css?url";
-// console.log(stylesheet);
 
 interface RouteHandle {
   breadcrumb?: (data: any) => string;
@@ -62,7 +60,7 @@ function Navigation() {
     }));
 
   return (
-    <header className="sticky top-0 bg-white/80 dark:bg-gray-950/80 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800">
+    <header className="sticky top-0 bg-white/80 dark:bg-gray-950/80 backdrop-blur-xs border-b border-gray-200 dark:border-gray-800">
       <div className="max-w-7xl mx-auto">
         {/* Main Navigation */}
         <nav className="px-4">

examples/default-template/app/routes/docs/advanced.tsx

@@ -169,7 +169,7 @@ export default function Advanced() {
 
       <section className="mb-12">
         <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Try It Out</h2>
-        <div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-lg p-6 hover:from-blue-100 hover:to-purple-100 dark:hover:from-blue-900/30 dark:hover:to-purple-900/30 transition-colors">
+        <div className="bg-linear-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-lg p-6 hover:from-blue-100 hover:to-purple-100 dark:hover:from-blue-900/30 dark:hover:to-purple-900/30 transition-colors">
           <p className="text-lg mb-2">
             Check out our{' '}
             <Link

examples/default-template/app/routes/docs/getting-started.tsx

@@ -170,7 +170,7 @@ export default function GettingStarted() {
 
       <section className="mb-12">
         <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Next Steps</h2>
-        <div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-lg p-6 hover:from-blue-100 hover:to-purple-100 dark:hover:from-blue-900/30 dark:hover:to-purple-900/30 transition-colors">
+        <div className="bg-linear-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-lg p-6 hover:from-blue-100 hover:to-purple-100 dark:hover:from-blue-900/30 dark:hover:to-purple-900/30 transition-colors">
           <p className="text-lg mb-2">
             Now that you understand the basics, check out the{' '}
             <Link

examples/default-template/app/routes/docs/index.tsx

@@ -116,7 +116,7 @@ export default function DocsIndex() {
 
       <section className="mb-12">
         <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Next Steps</h2>
-        <div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-lg p-6 hover:from-blue-100 hover:to-purple-100 dark:hover:from-blue-900/30 dark:hover:to-purple-900/30 transition-colors">
+        <div className="bg-linear-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-lg p-6 hover:from-blue-100 hover:to-purple-100 dark:hover:from-blue-900/30 dark:hover:to-purple-900/30 transition-colors">
           <p className="text-lg mb-2">
             Once you're comfortable with the basics, explore our{' '}
             <Link

examples/default-template/app/routes/docs/layout.tsx

@@ -18,7 +18,7 @@ export default function DocsLayout() {
       <div className="max-w-8xl mx-auto px-4 sm:px-6 md:px-8">
         <div className="flex">
           {/* Sidebar */}
-          <aside className="hidden md:block w-64 flex-shrink-0 border-r border-gray-200 dark:border-gray-800">
+          <aside className="hidden md:block w-64 shrink-0 border-r border-gray-200 dark:border-gray-800">
             <div className="sticky top-16 pt-8 pb-4 overflow-y-auto h-[calc(100vh-4rem)]">
               <div className="mb-8">
                 <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-wider mb-3">

examples/default-template/app/routes/projects/edit.tsx

@@ -57,7 +57,7 @@ export default function EditProject() {
               name="name"
               id="name"
               defaultValue={project.name}
-              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-xs focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
             />
           </div>
 
@@ -73,7 +73,7 @@ export default function EditProject() {
               name="description"
               rows={3}
               defaultValue={project.description}
-              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-xs focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
             />
           </div>
 
@@ -88,7 +88,7 @@ export default function EditProject() {
               id="status"
               name="status"
               defaultValue={project.status}
-              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-xs focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
             >
               <option value="planned">Planned</option>
               <option value="active">Active</option>
@@ -99,14 +99,14 @@ export default function EditProject() {
           <div className="flex justify-end gap-3">
             <Link
               to=".."
-              className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700"
+              className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-xs hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700"
             >
               Cancel
             </Link>
             <button
               type="submit"
               disabled={isSubmitting}
-              className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-xs hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {isSubmitting ? 'Saving...' : 'Save Changes'}
             </button>

examples/default-template/app/routes/projects/layout.tsx

@@ -26,7 +26,7 @@ export default function ProjectsLayout() {
     <div className="page-container">
       <div className="flex gap-8">
         {/* Sidebar */}
-        <aside className="w-64 flex-shrink-0">
+        <aside className="w-64 shrink-0">
           <div className="sticky top-24 space-y-4">
             <div className="flex items-center justify-between">
               <h2 className="text-lg font-semibold text-gray-900 dark:text-white">

examples/default-template/app/routes/projects/settings.tsx

@@ -85,7 +85,7 @@ export default function ProjectSettings() {
             <select
               name="visibility"
               defaultValue={project.visibility}
-              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-xs focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
             >
               <option value="private">Private</option>
               <option value="team">Team Only</option>
@@ -103,7 +103,7 @@ export default function ProjectSettings() {
                   type="checkbox"
                   name="notifications.email"
                   defaultChecked={project.notifications.email}
-                  className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                  className="h-4 w-4 rounded-sm border-gray-300 text-blue-600 focus:ring-blue-500"
                 />
                 <span className="ml-3 text-gray-900 dark:text-white">
                   Email notifications
@@ -114,7 +114,7 @@ export default function ProjectSettings() {
                   type="checkbox"
                   name="notifications.slack"
                   defaultChecked={project.notifications.slack}
-                  className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                  className="h-4 w-4 rounded-sm border-gray-300 text-blue-600 focus:ring-blue-500"
                 />
                 <span className="ml-3 text-gray-900 dark:text-white">
                   Slack notifications
@@ -125,7 +125,7 @@ export default function ProjectSettings() {
                   type="checkbox"
                   name="notifications.discord"
                   defaultChecked={project.notifications.discord}
-                  className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                  className="h-4 w-4 rounded-sm border-gray-300 text-blue-600 focus:ring-blue-500"
                 />
                 <span className="ml-3 text-gray-900 dark:text-white">
                   Discord notifications
@@ -141,13 +141,13 @@ export default function ProjectSettings() {
             <div className="space-y-4">
               <button
                 type="button"
-                className="px-4 py-2 text-sm font-medium text-yellow-700 bg-yellow-100 border border-transparent rounded-md hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500"
+                className="px-4 py-2 text-sm font-medium text-yellow-700 bg-yellow-100 border border-transparent rounded-md hover:bg-yellow-200 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500"
               >
                 Archive Project
               </button>
               <button
                 type="button"
-                className="px-4 py-2 text-sm font-medium text-red-700 bg-red-100 border border-transparent rounded-md hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+                className="px-4 py-2 text-sm font-medium text-red-700 bg-red-100 border border-transparent rounded-md hover:bg-red-200 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
               >
                 Delete Project
               </button>
@@ -157,14 +157,14 @@ export default function ProjectSettings() {
           <div className="flex justify-end gap-3">
             <Link
               to=".."
-              className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700"
+              className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-xs hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700"
             >
               Cancel
             </Link>
             <button
               type="submit"
               disabled={isSubmitting}
-              className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-xs hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {isSubmitting ? 'Saving...' : 'Save Changes'}
             </button>

examples/default-template/package.json

@@ -27,7 +27,7 @@
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.1",
     "react-router-devtools": "^1.1.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.7.2",
     "vite": "^5.4.11",
     "vite-tsconfig-paths": "^5.1.4"