tailwind: postcss

Author: echarles

packages/lexical/package.json

@@ -94,6 +94,7 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
+    "@tailwindcss/postcss": "^4.1.11",
     "@types/codemirror": "^5.60.4",
     "@types/katex": "^0.14.0",
     "@types/lodash-es": "^4.17.6",

packages/lexical/postcss.config.js

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

packages/lexical/src/examples/AppNbformat.tsx

@@ -126,6 +126,21 @@ export function AppNbformat() {
         </LexicalProvider>
       </Jupyter>
       <div className="other App">
+        {/* Tailwind v4 Button - Pure Utility Classes */}
+        <div className="flex flex-col items-center gap-4 my-8">
+          <button 
+            className="bg-blue-600 hover:bg-blue-800 text-white font-bold py-3 px-8 rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out"
+            onClick={() => alert('Tailwind CSS v4 is working correctly!')}
+          >
+            Tailwind v4 Button
+          </button>
+          {/* Custom class from tailwind.css */}
+          <div className="mt-4 text-center">
+            <span className="tailwind-demo-badge">
+              Tailwind v4 Custom Component
+            </span>
+          </div>
+        </div>
         <br/>
         <a href="https://datalayer.io" target="_blank">
           <ThreeBarsIcon/>

packages/lexical/style/tailwind.css

@@ -8,4 +8,28 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Custom variables for compatibility */
+:root {
+  --font-family-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --color-gray-dark: #374151;
+}
+
+/* Tailwind v4 custom component example */
+.tailwind-demo-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: white;
+  background-image: linear-gradient(to right, rgb(59 130 246), rgb(147 51 234));
+  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/webpack.config.js

@@ -99,7 +99,14 @@ module.exports = {
         test: /\.(jpe?g|png|gif|ico|eot|ttf|map|woff2?)(\?v=\d+\.\d+\.\d+)?$/i,
         type: 'asset/resource',
       },
-      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+      { 
+        test: /\.css$/, 
+        use: [
+          'style-loader', 
+          'css-loader',
+          'postcss-loader'
+        ] 
+      },
       { test: /\.md$/, use: 'raw-loader' },
       { test: /\.js.map$/, use: 'file-loader' },
       /*