serlo · elbotho · Jan 29, 2025 · Jan 29, 2025
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -3,5 +3,10 @@
   "singleQuote": true,
   "trailingComma": "es5",
   "proseWrap": "always",
-  "plugins": ["prettier-plugin-packagejson"]
+  "plugins": ["prettier-plugin-packagejson", "prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "./src/frontend/style.css",
+  "tailwindConfig": "./tailwind.config.ts",
+  "tailwindFunctions": ["clsx", "cn", "tw"],
+  "tailwindPreserveWhitespace": true,
+  "tailwindPreserveDuplicates": false
 }
diff --git a/.tool-versions b/.tool-versions
@@ -1 +1 @@
-nodejs 20.14.0
+nodejs 22.11.0
diff --git a/index.html b/index.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <title>Serlo Editor</title>
     <meta charset="UTF-8" />
     <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Serlo Editor</title>
+    <link href="/src/frontend/style.css" rel="stylesheet" />
   </head>
   <body>
     <div id="serlo-root"></div>

diff --git a/package.json b/package.json
@@ -4,10 +4,12 @@
   "private": true,
   "license": "Apache-2.0",
   "author": "Serlo Education e.V.",
+  "type": "module",
   "scripts": {
     "build": "npm-run-all --parallel \"build:*\"",
     "build:backend": "esbuild ./src/backend/index.ts --bundle --platform=node --outfile=dist/backend/index.cjs",
     "build:frontend": "vite build",
+    "vite": "vite",
     "dev": "npm-run-all --parallel \"dev:*\"",
     "dev:frontend": "vite build --watch",
     "dev:databases": "docker compose up --detach --build",
@@ -33,6 +35,7 @@
     "@dotenvx/dotenvx": "^1.32.0",
     "@paralleldrive/cuid2": "^2.2.2",
     "@serlo/editor": "0.21.3",
+    "@tailwindcss/vite": "^4.0.0",
     "express": "^4.21.2",
     "fp-ts": "2.16.9",
     "http-proxy-middleware": "^3.0.3",
@@ -46,6 +49,7 @@
     "openai": "^4.77.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "tailwindcss": "^4.0.0",
     "url-join": "4.0.1",
     "use-resize-observer": "^9.1.0",
     "uuid": "^11.0.4"
@@ -78,6 +82,7 @@
     "playwright": "^1.50.0",
     "prettier": "3.4.2",
     "prettier-plugin-packagejson": "^2.5.6",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "ts-node": "^10.9.2",
     "tsx": "4.19.2",
     "typescript": "^5.7.3",

diff --git a/public/assets/serlo-editor-file-logo.png b/public/assets/serlo-editor-file-logo.png
diff --git a/src/backend/editor-route-handlers.ts b/src/backend/editor-route-handlers.ts
@@ -11,9 +11,13 @@ import urljoin from 'url-join'
 import { v4 as uuid_v4 } from 'uuid'
 
 import { Provider as ltijs } from 'ltijs'
+import { fileURLToPath } from 'url'
 
 const ltijsKey = config.LTIJS_KEY
 
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
 export async function app(_: Request, res: Response) {
   return res.sendFile(path.join(__dirname, '../../dist/frontend/index.html'))
 }

diff --git a/src/backend/index.ts b/src/backend/index.ts
@@ -1,5 +1,6 @@
 import { Provider as ltijs } from 'ltijs'
 import path from 'path'
+import { fileURLToPath } from 'url'
 
 import * as t from 'io-ts'
 import { NextFunction, Request, Response } from 'express'
@@ -30,6 +31,9 @@ export interface Entity {
   id_token_on_creation: string
 }
 
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
 const setup = async () => {
   ltijs.setup(
     ltijsKey,

diff --git a/src/frontend/App.tsx b/src/frontend/App.tsx
@@ -153,7 +153,7 @@ function App() {
     return (
       <div
         ref={wrapperRef}
-        style={{ padding: '1rem', backgroundColor: 'white', minWidth: '600px' }}
+        className="eaas:min-w-[600px] eaas:bg-white eaas:p-4"
       >
         <SerloRenderer
           state={appState.content}

diff --git a/src/frontend/Error.tsx b/src/frontend/Error.tsx
@@ -6,22 +6,12 @@ interface ErrorProps {
 
 export default function Error({ appState }: ErrorProps) {
   return (
-    <div style={{ backgroundColor: 'white', padding: '1rem' }}>
-      <div
-        style={{
-          borderColor: 'red',
-          borderWidth: '5px',
-          borderRadius: '10px',
-          padding: '1rem',
-        }}
-      >
+    <div className="eaas:bg-white eaas:p-4">
+      <div className="eaas:rounded-lg eaas:border-4 eaas:border-red-500 eaas:p-4">
         {appState.message}
       </div>
       {appState.imageURL ? (
-        <img
-          style={{ marginTop: '2rem', maxWidth: '350px' }}
-          src={appState.imageURL}
-        />
+        <img className="eaas:mt-8 eaas:max-w-[350px]" src={appState.imageURL} />
       ) : null}
     </div>
   )

diff --git a/src/frontend/Header.tsx b/src/frontend/Header.tsx
@@ -4,26 +4,16 @@ export default function Header() {
   const title = urlParams.get('title') ?? 'Inhalt'
   const contextTitle = urlParams.get('contextTitle')
   return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'row',
-        paddingTop: '1rem',
-        alignItems: 'center',
-        gap: '1rem',
-      }}
-    >
+    <div className="eaas:flex eaas:items-center eaas:gap-4 eaas:pt-4">
       <img
-        style={{ width: '2.8rem', height: '2.8rem' }}
-        src="https://editor.serlo.dev/media/serlo-org/skkwa1vksa3v2yc7bj9z0bni/image.png"
+        className="eaas:h-[2.8rem] eaas:w-[2.8rem]"
+        src="/assets/serlo-editor-file-logo.png"
       />
-      <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <div>
         {contextTitle ? (
-          <div style={{ color: '#666666', fontSize: '0.9rem' }}>
-            {contextTitle}
-          </div>
+          <div className="eaas:text-sm eaas:text-gray-500">{contextTitle}</div>
         ) : null}
-        <h2 style={{ fontSize: '1.25rem' }}>{title}</h2>
+        <h2 className="eaas:!text-xl">{title}</h2>
       </div>
     </div>
   )

diff --git a/src/frontend/Layout.tsx b/src/frontend/Layout.tsx
@@ -4,42 +4,12 @@ import Header from './Header'
 export function Layout({ children }: { children: React.ReactNode }) {
   const showHeader = !inIframe()
 
-  const maxContentWidth = '60rem'
-  // Leave some space for editor UI that extends beyond (plugin toolbar, drag handle, ...)
-  const paddingAroundContent = '3rem'
   return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'row',
-        backgroundColor: 'white',
-        // Make horizontal scroll bar appear on small width. Plugin menu, plugin toolbar, ... need some space.
-        minWidth: '40rem',
-        overflowX: 'auto',
-      }}
-    >
-      <aside style={{ flexGrow: 1, flexShrink: 1, flexBasis: 0 }}></aside>
-      <main
-        style={{
-          flexGrow: 1,
-          flexShrink: 1,
-          flexBasis: maxContentWidth,
-          maxWidth: `min(100%, ${maxContentWidth})`,
-          paddingLeft: paddingAroundContent,
-          paddingRight: paddingAroundContent,
-        }}
-      >
+    <div className="eaas:flex eaas:min-w-[40rem] eaas:overflow-x-auto eaas:bg-white">
+      <main className="eaas:mx-auto eaas:w-full eaas:max-w-[60rem] eaas:pr-12 eaas:pl-12">
         {showHeader ? <Header /> : null}
-        <div
-          style={{
-            paddingTop: paddingAroundContent,
-            paddingBottom: paddingAroundContent,
-          }}
-        >
-          {children}
-        </div>
+        <div className="eaas:pt-12 eaas:pb-12">{children}</div>
       </main>
-      <aside style={{ flexGrow: 1, flexShrink: 1, flexBasis: 0 }}></aside>
     </div>
   )
 }

diff --git a/src/frontend/style.css b/src/frontend/style.css
@@ -0,0 +1 @@
+@import 'tailwindcss' prefix(eaas);
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,10 @@
+// only needed because tailwind 4 is not fully supported by the vscode plugin
+// can hopefully be removed soon
+// /** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/frontend/**/*.{html,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,10 +1,11 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
     outDir: './dist/frontend',
   },
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
 })