From 184c846b1188a5699e4be6c1453d4e7500700edc Mon Sep 17 00:00:00 2001 From: Thomas Camlong Date: Thu, 17 Apr 2025 10:45:44 +0200 Subject: [PATCH] add tailwindcss-motion https://rombo.co/tailwind/ --- web/package.json | 1 + web/pnpm-lock.yaml | 52 +++++++++++++++++++++++++---------------- web/src/app/globals.css | 1 + 3 files changed, 34 insertions(+), 20 deletions(-) diff --git a/web/package.json b/web/package.json index 7257b023..04b1cbed 100644 --- a/web/package.json +++ b/web/package.json @@ -61,6 +61,7 @@ "recharts": "^2.15.2", "sonner": "^2.0.3", "tailwind-merge": "^3.2.0", + "tailwindcss-motion": "^1.1.0", "tw-animate-css": "^1.2.5", "vaul": "^1.1.2", "zod": "^3.24.2" diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 6eb08419..53bd4cd4 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -111,8 +111,8 @@ importers: specifier: ^8.6.0 version: 8.6.0(react@19.1.0) framer-motion: - specifier: ^12.6.5 - version: 12.6.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + specifier: ^12.7.3 + version: 12.7.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0) input-otp: specifier: ^1.4.2 version: 1.4.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0) @@ -120,8 +120,8 @@ importers: specifier: ^0.487.0 version: 0.487.0(react@19.1.0) motion: - specifier: ^12.6.5 - version: 12.6.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + specifier: ^12.7.3 + version: 12.7.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0) next: specifier: 15.3.0 version: 15.3.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0) @@ -158,6 +158,9 @@ importers: tailwind-merge: specifier: ^3.2.0 version: 3.2.0 + tailwindcss-motion: + specifier: ^1.1.0 + version: 1.1.0(tailwindcss@4.1.3) tw-animate-css: specifier: ^1.2.5 version: 1.2.5 @@ -1357,8 +1360,8 @@ packages: resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==} engines: {node: '>= 6'} - framer-motion@12.6.5: - resolution: {integrity: sha512-MKvnWov0paNjvRJuIy6x418w23tFqRfS6CXHhZrCiSEpXVlo/F+usr8v4/3G6O0u7CpsaO1qop+v4Ip7PRCBqQ==} + framer-motion@12.7.3: + resolution: {integrity: sha512-dNT4l5gEnUo2ytXLUBUf6AI21dZ77TMclDKE3ElaIHZ8m90nJ/NCcExW51zdSIaS0RhAS5iXcF7bEIxZe8XG2g==} peerDependencies: '@emotion/is-prop-valid': '*' react: ^18.0.0 || ^19.0.0 @@ -1513,14 +1516,14 @@ packages: resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==} engines: {node: '>= 0.6'} - motion-dom@12.6.5: - resolution: {integrity: sha512-jpM9TQLXzYMWMJ7Ec7sAj0iis8oIuu6WvjI3yNKJLdrZyrsI/b2cRInDVL8dCl683zQQq19DpL9cSMP+k8T1NA==} + motion-dom@12.7.3: + resolution: {integrity: sha512-IjMt1YJHrvyvruFvmpmd6bGXXGCvmygrnvSb3aZ8KhOzF4H3PulU+cMBzH+U8TBJHjC/mnmJFRIA1Cu4vBfcBA==} - motion-utils@12.6.5: - resolution: {integrity: sha512-IsOeKsOF+FWBhxQEDFBO6ZYC8/jlidmVbbLpe9/lXSA9j9kzGIMUuIBx2SZY+0reAS0DjZZ1i7dJp4NHrjocPw==} + motion-utils@12.7.2: + resolution: {integrity: sha512-XhZwqctxyJs89oX00zn3OGCuIIpVevbTa+u82usWBC6pSHUd2AoNWiYa7Du8tJxJy9TFbZ82pcn5t7NOm1PHAw==} - motion@12.6.5: - resolution: {integrity: sha512-X3IIy76nxyk4I87xQEm5Ah8ojQ4qisd+/H592eXF14ha+xqpbDJcWOSf9PEKCOCC0K4PN/0UBaz+MvSQUkIeXQ==} + motion@12.7.3: + resolution: {integrity: sha512-EGhzIg7vj+USH9SLNLjHRzglldWEletUZTEtBVKW7IJF+1Ig3RI5LnJmHQBNutuOIyeUbcF36MrNFT00etlc3g==} peerDependencies: '@emotion/is-prop-valid': '*' react: ^18.0.0 || ^19.0.0 @@ -1737,6 +1740,11 @@ packages: tailwind-merge@3.2.0: resolution: {integrity: sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA==} + tailwindcss-motion@1.1.0: + resolution: {integrity: sha512-0lK6rA4+367ffJdi1TtB72GlMCxJi2TP/xRiHc6An5pZSlU6WfIHhSvLxpcGilGZfBrOqc2q4woH1DEP/lCNbQ==} + peerDependencies: + tailwindcss: '>=3.0.0 || insiders' + tailwindcss@4.1.3: resolution: {integrity: sha512-2Q+rw9vy1WFXu5cIxlvsabCwhU2qUwodGq03ODhLJ0jW4ek5BUtoCsnLB0qG+m8AHgEsSJcJGDSDe06FXlP74g==} @@ -2904,10 +2912,10 @@ snapshots: es-set-tostringtag: 2.1.0 mime-types: 2.1.35 - framer-motion@12.6.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0): + framer-motion@12.7.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0): dependencies: - motion-dom: 12.6.5 - motion-utils: 12.6.5 + motion-dom: 12.7.3 + motion-utils: 12.7.2 tslib: 2.8.1 optionalDependencies: react: 19.1.0 @@ -3026,15 +3034,15 @@ snapshots: dependencies: mime-db: 1.52.0 - motion-dom@12.6.5: + motion-dom@12.7.3: dependencies: - motion-utils: 12.6.5 + motion-utils: 12.7.2 - motion-utils@12.6.5: {} + motion-utils@12.7.2: {} - motion@12.6.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0): + motion@12.7.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0): dependencies: - framer-motion: 12.6.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + framer-motion: 12.7.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0) tslib: 2.8.1 optionalDependencies: react: 19.1.0 @@ -3253,6 +3261,10 @@ snapshots: tailwind-merge@3.2.0: {} + tailwindcss-motion@1.1.0(tailwindcss@4.1.3): + dependencies: + tailwindcss: 4.1.3 + tailwindcss@4.1.3: {} tapable@2.2.1: {} diff --git a/web/src/app/globals.css b/web/src/app/globals.css index 85d69a3f..9ff21031 100644 --- a/web/src/app/globals.css +++ b/web/src/app/globals.css @@ -1,6 +1,7 @@ @import "tailwindcss"; @import "tw-animate-css"; +@plugin "tailwindcss-motion"; @custom-variant dark (&:is(.dark *)); @theme inline {