diff --git a/package.json b/package.json
index 6bceb5e..67fa568 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "style": "./dist/styles.css",
   "license": "MIT",
   "files": [
     "dist",
@@ -12,15 +13,16 @@
   ],
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
     "./icons": {
+      "types": "./dist/icons.d.ts",
       "import": "./dist/icons.mjs",
-      "require": "./dist/icons.js",
-      "types": "./dist/icons.d.ts"
-    }
+      "require": "./dist/icons.js"
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "homepage": "https://github.com/bitcoin-dev-project/bdp-ui",
   "repository": {
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
index c711d38..810a8fc 100644
--- a/src/components/button/Button.tsx
+++ b/src/components/button/Button.tsx
@@ -1,8 +1,6 @@
 // src/components/Button/Button.tsx
 
 import React from "react";
-import "../../styles/tailwind.output.css";
-
 export interface ButtonProps {
   label: string;
   onClick?: () => void;
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
index fbfedf2..6bdbe9e 100644
--- a/src/components/footer/Footer.tsx
+++ b/src/components/footer/Footer.tsx
@@ -13,7 +13,7 @@ export interface FooterRootProps
 }
 
 const Separator = () => (
-  <div className="h-5 border xl:h-6 xl:border-2 border-custom-stroke hidden xl:block" />
+  <div className="h-5 border xl:h-6 xl:border-2 border-bdp-stroke hidden xl:block" />
 );
 
 const Footer: React.FC<FooterRootProps> & {
diff --git a/src/components/footer/FooterAbout.tsx b/src/components/footer/FooterAbout.tsx
index bcb8b6b..35017ac 100644
--- a/src/components/footer/FooterAbout.tsx
+++ b/src/components/footer/FooterAbout.tsx
@@ -32,7 +32,7 @@ const FooterAbout = (props: React.PropsWithChildren<FooterAboutProps>) => {
         href={entityLink ?? "https://bitcoindevs.xyz/"}
         target="_blank"
         rel="noreferrer"
-        className="underline font-medium text-custom-brightOrange-100"
+        className="underline font-medium text-bdp-brightOrange-100"
       >
         {entityName ?? "Bitcoin Dev Project"}
       </a>
diff --git a/tailwind.config.js b/tailwind.config.js
index 30f0268..d312c1c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,19 +3,9 @@ module.exports = {
   darkMode: "class",
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
-    fontFamily: {
-      sans: ["ui-sans-serif", "system-ui"],
-      serif: ["ui-serif", "Georgia"],
-      mono: ["ui-monospace", "SFMono-Regular"],
-      geist: ['"Geist Sans"', "sans-serif"],
-      mona: ['"Mona Sans"', "sans-serif"],
-    },
     extend: {
-      boxShadow: {
-        "custom-sm": "2px 3px 10px 0px rgba(255, 128, 0, 0.18);",
-      },
       colors: {
-        custom: {
+        bdp: {
           background: "var(--background)",
           "hover-primary": "var(--hover-primary)",
           "hover-state": "var(--hover-state)",
diff --git a/tsup.config.ts b/tsup.config.ts
index 646b3b6..1fc1773 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -1,4 +1,5 @@
 import { defineConfig } from 'tsup';
+import fs from 'fs';
 
 export default defineConfig({
   entry: ['src/index.ts', 'src/icons.ts'],
@@ -9,5 +10,8 @@ export default defineConfig({
   sourcemap: true,
   clean: true,
   external: ['react', 'react-dom'],
-  injectStyle: true,
+  injectStyle: false,
+  async onSuccess() {
+    await fs.promises.copyFile('src/styles/tailwind.output.css', 'dist/styles.css');
+  },
 });
\ No newline at end of file