fix(ui-components): correct the setup of tailwind default styles (#45369)

tools/ui-components/.storybook/preview.js

@@ -1,3 +1,5 @@
+import '../src/base.css';
+
 export const parameters = {
   controls: {
     matchers: {

tools/ui-components/package.json

@@ -60,6 +60,7 @@
     "storybook:theming": "npm run storybook --no-manager-cache",
     "build-storybook": "build-storybook",
     "build": "cross-env NODE_ENV=production rollup -c",
+    "build:css": "npx tailwindcss -i ./src/base.css -o ./dist/base.css --minify",
     "dev": "cross-env NODE_ENV=development rollup -c -w",
     "clean": "rimraf dist/*",
     "gen-component": "ts-node ./utils/gen-component-script"

tools/ui-components/src/base.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tools/ui-components/src/button.css

@@ -1,5 +1,3 @@
-@import './global.css';
-
 .storybook-button {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: 700;

tools/ui-components/src/global.css

@@ -1,4 +0,0 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-@import './colors.css';

tools/ui-components/src/index.ts

@@ -1,5 +1,4 @@
 // Use this file as the entry point for component export
-import './global.css';
 export { Button } from './button';
 export { Alert } from './alert';
 export { Image } from './image';