tailwind: v4

Author: echarles

packages/lexical/package.json

@@ -11,8 +11,6 @@
   ],
   "keywords": [
     "jupyter",
-    "jupyterlab",
-    "jupyterlab-extension",
     "react",
     "lexical"
   ],
@@ -79,9 +77,11 @@
     "@lexical/table": "^0.33.1",
     "@lexical/utils": "^0.33.1",
     "@lexical/yjs": "^0.33.1",
+    "autoprefixer": "^10.4.21",
     "katex": "^0.16.21",
     "lexical": "^0.33.1",
     "lodash-es": "^4.17.21",
+    "postcss": "^8.5.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-json-tree": "^0.19.0",
@@ -94,9 +94,6 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
-    "@jupyterlab/builder": "^4.0.0",
-    "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/typography": "^0.5.16",
     "@types/codemirror": "^5.60.4",
     "@types/katex": "^0.14.0",
     "@types/lodash-es": "^4.17.6",
@@ -111,7 +108,6 @@
     "@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",
@@ -128,8 +124,6 @@
     "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",
@@ -143,7 +137,7 @@
     "stylelint-config-standard": "^24.0.0",
     "stylelint-prettier": "^2.0.0",
     "svg-url-loader": "^7.1.1",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "typedoc": "^0.28.2",
     "typescript": "^5.8.3",
     "url-loader": "^3.0.0",

packages/lexical/postcss.config.js

@@ -1,6 +1,3 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+  plugins: [require('tailwindcss'), require('autoprefixer')],
+};

packages/lexical/style/index.css

@@ -4,62 +4,21 @@
  * MIT License
  */
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 /* Import base styles */
 @import url('base.css');
 
-/* Import all lexical component styles */
-@import url('lexical/Button.css');
-@import url('lexical/CodeActionMenuPlugin.css');
-@import url('lexical/CommentEditorTheme.css');
-@import url('lexical/CommentPlugin.css');
-@import url('lexical/ContentEditable.css');
-@import url('lexical/Dialog.css');
-@import url('lexical/DraggableBlockPlugin.css');
-@import url('lexical/Editor.css');
-@import url('lexical/EquationEditor.css');
-@import url('lexical/FloatingTextFormatToolbarPlugin.css');
-@import url('lexical/ImageNode.css');
-@import url('lexical/Input.css');
-@import url('lexical/Jupyter.css');
-@import url('lexical/JupyterPlugin.css');
-@import url('lexical/KatexEquationAlterer.css');
-@import url('lexical/Modal.css');
-@import url('lexical/Placeholder.css');
-@import url('lexical/PrettierButton.css');
-@import url('lexical/Rich.css');
-@import url('lexical/TableOfContentsPlugin.css');
-@import url('lexical/Theme.css');
-@import url('lexical/ToolbarPlugin.css');
+/* Tailwind v4 theme configuration - CSS variables for theming */
+:root {
+  --font-family-system: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
+  --color-gray-light: #eee;
+  --color-gray-medium: #ddd;
+  --color-gray-dark: #333;
+}
+
+/* Import tailwind.css which now contains all the Tailwind v4 compatible styles */
+@import url('tailwind.css');
 
 /* Custom base styles */
 [contenteditable] {
   outline: 0px solid transparent;
 }
-
-/* Custom component styles */
-@layer components {
-  /* Button styles */
-  .Button__root {
-    @apply py-2.5 px-4 border-0 bg-gray-200 rounded cursor-pointer text-sm;
-  }
-  
-  .Button__root:hover {
-    @apply bg-gray-300;
-  }
-  
-  .Button__small {
-    @apply py-1.5 px-2.5 text-xs;
-  }
-  
-  .Button__disabled {
-    @apply cursor-not-allowed;
-  }
-  
-  .Button__disabled:hover {
-    @apply bg-gray-200;
-  }
-}

packages/lexical/style/index.js

@@ -4,12 +4,6 @@
  * MIT License
  */
 
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
-
 .CommentPlugin {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
 }