create-t3-app icon indicating copy to clipboard operation
create-t3-app copied to clipboard

bug: remove abandoned tailwindcss-animate package on scafolded tailwindcss projects

Open gerardmarquinarubio opened this issue 1 year ago • 0 comments

Provide environment information

System: OS: macOS 14.2.1 CPU: (10) arm64 Apple M1 Pro Memory: 143.45 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 21.5.0 - /usr/local/bin/node npm: 10.2.4 - /usr/local/bin/npm bun: 1.0.23 - ~/.bun/bin/bun

"ct3aMetadata": { "initVersion": "7.26.0" }

Describe the bug

The current scafolded tailwindcss projects include the tailwindcss-animate library which leads developers like me in the wrong direction thinking this is a ready for production animation library that plays well with tailwind. Truth being that tailwindcss-animate:

  • Has not been updated in the last 6 months (only for bumping versions in the package.json)
  • Has not been meaningfully updated in the last 2 years.
  • Contains breaking bugs like this one where the plugin's class names collide with tailwind native class names and introduce some unwanted behaviour. Also this one.
  • Maintainer is nowhere to be seen or even actively trying to solve or help with the issues of the package.

This is not even an exhaustive list of what I think is wrong with this library and it's just what I found out after 30 minutes of trying to make a simple fade in animation with some delay.

For the sake of other developer's time this library should be removed altogether as this doesn't follow the spirit of the T3 stack.

Reproduction repo

https://codesandbox.io/p/devbox/test-v8kplk?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cls5xwuhl00073b6gcsg1mp7q%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cls5xwuhl00023b6gq1oz97r0%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cls5xwuhl00043b6g7aa1b34n%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cls5xwuhl00063b6g9z7y3w4s%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cls5xwuhl00023b6gq1oz97r0%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls5xwuhl00013b6gc7gwomik%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cls5xwuhl00023b6gq1oz97r0%2522%252C%2522activeTabId%2522%253A%2522cls5xwuhl00013b6gc7gwomik%2522%257D%252C%2522cls5xwuhl00063b6g9z7y3w4s%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls5xwuhl00053b6ggvv3rw0k%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A3000%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cls5xwuhl00063b6g9z7y3w4s%2522%252C%2522activeTabId%2522%253A%2522cls5xwuhl00053b6ggvv3rw0k%2522%257D%252C%2522cls5xwuhl00043b6g7aa1b34n%2522%253A%257B%2522id%2522%253A%2522cls5xwuhl00043b6g7aa1b34n%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls5xwuhl00033b6g7j4ypf7y%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cls5xwuhl00033b6g7j4ypf7y%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

To reproduce

Open the reproduction repo and notice how the "Create T3 App" h1 title doesn't correctly have an initial opacity state and the delayed animation looks wrong.

Additional information

No response

gerardmarquinarubio avatar Feb 03 '24 10:02 gerardmarquinarubio