diff --git a/tools/ui-components/package.json b/tools/ui-components/package.json
index 6945a2695e..f016d10ddf 100644
--- a/tools/ui-components/package.json
+++ b/tools/ui-components/package.json
@@ -30,6 +30,7 @@
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "19.0.2",
     "@rollup/plugin-node-resolve": "13.1.3",
+    "@rollup/plugin-typescript": "8.3.0",
     "@storybook/addon-actions": "6.4.12",
     "@storybook/addon-docs": "6.4.12",
     "@storybook/addon-essentials": "6.4.12",
diff --git a/tools/ui-components/rollup.config.js b/tools/ui-components/rollup.config.js
index da488ac6bf..bf97e5dfa1 100644
--- a/tools/ui-components/rollup.config.js
+++ b/tools/ui-components/rollup.config.js
@@ -1,13 +1,14 @@
 import babel from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
-import { nodeResolve } from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
 import postcss from 'rollup-plugin-postcss';
 import { terser } from 'rollup-plugin-terser';
+import resolve from '@rollup/plugin-node-resolve';
 
 const production = process.env.NODE_ENV !== 'development';
 
 const config = {
-  input: 'src/index.js',
+  input: 'src/index.ts',
   output: [
     {
       file: 'dist/bundle.js',
@@ -25,8 +26,9 @@ const config = {
     }
   ],
   plugins: [
-    nodeResolve(),
     postcss(),
+    resolve(),
+    typescript({ sourceMap: false }),
     babel({ babelHelpers: 'bundled' }),
     commonjs(),
     production && terser()
diff --git a/tools/ui-components/src/index.ts b/tools/ui-components/src/index.ts
index e8addc8656..e7111f1f4d 100644
--- a/tools/ui-components/src/index.ts
+++ b/tools/ui-components/src/index.ts
@@ -1,3 +1,4 @@
 // Use this file as the entry point for component export
+import './global.css';
 export { Button } from './button';
 export { Alert } from './alert';
diff --git a/tools/ui-components/tailwind.config.js b/tools/ui-components/tailwind.config.js
index aa0f5d1892..6873a37c0c 100644
--- a/tools/ui-components/tailwind.config.js
+++ b/tools/ui-components/tailwind.config.js
@@ -1,5 +1,10 @@
 module.exports = {
-  purge: ['./src/**/*.html', './src/**/*.js'],
+  purge: [
+    './src/**/*.html',
+    './src/**/*.js',
+    './src/**/*.ts',
+    './src/**/*.tsx'
+  ],
   darkMode: 'class',
   theme: {
     colors: {