chore: add tailwindcss (#1)

lib/components/BlockEditor/index.tsx

@@ -1,5 +1,5 @@
 import { EditorContent, Extension, useEditor } from '@tiptap/react';
-import './block-editor.css';
+import '../../styles/main.css';
 import { extensions as defaultExtensions } from './extension';
 import { EditorProps } from '@tiptap/pm/view';
 import { FC } from 'react';

lib/styles/main.css

@@ -0,0 +1,53 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  /* h1 to h6 font size */
+  h1 {
+    @apply text-4xl;
+  }
+  h2 {
+    @apply text-3xl;
+  }
+  h3 {
+    @apply text-2xl;
+  }
+  h4 {
+    @apply text-xl;
+  }
+  h5 {
+    @apply text-lg;
+  }
+  h6 {
+    @apply text-base;
+  }
+}
+
+.block-editor-wrapper {
+  @apply p-8;
+}
+
+.block-editor {
+  @apply w-full h-full border-0 outline-none;
+}
+
+/* show placeholder when editor is in focused mode */
+.tiptap.ProseMirror-focused .is-node-empty.has-focus::before {
+  @apply text-[#959595] float-left h-0 pointer-events-none;
+  content: attr(data-placeholder);
+}
+
+.bubble-menu-wrapper {
+  @apply rounded-[6px] p-[10px] bg-white;
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
+}
+.menu-item-wrapper {
+  @apply flex gap-2;
+}
+.menu-item-wrapper > button {
+  @apply bg-transparent border-none cursor-pointer py-1 px-2 rounded-[4px] hover:bg-gray-200;
+}
+.menu-item-wrapper > button.active {
+  @apply py-1 px-2 rounded-[4px] bg-gray-200;
+}

package.json

@@ -23,7 +23,8 @@
   "license": "MIT",
   "scripts": {
     "dev": "vite",
-    "build": "tsc --p ./tsconfig-build.json && vite build",
+    "build": "tsc --p ./tsconfig-build.json && vite build && npm run build:style",
+    "build:style": "postcss ./lib/styles/main.css -o ./dist/main.css",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
@@ -39,11 +40,15 @@
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.53.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
     "glob": "^10.3.10",
     "lodash": "^4.17.21",
+    "postcss": "^8.4.31",
+    "postcss-cli": "^10.1.0",
+    "tailwindcss": "^3.3.5",
     "typescript": "^5.2.2",
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.6.3",

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.tsx

@@ -1,4 +1,4 @@
-import { BlockEditor } from '../lib/main';
+import { BlockEditor } from '../dist/main';
 
 function App() {
   return (

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./lib/**/*.{ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+