feat(tools): setup TailwindCSS in ui-components (#42153)

tools/ui-components/src/button.css

@@ -1,3 +1,5 @@
+@import './global.css';
+
 .storybook-button {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: 700;
@@ -28,3 +30,7 @@
   font-size: 16px;
   padding: 12px 24px;
 }
+
+.fcc-style {
+  @apply bg-darkGreen;
+}

tools/ui-components/src/button.js

@@ -18,9 +18,12 @@ export const Button = ({
     : 'storybook-button--secondary';
   return (
     <button
-      className={['storybook-button', `storybook-button--${size}`, mode].join(
-        ' '
-      )}
+      className={[
+        'storybook-button',
+        `storybook-button--${size}`,
+        mode,
+        'fcc-style'
+      ].join(' ')}
       style={{ backgroundColor }}
       type='button'
       {...props}

tools/ui-components/src/global.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';