fix(frontend): Revert postcss7-compat for tailwindcss to older version, and use tailwindcss2 directly

[zijianjoy]

Description of your changes:

This is one of the attempts to resolve test issue in https://github.com/kubeflow/pipelines/pull/7137, because the frontend image won't build with the error message:

Step #2 - "frontend": [0m[91mCannot find module 'postcss'
Step #2 - "frontend": Require stack:
Step #2 - "frontend": - /root/.npm/_npx/31/lib/node_modules/tailwindcss/lib/lib/generateRules.js
Step #2 - "frontend": - /root/.npm/_npx/31/lib/node_modules/tailwindcss/lib/lib/expandTailwindAtRules.js
Step #2 - "frontend": - /root/.npm/_npx/31/lib/node_modules/tailwindcss/lib/processTailwindFeatures.js
Step #2 - "frontend": - /root/.npm/_npx/31/lib/node_modules/tailwindcss/lib/cli.js

In this PR, I depend on an earlier version of postcss7-compat so we can still use postcss 7 for tailwindcss. But this is only a temporary mitigation.

As suggested in https://github.com/tailwindlabs/tailwindcss/issues/5064, we should aim at migrating away from PostCSS 7 because tailwindcss3 will drop the support for PostCSS 7. And with PostCSS 8, we need to upgrade Node, CRA, tailwind, pako, jest, craco, eslint and make source code changes to adopt to new restriction. Even with all that, Storybook is not compatible with the latest version of CRA 5 yet. So I hesitate to make the move for now. I will wrap that effort into a separate PR.

Checklist:

• [x] The title for your pull request (PR) should follow our title convention. Learn more about the pull request title convention used in this repository.

[google-oss-prow[bot]]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: To complete the pull request process, please ask for approval from zijianjoy after the PR has been reviewed.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• frontend/OWNERS

Approvers can indicate their approval by writing /approve in a comment Approvers can cancel approval by writing /approve cancel in a comment

[zijianjoy]

/test kubeflow-pipeline-mkp-test /test kubeflow-pipeline-e2e-test /test kubeflow-pipeline-upgrade-test

[zijianjoy]

/test kubeflow-pipeline-mkp-snapshot-test

[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.

[zijianjoy]

/test kubeflow-pipeline-mkp-test

[google-oss-prow[bot]]

@zijianjoy: The following tests failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
kubeflow-pipeline-e2e-test	32d32e55138fd964839b1461ba63c9ee29b2426e	link	true	/test kubeflow-pipeline-e2e-test
kubeflow-pipeline-upgrade-test	32d32e55138fd964839b1461ba63c9ee29b2426e	link	true	/test kubeflow-pipeline-upgrade-test
kubeflow-pipeline-mkp-snapshot-test	1cd13b2deb350e0cbc0e59e02b8a89f501db56a1	link	true	/test kubeflow-pipeline-mkp-snapshot-test
kubeflow-pipeline-mkp-test	1cd13b2deb350e0cbc0e59e02b8a89f501db56a1	link	true	/test kubeflow-pipeline-mkp-test

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. I understand the commands that are listed here.