fix(payments): sub management banner hidden

Because:

* On the subscription management page the banner is currently shown at
  the bottom of the page, where it should actually be shown at the top,
  which hides it from the user.

This commit:

* Reorganize css files in fxa-react.
* fxa-payments imports the missing css from fxa-react.
* Add the --postcss parameter to the fxa-payments build-css script
* The banner is now shown at the top of the page.

Closes #13567

packages/fxa-payments-server/package.json

@@ -3,7 +3,7 @@
   "version": "1.236.2",
   "description": "Firefox Accounts Payments Service",
   "scripts": {
-    "build-css": "tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/tailwind.out.css",
+    "build-css": "tailwindcss --postcss -i ./src/styles/tailwind.css -o ./src/styles/tailwind.out.css",
     "postinstall": "../../_scripts/clone-l10n.sh fxa-payments-server",
     "lint": "npm-run-all --parallel lint:eslint",
     "lint:eslint": "eslint . .storybook",

packages/fxa-payments-server/src/styles/tailwind.css

@@ -2,9 +2,16 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+/* To ensure these imports are properly processed the tailwindcss-cli used in the
+ * build-css script, needs to have the --postcss parameter provided so that it reads
+ * the config from postcss.config.js */
+/* Once `@tailwind base` can be enabled for Payments, change this import to tailwind.css */
+@import '../../../fxa-react/styles/index.css';
+
 /* '@tailwind base' should be enabled once Payments is completely converted to Tailwind.
  * We must also modify payments' tailwind config file and remove the .preflight edit */
 /* @tailwind base; */
+
 @tailwind components;
 @tailwind utilities;
 

packages/fxa-react/components/Portal/index.tsx

@@ -24,10 +24,7 @@ const resetA11yOnAdjacentElementsAndBody = (els: NodeListOf<HTMLElement>) => {
   });
 };
 
-const Portal = ({
-  id,
-  children,
-}: PortalProps): React.ReactPortal | null => {
+const Portal = ({ id, children }: PortalProps): React.ReactPortal | null => {
   let el = document.getElementById(id);
   if (!el) {
     el = document.createElement('div');

packages/fxa-react/styles/index.css

@@ -0,0 +1,5 @@
+/*
+  This file gathers all stylesheets in fxa-react, so that they can easily
+  be imported in other packages that don't want to import tailwind.css.
+*/
+@import './portal.css';

packages/fxa-react/styles/tailwind.css

@@ -1,5 +1,5 @@
+@import './index.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@import './portal.css';