lexical: use tailwind

echarles · echarles · commit d2e851552213 · 2025-08-12T15:55:11.000+02:00
diff --git a/packages/lexical/TAILWIND_INTEGRATION.md b/packages/lexical/TAILWIND_INTEGRATION.md
@@ -0,0 +1,86 @@
+# Tailwind CSS Integration
+
+This document outlines the Tailwind CSS integration in the Jupyter Lexical package.
+
+## What Was Done
+
+1. **Dependencies Added:**
+   - `tailwindcss` - Core Tailwind CSS framework
+   - `postcss` - CSS post-processor
+   - `autoprefixer` - CSS vendor prefixing
+   - `@tailwindcss/forms` - Better form styling
+   - `@tailwindcss/typography` - Typography utilities
+   - `@tailwindcss/postcss` - PostCSS plugin for Tailwind
+   - `postcss-loader` - Webpack loader for PostCSS
+
+2. **Configuration Files:**
+   - `tailwind.config.js` - Tailwind configuration with content paths and custom colors
+   - `postcss.config.js` - PostCSS configuration for webpack processing
+   - Updated `webpack.config.js` to include postcss-loader
+
+3. **CSS Migration:**
+   - Created `style/tailwind.css` with all existing styles converted to Tailwind classes
+   - Removed individual CSS imports from TypeScript components
+   - Maintained exact visual appearance using Tailwind utilities
+
+## Files Changed
+
+### Configuration
+- `package.json` - Added Tailwind dependencies
+- `webpack.config.js` - Added postcss-loader
+- `tailwind.config.js` - New Tailwind configuration
+- `postcss.config.js` - New PostCSS configuration
+
+### CSS
+- `style/tailwind.css` - New consolidated CSS file with Tailwind
+- `style/index.css` - Updated to import tailwind.css
+
+### TypeScript Components
+Removed CSS imports from all component files:
+- `src/components/*.tsx`
+- `src/plugins/*.tsx` 
+- `src/nodes/*.tsx`
+- `src/themes/*.ts`
+
+## Converted Styles
+
+All existing styles have been converted to Tailwind classes while maintaining the same visual appearance:
+
+- **Button styles** - Hover states, disabled states, sizing variants
+- **Modal components** - Overlay, modal box, close button
+- **Input components** - Wrapper, label, input field styling
+- **Editor components** - Content editable areas, placeholders
+- **Plugin components** - Toolbar, floating menus, draggable blocks
+- **Specialized components** - Equation editor, image nodes, comments
+
+## Benefits
+
+1. **Consistency** - All styling now uses a unified design system
+2. **Maintainability** - Easier to update and maintain styles
+3. **Performance** - Tailwind purges unused CSS for smaller bundles
+4. **Developer Experience** - Intellisense and utility-first approach
+5. **Responsive Design** - Built-in responsive utilities available
+
+## Usage
+
+The styles are automatically included when you import the main CSS:
+
+```typescript
+import '@datalayer/jupyter-lexical/style/index.css';
+```
+
+All existing class names continue to work, but now they're powered by Tailwind CSS under the hood.
+
+## Development
+
+Run the development server as usual:
+```bash
+npm start
+```
+
+Build for production:
+```bash
+npm run build
+```
+
+The Tailwind CSS will be processed automatically through the webpack pipeline with PostCSS.
diff --git a/packages/lexical/package.json b/packages/lexical/package.json
@@ -42,6 +42,7 @@
     "clean:labextension": "rimraf datalayer/labextension",
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "clean:lintcache": "rimraf .eslintcache .stylelintcache",
+    "dev": "run-p -c 'start:*'",
     "eslint": "jlpm eslint:check --fix",
     "eslint:check": "eslint . --cache --ext .ts,.tsx",
     "install:extension": "jlpm build",
@@ -94,6 +95,9 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
     "@jupyterlab/builder": "^4.0.0",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/codemirror": "^5.60.4",
     "@types/katex": "^0.14.0",
     "@types/lodash-es": "^4.17.6",
@@ -108,6 +112,7 @@
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^8.29.1",
     "@typescript-eslint/parser": "^8.29.1",
+    "autoprefixer": "^10.4.21",
     "babel-loader": "^9.1.2",
     "bundle-loader": "^0.5.6",
     "css-loader": "^7.1.2",
@@ -124,6 +129,8 @@
     "jest": "^29.4.3",
     "mkdirp": "^1.0.3",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.5.6",
+    "postcss-loader": "^8.1.1",
     "prettier": "^3.5.3",
     "process": "^0.11.10",
     "raw-loader": "^4.0.2",
@@ -137,6 +144,7 @@
     "stylelint-config-standard": "^24.0.0",
     "stylelint-prettier": "^2.0.0",
     "svg-url-loader": "^7.1.1",
+    "tailwindcss": "^4.1.11",
     "typedoc": "^0.28.2",
     "typescript": "^5.8.3",
     "url-loader": "^3.0.0",
diff --git a/packages/lexical/postcss.config.js b/packages/lexical/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+}
diff --git a/packages/lexical/src/components/Button.tsx b/packages/lexical/src/components/Button.tsx
@@ -7,8 +7,6 @@
 import {ReactNode} from 'react';
 import joinClasses from '../utils/join';
 
-import './../../style/lexical/Button.css';
-
 export const Button = ({
   'data-test-id': dataTestId,
   children,
diff --git a/packages/lexical/src/components/ContentEditable.tsx b/packages/lexical/src/components/ContentEditable.tsx
@@ -6,8 +6,6 @@
 
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
 
-import './../../style/lexical/ContentEditable.css';
-
 export const LexicalContentEditable = ({
   className,
 }: {
diff --git a/packages/lexical/src/components/Dialog.tsx b/packages/lexical/src/components/Dialog.tsx
@@ -4,8 +4,6 @@
  * MIT License
  */
 
-import './../../style/lexical/Dialog.css';
-
 import {ReactNode} from 'react';
 
 type Props = Readonly<{
diff --git a/packages/lexical/src/components/EquationEditor.tsx b/packages/lexical/src/components/EquationEditor.tsx
@@ -4,7 +4,6 @@
  * MIT License
  */
 
-import './../../style/lexical/EquationEditor.css';
 
 import {ChangeEvent, RefObject} from 'react';
 
diff --git a/packages/lexical/src/components/FileInput.tsx b/packages/lexical/src/components/FileInput.tsx
@@ -4,7 +4,6 @@
  * MIT License
  */
 
-import './../../style/lexical/Input.css';
 
 type Props = Readonly<{
   'data-test-id'?: string;
diff --git a/packages/lexical/src/components/KatexEquationAlterer.tsx b/packages/lexical/src/components/KatexEquationAlterer.tsx
@@ -8,7 +8,6 @@ import {useCallback, useState} from 'react';
 import Button from '../components/Button';
 import KatexRenderer from './KatexRenderer';
 
-import './../../style/lexical/KatexEquationAlterer.css';
 
 type Props = {
   initialEquation?: string;
diff --git a/packages/lexical/src/components/Modal.tsx b/packages/lexical/src/components/Modal.tsx
@@ -7,8 +7,6 @@
 import {ReactNode, useEffect, useRef} from 'react';
 import {createPortal} from 'react-dom';
 
-import './../../style/lexical/Modal.css';
-
 function PortalImpl({
   onClose,
   children,
diff --git a/packages/lexical/src/components/Placeholder.tsx b/packages/lexical/src/components/Placeholder.tsx
@@ -6,7 +6,6 @@
 
 import {ReactNode} from 'react';
 
-import './../../style/lexical/Placeholder.css';
 
 export const Placeholder = ({
   children,
diff --git a/packages/lexical/src/components/PrettierButton.tsx b/packages/lexical/src/components/PrettierButton.tsx
@@ -9,7 +9,6 @@ import {$getNearestNodeFromDOMNode, LexicalEditor} from 'lexical';
 import {Options} from 'prettier';
 import {useState} from 'react';
 
-import './../../style/lexical/PrettierButton.css';
 
 interface Props {
   lang: string;
diff --git a/packages/lexical/src/components/TextInput.tsx b/packages/lexical/src/components/TextInput.tsx
@@ -4,7 +4,6 @@
  * MIT License
  */
 
-import './../../style/lexical/Input.css';
 
 type Props = Readonly<{
   'data-test-id'?: string;
diff --git a/packages/lexical/src/nodes/ImageNode.tsx b/packages/lexical/src/nodes/ImageNode.tsx
@@ -52,7 +52,6 @@ import ContentEditable from '../components/ContentEditable';
 import ImageResizer from '../components/ImageResizer';
 import Placeholder from '../components/Placeholder';
 
-import './../../style/lexical/ImageNode.css';
 
 export interface ImagePayload {
   altText: string;
diff --git a/packages/lexical/src/plugins/CodeActionMenuPlugin.tsx b/packages/lexical/src/plugins/CodeActionMenuPlugin.tsx
@@ -14,7 +14,6 @@ import { CopyButton } from '../components/CopyButton';
 import { canBePrettier, PrettierButton } from '../components/PrettierButton';
 import { useDebounce } from './../hooks';
 
-import './../../style/lexical/CodeActionMenuPlugin.css';
 
 const CODE_PADDING = 8;
 
diff --git a/packages/lexical/src/plugins/CommentPlugin.tsx b/packages/lexical/src/plugins/CommentPlugin.tsx
@@ -63,7 +63,6 @@ import CommentEditorTheme from '../themes/CommentEditorTheme';
 import { useModal, Button, LexicalContentEditable as ContentEditable, Placeholder } from '..';
 import {useLayoutEffectImpl as useLayoutEffect} from '..';
 
-import './../../style/lexical/CommentPlugin.css';
 
 export const INSERT_INLINE_COMMAND: LexicalCommand<void> = createCommand();
 
diff --git a/packages/lexical/src/plugins/DraggableBlockPlugin.tsx b/packages/lexical/src/plugins/DraggableBlockPlugin.tsx
@@ -16,7 +16,6 @@ import {calculateZoomLevel, mergeRegister} from '@lexical/utils';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import { isHTMLElement, Point, Rect } from '../utils';
 
-import './../../style/lexical/DraggableBlockPlugin.css';
 
 const SPACE = 4;
 const TARGET_LINE_HALF_HEIGHT = 2;
diff --git a/packages/lexical/src/plugins/FloatingTextFormatToolbarPlugin.tsx b/packages/lexical/src/plugins/FloatingTextFormatToolbarPlugin.tsx
@@ -31,7 +31,6 @@ import {getSelectedNode} from '../utils';
 import {setFloatingElemPosition} from '../utils';
 import {INSERT_INLINE_COMMAND} from './CommentPlugin';
 
-import '././../../style/lexical/FloatingTextFormatToolbarPlugin.css';
 
 function TextFormatFloatingToolbar({
   editor,
diff --git a/packages/lexical/src/plugins/JupyterCellOutputPlugin.tsx b/packages/lexical/src/plugins/JupyterCellOutputPlugin.tsx
@@ -17,7 +17,6 @@ import { $createJupyterCodeNode, JupyterCodeNode, $isJupyterCodeNode } from "../
 import { registerCodeHighlighting } from "../nodes/JupyterCodeHighlighter";
 import { JupyterOutputNode, $createJupyterOutputNode } from "../nodes/JupyterOutputNode";
 
-import "./../../style/lexical/JupyterPlugin.css";
 
 export const CODE_UUID_TO_OUTPUT_KEY = new Map<string, NodeKey | undefined>();
 export const CODE_UUID_TO_CODE_KEY = new Map<string, NodeKey | undefined>();
diff --git a/packages/lexical/src/plugins/TableOfContentsPlugin.tsx b/packages/lexical/src/plugins/TableOfContentsPlugin.tsx
@@ -10,7 +10,6 @@ import type {NodeKey} from 'lexical';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {TableOfContentsPlugin as LexicalTableOfContentsPlugin} from '@lexical/react/LexicalTableOfContentsPlugin';
 
-import './../../style/lexical/TableOfContentsPlugin.css';
 
 function indent(tagName: HeadingTagType) {
   if (tagName === 'h2') {
diff --git a/packages/lexical/src/plugins/ToolbarPlugin.tsx b/packages/lexical/src/plugins/ToolbarPlugin.tsx
@@ -33,7 +33,6 @@ import {
   $createYouTubeNode, INSERT_EQUATION_COMMAND, INSERT_JUPYTER_CELL_COMMAND, DEFAULT_INITIAL_OUTPUTS
 } from "../";
 
-import './../../style/lexical/ToolbarPlugin.css';
 import { JupyterCodeNode } from "../nodes";
 
 const LowPriority = 1;
diff --git a/packages/lexical/src/themes/CommentEditorTheme.ts b/packages/lexical/src/themes/CommentEditorTheme.ts
@@ -12,7 +12,6 @@
 
 import type {EditorThemeClasses} from 'lexical';
 
-import './../../style/lexical/CommentEditorTheme.css';
 
 import baseTheme from './Theme';
 
diff --git a/packages/lexical/src/themes/Theme.ts b/packages/lexical/src/themes/Theme.ts
@@ -6,7 +6,6 @@
 
 import type {EditorThemeClasses} from 'lexical';
 
-import './../../style/lexical/Theme.css';
  
 const theme: EditorThemeClasses = {
   characterLimit: 'PlaygroundEditorTheme__characterLimit',
diff --git a/packages/lexical/style/index.css b/packages/lexical/style/index.css
@@ -4,4 +4,5 @@
  * MIT License
  */
 
+@import url('tailwind.css');
 @import url('base.css');
diff --git a/packages/lexical/style/tailwind.css b/packages/lexical/style/tailwind.css
diff --git a/packages/lexical/tailwind.config.js b/packages/lexical/tailwind.config.js
diff --git a/packages/lexical/webpack.config.js b/packages/lexical/webpack.config.js
