Tailwind CSS 통합

pnpm add tailwindcss @inkio/editor @inkio/extension

// Inkio 스타일 — minimal.css 사용 (Tailwind preflight와 충돌하지 않는 minimal 버전)
import '@inkio/editor/minimal.css';
import '@inkio/extension/style.css';

import '@inkio/editor/minimal.css';
import '@inkio/extension/style.css';
 
import { Editor } from '@inkio/editor';
import { getDefaultInkioExtensions } from '@inkio/extension';
import { useMemo } from 'react';
 
export default function TailwindEditor() {
  const extensions = useMemo(
    () => getDefaultInkioExtensions({ placeholder: 'Start typing...' }),
    [],
  );
 
  return (
    <div className="min-h-[520px] rounded-2xl bg-slate-950 p-6 text-slate-100">
      <h2 className="text-2xl font-semibold">My Editor</h2>
      <p className="mt-2 text-sm text-slate-300">
        Tailwind layout with Inkio editor content.
      </p>
 
      <div className="mt-6 rounded-xl border border-slate-700 bg-white p-4 text-slate-900">
        <Editor
          extensions={extensions}
          initialContent="<p>Hello from Tailwind!</p>"
          showBubbleMenu
          showFloatingMenu
        />
      </div>
    </div>
  );
}

// vite.config.ts
import tailwindcss from '@tailwindcss/vite';
 
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

/* app.css */
@import 'tailwindcss';