feat: setup tailwind, and build css (#5)

* feat: setup tailwind, and build css

* feat: watch and build tailwind, rework dev script

Author: Emmanuel-Develops

.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

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.3.1.cjs

package.json

@@ -8,9 +8,11 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup",
+    "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",
@@ -37,12 +39,17 @@
     "@testing-library/react": "^16.0.0",
     "@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",
     "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": "[email protected]"
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

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;

src/styles/tailwind.css

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

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

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,
 });