Tailwind CSS 4 Migration (#100)

* Updated to TailwindCSS v4
* Moved CSS module to its own CSS file because of lightingcss strict validation
* Respect next parameter in middleware
* Updated all packages. 
* Split CSSs for better organization.
* Redesigned theme and auth pages
* Improved pill and header design
* Formatted files using Prettier
* Better footer layout
* Better auth layout
* Bump version of the repository to 2.0.0

tooling/tailwind/index.ts

@@ -1,129 +0,0 @@
-import type { Config } from 'tailwindcss';
-import tailwindCssAnimate from 'tailwindcss-animate';
-import { fontFamily } from 'tailwindcss/defaultTheme';
-
-export default {
-  darkMode: ['class'],
-  content: [
-    '../../packages/ui/src/**/*.tsx',
-    '../../packages/billing/gateway/src/**/*.tsx',
-    '../../packages/features/auth/src/**/*.tsx',
-    '../../packages/features/notifications/src/**/*.tsx',
-    '../../packages/features/admin/src/**/*.tsx',
-    '../../packages/features/accounts/src/**/*.tsx',
-    '../../packages/features/team-accounts/src/**/*.tsx',
-    '!**/node_modules',
-  ],
-  theme: {
-    container: {
-      center: true,
-      padding: '2rem',
-      screens: {
-        '2xl': '1400px',
-      },
-    },
-    extend: {
-      borderColor: {
-        DEFAULT: 'hsl(var(--border) / <alpha-value>)',
-      },
-      colors: {
-        border: 'hsl(var(--border) / <alpha-value>)',
-        input: 'hsl(var(--input) / <alpha-value>)',
-        ring: 'hsl(var(--ring) / <alpha-value>)',
-        background: 'hsl(var(--background) / <alpha-value>)',
-        foreground: 'hsl(var(--foreground) / <alpha-value>)',
-        primary: {
-          DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
-          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
-          foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
-          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
-          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
-          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
-          foreground: 'hsl(var(--popover-foreground) / <alpha-value>)',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card) / <alpha-value>)',
-          foreground: 'hsl(var(--card-foreground) / <alpha-value>)',
-        },
-        sidebar: {
-          DEFAULT: 'hsl(var(--sidebar-background))',
-          foreground: 'hsl(var(--sidebar-foreground))',
-          primary: 'hsl(var(--sidebar-primary))',
-          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-          accent: 'hsl(var(--sidebar-accent))',
-          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-          border: 'hsl(var(--sidebar-border))',
-          ring: 'hsl(var(--sidebar-ring))',
-        },
-      },
-      borderRadius: {
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      fontFamily: {
-        cal: ['var(--font-cal)', ...fontFamily.sans],
-        sans: ['-apple-system', 'var(--font-sans)', ...fontFamily.sans],
-        heading: ['var(--font-heading)'],
-      },
-      keyframes: {
-        'fade-up': {
-          '0%': {
-            opacity: '0',
-            transform: 'translateY(10px)',
-          },
-          '80%': {
-            opacity: '0.6',
-          },
-          '100%': {
-            opacity: '1',
-            transform: 'translateY(0px)',
-          },
-        },
-        'fade-down': {
-          '0%': {
-            opacity: '0',
-            transform: 'translateY(-10px)',
-          },
-          '80%': {
-            opacity: '0.6',
-          },
-          '100%': {
-            opacity: '1',
-            transform: 'translateY(0px)',
-          },
-        },
-        'accordion-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-accordion-content-height)' },
-        },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: '0' },
-        },
-      },
-      animation: {
-        'fade-up': 'fade-up 0.5s',
-        'fade-down': 'fade-down 0.5s',
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
-    },
-  },
-  plugins: [tailwindCssAnimate],
-} satisfies Config;

tooling/tailwind/package.json

@@ -1,10 +1,8 @@
 {
   "name": "@kit/tailwind-config",
   "version": "0.1.0",
-  "main": "index.ts",
   "license": "MIT",
   "files": [
-    "index.ts",
     "postcss.js"
   ],
   "scripts": {
@@ -14,15 +12,14 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "autoprefixer": "^10.4.20",
     "postcss": "8.5.1",
-    "tailwindcss": "3.4.17",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss": "4.0.0"
   },
   "devDependencies": {
     "@kit/eslint-config": "workspace:*",
     "@kit/prettier-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
+    "@tailwindcss/postcss": "^4.0.0",
     "eslint": "^8.57.0",
     "prettier": "^3.4.2",
     "typescript": "^5.7.3"

tooling/tailwind/postcss.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };