From 9089e0cfa1592403ff719937f65f0b23f0adca12 Mon Sep 17 00:00:00 2001
From: Emmanuel-Develops <itakpeemma@gmail.com>
Date: Fri, 28 Jun 2024 11:56:57 +0100
Subject: [PATCH 1/2] feat: setup tailwind, and build css

---
 .gitignore                       | 4 +++-
 .yarnrc.yml                      | 3 +++
 package.json                     | 9 +++++++--
 postcss.config.js                | 6 ++++++
 src/components/Button/Button.tsx | 1 +
 src/styles/tailwind.css          | 3 +++
 tailwind.config.js               | 9 +++++++++
 tsup.config.ts                   | 2 ++
 8 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 .yarnrc.yml
 create mode 100644 postcss.config.js
 create mode 100644 src/styles/tailwind.css
 create mode 100644 tailwind.config.js

diff --git a/.gitignore b/.gitignore
index b5f48a2..41afb7a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,13 +11,15 @@
 # production
 /build
 /dist
+src/styles/tailwind.output.css
 
 # Storybook
 storybook-static
 *storybook.log
 
-# lock file
+# yarn
 yarn.lock
+.yarn
 
 # misc
 .DS_Store
diff --git a/.yarnrc.yml b/.yarnrc.yml
new file mode 100644
index 0000000..fd5296c
--- /dev/null
+++ b/.yarnrc.yml
@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.3.1.cjs
diff --git a/package.json b/package.json
index 7dbacfb..6b4adad 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup",
+    "build:css": "tailwindcss -i src/styles/tailwind.css -o src/styles/tailwind.output.css --minify",
+    "build": "yarn build:css && tsup",
     "clean": "rm -rf dist",
     "dev": "tsup --watch",
     "test": "jest",
@@ -37,12 +38,16 @@
     "@testing-library/react": "^16.0.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.19",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.4.38",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "storybook": "^8.1.10",
+    "tailwindcss": "^3.4.4",
     "tsup": "^8.1.0",
     "typescript": "^5.5.2"
-  }
+  },
+  "packageManager": "yarn@4.3.1"
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 135daa8..d94e38a 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,6 +1,7 @@
 // src/components/Button/Button.tsx
 
 import React from 'react';
+import '../../styles/tailwind.output.css';
 
 export interface ButtonProps {
   label: string;
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/styles/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..2c63024
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
diff --git a/tsup.config.ts b/tsup.config.ts
index 613bdb5..2e9f9e7 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -3,9 +3,11 @@ import { defineConfig } from 'tsup';
 export default defineConfig({
   entry: ['src/index.ts'],
   format: ['cjs', 'esm'],
+  outDir: 'dist',
   dts: true,
   splitting: false,
   sourcemap: true,
   clean: true,
   external: ['react', 'react-dom'],
+  injectStyle: true,
 });
\ No newline at end of file

From 19e975214802db4827a0b6508f04f70b2489b7b3 Mon Sep 17 00:00:00 2001
From: Emmanuel-Develops <itakpeemma@gmail.com>
Date: Mon, 1 Jul 2024 15:49:30 +0100
Subject: [PATCH 2/2] feat: watch and build tailwind, rework dev script

---
 package.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6b4adad..cc27174 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,10 @@
   ],
   "scripts": {
     "build:css": "tailwindcss -i src/styles/tailwind.css -o src/styles/tailwind.output.css --minify",
+    "watch:css": "tailwindcss -i src/styles/tailwind.css -o src/styles/tailwind.output.css --watch",
+    "dev": "concurrently \"yarn watch:css\" \"yarn storybook\"",
     "build": "yarn build:css && tsup",
     "clean": "rm -rf dist",
-    "dev": "tsup --watch",
     "test": "jest",
     "prepublishOnly": "npm run build",
     "storybook": "storybook dev -p 6006",
@@ -39,6 +40,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.19",
+    "concurrently": "^8.2.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.38",