tailwind: v4

Author: echarles

packages/lexical/TAILWIND_INTEGRATION.md

@@ -138,7 +138,7 @@
     "stylelint-config-standard": "^24.0.0",
     "stylelint-prettier": "^2.0.0",
     "svg-url-loader": "^7.1.1",
-    "tailwindcss": "^4.0.0",
+    "tailwindcss": "^4.1.11",
     "typedoc": "^0.28.2",
     "typescript": "^5.8.3",
     "url-loader": "^3.0.0",

packages/lexical/package.json

@@ -2,5 +2,5 @@ module.exports = {
   plugins: {
     '@tailwindcss/postcss': {},
     autoprefixer: {},
-  }
+  },
 };

packages/lexical/postcss.config.js

@@ -126,6 +126,19 @@ export function AppNbformat() {
         </LexicalProvider>
       </Jupyter>
       <div className="other App">
+        <br/>
+        <a href="https://datalayer.io" target="_blank">
+          <ThreeBarsIcon/>
+        </a>
+        <h2>
+          copyright © <a href="https://datalayer.io" target="_blank">2022-2024 Datalayer, Inc.</a>
+        </h2>
+        <ul>
+          <li>
+            <a href="https://github.com/datalayer/jupyter-ui" target="_blank">Jupyter UI open-source repository</a>
+          </li>
+        </ul>
+      </div>
         {/* Tailwind v4 Button - Pure Utility Classes */}
         <div className="flex flex-col items-center gap-4 my-8">
           <button 
@@ -141,19 +154,6 @@ export function AppNbformat() {
             </span>
           </div>
         </div>
-        <br/>
-        <a href="https://datalayer.io" target="_blank">
-          <ThreeBarsIcon/>
-        </a>
-        <h2>
-          copyright © <a href="https://datalayer.io" target="_blank">2022-2024 Datalayer, Inc.</a>
-        </h2>
-        <ul>
-          <li>
-            <a href="https://github.com/datalayer/jupyter-ui" target="_blank">Jupyter UI open-source repository</a>
-          </li>
-        </ul>
-      </div>
     </>
   )
 }

packages/lexical/src/examples/AppNbformat.tsx

@@ -4,14 +4,11 @@
  * MIT License
  */
 
+@import "tailwindcss";
+
 /* Import base styles */
 @import url("base.css");
 
-/* Custom base styles */
-[contenteditable] {
-  outline: 0px solid transparent;
-}
-
 /* Import tailwind.css which now contains all the Tailwind v4 compatible styles */
 @import url('tailwind.css');
 

packages/lexical/style/index.css

@@ -4,9 +4,8 @@
  * MIT License
  */
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+
+@import url('./lexical/index.css');
 
 /* Custom variables for compatibility */
 :root {
@@ -31,5 +30,3 @@
   border-radius: 9999px;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
-
-@import url('./lexical/index.css');

packages/lexical/style/tailwind.css

@@ -7,7 +7,43 @@ module.exports = {
     './style/**/*.{css}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+    },
   },
   plugins: [],
 };