Set up tailwind

package.json

@@ -27,6 +27,9 @@
     "@types/react-dom": "^18.0.6",
     "@types/wicg-file-system-access": "^2020.9.5",
     "@vitejs/plugin-react": "^2.0.0",
+    "autoprefixer": "^10.4.8",
+    "postcss": "^8.4.14",
+    "tailwindcss": "^3.1.7",
     "typescript": "^4.6.4",
     "vite": "^3.0.0"
   }

postcss.config.cjs

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

src/components/app.tsx

@@ -32,7 +32,7 @@ export function App() {
 
   return (
     <div>
-      <div style={{ padding: 16 }}>{JSON.stringify(state.value)}</div>
+      <div className="p-4">{JSON.stringify(state.value)}</div>
       {state.matches("prompt") ? (
         <dialog open>
           <button onClick={() => send("REQUEST_PERMISSION")}>Grant</button>
@@ -44,13 +44,7 @@ export function App() {
         </button>
       ) : null}
       {state.context.directoryHandle ? (
-        <div
-          style={{
-            padding: 16,
-            display: "flex",
-            gap: 8,
-          }}
-        >
+        <div className="p-4 flex gap-2">
           <div>{state.context.directoryHandle?.name}</div>
           <button
             onClick={() => send("RELOAD")}
@@ -61,20 +55,8 @@ export function App() {
           <button onClick={() => send("DISCONNECT")}>Disconnect</button>
         </div>
       ) : null}
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: 16,
-          padding: 16,
-        }}
-      >
-        <div
-          style={{
-            border: "1px solid gray",
-            padding: 16,
-          }}
-        >
+      <div className="flex flex-col gap-4 p-4">
+        <div className="border border-[gray] p-4">
           <NoteForm />
         </div>
         {sortedNoteIds.slice(0, numVisibleNotes).map(id => (

src/components/note-card.tsx

@@ -45,10 +45,7 @@ export function NoteCard({ id }: NoteCardProps) {
   return (
     <div
       ref={cardRef}
-      style={{
-        border: "1px solid gray",
-        padding: 16,
-      }}
+      className="border border-[gray] p-4"
       tabIndex={0}
       onKeyDown={event => {
         // Switch to editing with `e`
@@ -60,23 +57,11 @@ export function NoteCard({ id }: NoteCardProps) {
     >
       {!isEditing ? (
         // View mode
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: 16,
-          }}
-        >
+        <div className="flex flex-col gap-4">
           <ReactMarkdown>{body}</ReactMarkdown>
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-            }}
-          >
+          <div className="flex justify-between items-center">
             <span>{id}</span>
-            <div style={{ display: "flex", gap: 8 }}>
+            <div className="flex gap-2">
               <button
                 onClick={() =>
                   globalState.service.send({ type: "DELETE_NOTE", id })

src/components/note-form.tsx

@@ -62,11 +62,7 @@ export function NoteForm({
 
   return (
     <form
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: 16,
-      }}
+      className="flex flex-col gap-4"
       onSubmit={event => {
         handleSubmit();
         event.preventDefault();
@@ -88,7 +84,7 @@ export function NoteForm({
           }
         }}
       />
-      <div style={{ alignSelf: "end", display: "flex", gap: 8 }}>
+      <div className="self-end flex gap-2">
         {onCancel ? (
           <button type="button" onClick={onCancel}>
             Cancel

src/index.css

@@ -1,7 +1,6 @@
-body {
-  margin: 0;
-  font-family: monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 /* Codemirror styles */
 
@@ -18,4 +17,5 @@ body {
 
 .cm-editor .cm-scroller {
   line-height: 1.5;
+  font-family: unset;
 }

tailwind.config.cjs

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