From 610ba7b3e92957ec5bcb786ef50240a1fc946b2b Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Tue, 15 Mar 2022 19:20:57 +0700
Subject: [PATCH] fix(ui-components): correct the setup of tailwind default
 styles (#45369)

---
 tools/ui-components/.storybook/preview.js | 2 ++
 tools/ui-components/package.json          | 1 +
 tools/ui-components/src/base.css          | 3 +++
 tools/ui-components/src/button.css        | 2 --
 tools/ui-components/src/global.css        | 4 ----
 tools/ui-components/src/index.ts          | 1 -
 6 files changed, 6 insertions(+), 7 deletions(-)
 create mode 100644 tools/ui-components/src/base.css
 delete mode 100644 tools/ui-components/src/global.css

diff --git a/tools/ui-components/.storybook/preview.js b/tools/ui-components/.storybook/preview.js
index 7759e0e9f3..edfafd9b8a 100644
--- a/tools/ui-components/.storybook/preview.js
+++ b/tools/ui-components/.storybook/preview.js
@@ -1,3 +1,5 @@
+import '../src/base.css';
+
 export const parameters = {
   controls: {
     matchers: {
diff --git a/tools/ui-components/package.json b/tools/ui-components/package.json
index 4b29287233..b202b1d7b8 100644
--- a/tools/ui-components/package.json
+++ b/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"
diff --git a/tools/ui-components/src/base.css b/tools/ui-components/src/base.css
new file mode 100644
index 0000000000..b5c61c9567
--- /dev/null
+++ b/tools/ui-components/src/base.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tools/ui-components/src/button.css b/tools/ui-components/src/button.css
index b14322f672..005eaf52ec 100644
--- a/tools/ui-components/src/button.css
+++ b/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;
diff --git a/tools/ui-components/src/global.css b/tools/ui-components/src/global.css
deleted file mode 100644
index a57ee26204..0000000000
--- a/tools/ui-components/src/global.css
+++ /dev/null
@@ -1,4 +0,0 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-@import './colors.css';
diff --git a/tools/ui-components/src/index.ts b/tools/ui-components/src/index.ts
index 49e4cc0471..346caa9d14 100644
--- a/tools/ui-components/src/index.ts
+++ b/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';