Upgrade Tailwind

[gtsiolis]

Problem to solve

The dashboard is currently using Tailwind 2.x but Tailwind 3.x is already out there since last year, see relevant release.

We've run into issues or confusion where both team or community contributors have been trying to bypass the limitations of the Tailwind 2.0. For example, see https://github.com/gitpod-io/gitpod/issues/10004, https://github.com/gitpod-io/gitpod/pull/10284, https://github.com/gitpod-io/gitpod/pull/11815#discussion_r936810971, etc.

Proposal

Upgrade Tailwind from 2.x to 3.x. 🌬️

See also relevant docs.

[Harixomxsingh]

hey there, Thanks for raising this issue I'm Working on it If I need some time then I will comment.

[Harixomxsingh]

hey can you help in which folder I need to upgrade the tailwindcss, correct me if I'm wrong, I think in components/dashboard.

[gtsiolis]

@Harixomxsingh You're right, this is about the components/dashboard.

[Hardik500]

@gtsiolis @Harixomxsingh I can work on this issue, if no work has been done on this yet.

[gtsiolis]

@Hardik500 I couldn't find any open PR linking back to this issue, feel free to pick it up. 🏓

[Hardik500]

Awesome @gtsiolis, I'll be picking it up then

[Hardik500]

@gtsiolis An update on the Tailwind v3 upgrade, it seems that the process is not that straightforward for upgrading to tailwind v3. Cause tailwindv3 requires PostCSS v8, which in turn requires react-scripts v5.0. But craco doesn’t support react-scripts v5.0, as per their official docs ( https://github.com/dilanx/craco#support although some are saying that alpha builds do support those, but I found some related issues in those too )

So the solution I found out was using react-app-rewired (https://github.com/timarney/react-app-rewired), which currently doesn't seem to cause any errors except some polyfills issues, for which I found a workaround for. But 2 issues still remain,

1. We need to override the config for react-app-rewired the same way we did for craco else we won't be able to connect to backend ( I am still new, so correct me if I'm wrong on this )
2. react-intl-tel-input seems to be breaking ( seems to be related to this: https://github.com/jackocnr/intl-tel-input/issues/1341 ) Fixed by this: https://stackoverflow.com/a/71828113

This is the one major breakage I found out, I haven't tested the live version right now, cause of Issue 1, as the frontend is unable to connect. And I am getting timeout

For now, I'll try to write a similar config for react-app-rewired that we have for craco But this is it for now, do let me know your thoughts. Or if you know an easier fix for this whole major dependency issues let me know.

[Hardik500]

@gtsiolis An update on the Tailwind v3 upgrade, it seems that the process is not that straightforward for upgrading to tailwind v3. Cause tailwindv3 requires PostCSS v8, which in turn requires react-scripts v5.0. But craco doesn’t support react-scripts v5.0, as per their official docs ( https://github.com/dilanx/craco#support although some are saying that alpha builds do support those, but I found some related issues in those too )

So the solution I found out was using react-app-rewired (https://github.com/timarney/react-app-rewired), which currently doesn't seem to cause any errors except some polyfills issues, for which I found a workaround for. But 2 issues still remain,

1. We need to override the config for react-app-rewired the same way we did for craco else we won't be able to connect to backend ( I am still new, so correct me if I'm wrong on this )
2. react-intl-tel-input seems to be breaking ( seems to be related to this: TypeScript error in Project: 'IntlTelInput' cannot be used as a JSX component. jackocnr/intl-tel-input#1341 ) Fixed by this: https://stackoverflow.com/a/71828113

This is the one major breakage I found out, I haven't tested the live version right now, cause of Issue 1, as the frontend is unable to connect. And I am getting timeout

For now, I'll try to write a similar config for react-app-rewired that we have for craco But this is it for now, do let me know your thoughts. Or if you know an easier fix for this whole major dependency issues let me know.

@gtsiolis Thoughts?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[gtsiolis]

Closing as this was resolved in https://github.com/gitpod-io/gitpod/pull/18525 — thanks, @AlexTugarev!