Migrating tailwindcss to v4 (#3058)

Author: AndreasArvidsson

packages/cheatsheet-local/package.json

@@ -15,8 +15,7 @@
   },
   "postcss": {
     "plugins": {
-      "tailwindcss": {},
-      "autoprefixer": {}
+      "@tailwindcss/postcss": {}
     }
   },
   "scripts": {
@@ -35,21 +34,21 @@
   },
   "devDependencies": {
     "@effortlessmotion/html-webpack-inline-source-plugin": "^1.0.3",
+    "@tailwindcss/postcss": "^4.1.11",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^30.0.0",
     "@types/node": "^24.1.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@types/webpack": "^5.28.5",
-    "autoprefixer": "^10.4.21",
     "css-loader": "^7.1.2",
     "html-webpack-plugin": "^5.6.3",
     "jest": "^30.0.5",
     "postcss": "^8.5.6",
     "postcss-loader": "^8.1.1",
     "style-loader": "^4.0.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.11",
     "ts-loader": "^9.5.2",
     "ts-node": "^10.9.2",
     "typescript": "^5.8.3",

packages/cheatsheet-local/src/styles.css

@@ -1,4 +1,3 @@
-/* You can add global styles to this file, and also import other style files */
-@tailwind components;
-@tailwind base;
-@tailwind utilities;
+@import "tailwindcss";
+
+@config "../tailwind.config.js";

packages/cheatsheet-local/tailwind.config.js

@@ -1,13 +1,17 @@
-import { readFileSync } from "fs";
+import { readFileSync } from "node:fs";
 
 const references = JSON.parse(
   readFileSync("tsconfig.json", "utf-8"),
 ).references.map((ref) => ref.path);
 
-export const content = [".", ...references].map(
-  (dir) => `${dir}/src/**/*!(*.stories|*.spec).{ts,tsx,html}`,
-);
-export const theme = {
-  extend: {},
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [".", ...references].flatMap((pkg) => [
+    `${pkg}/src/**/*.{ts,tsx,html}`,
+    `!${pkg}/src/**/*.{stories,spec}.{ts,tsx,html}`,
+  ]),
+  theme: {
+    extend: {},
+  },
+  plugins: [],
 };
-export const plugins = [];

packages/cheatsheet/src/lib/components/CheatsheetLegendComponent.tsx

@@ -38,7 +38,7 @@ export default function CheatsheetLegendComponent({
           {data.map(({ term, definition, link, id }) => (
             <tr
               key={id}
-              className="odd:bg-violet-200 dark:bg-violet-800 odd:dark:bg-violet-600"
+              className="odd:bg-violet-200 dark:bg-violet-800 dark:odd:bg-violet-600"
             >
               <td className="px-1">{formatCaptures(`<${term}>`)}</td>
               <td className="border-l border-violet-400 px-1">

packages/cheatsheet/src/lib/components/SmartLink.tsx

@@ -22,7 +22,7 @@ const SmartLink: React.FC<SmartLinkProps> = ({
 }) => {
   const className = noFormatting
     ? ""
-    : "text-blue-500 hover:text-violet-700 dark:text-cyan-400 hover:dark:text-violet-200";
+    : "text-blue-500 hover:text-violet-700 dark:text-cyan-400 dark:hover:text-violet-200";
 
   return (
     <span className={className}>

packages/cursorless-org-docs/package.json

@@ -14,8 +14,7 @@
   },
   "postcss": {
     "plugins": {
-      "tailwindcss": {},
-      "autoprefixer": {}
+      "@tailwindcss/postcss": {}
     }
   },
   "browserslist": {
@@ -71,7 +70,7 @@
     "@types/mdast": "^4.0.4",
     "@types/react": "^19.1.8",
     "postcss": "^8.5.6",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.11",
     "typescript": "^5.8.3",
     "unified": "^11.0.5"
   }

packages/cursorless-org-docs/src/css/custom.css

@@ -1,6 +1,6 @@
-@tailwind components;
-@tailwind base;
-@tailwind utilities;
+@import "tailwindcss";
+
+@config "../../tailwind.config.js";
 
 /* From https://github.com/facebook/docusaurus/blob/cc0bceab9c1678303f6237f5526753edc1b12fc3/website/src/css/custom.css#L70-L86 */
 .header-github-link:hover {

packages/cursorless-org-docs/src/plugins/tailwind-plugin.ts

@@ -3,7 +3,7 @@ import type {
   PluginOptions,
   PostCssOptions,
 } from "@docusaurus/types";
-import tailwindcss from "tailwindcss";
+import tailwindcss from "@tailwindcss/postcss";
 
 export default function tailwindPlugin(
   _context: LoadContext,
@@ -12,7 +12,7 @@ export default function tailwindPlugin(
   return {
     name: "tailwind-plugin",
 
-    configurePos1tCss(postcssOptions: PostCssOptions): PostCssOptions {
+    configurePostCss(postcssOptions: PostCssOptions): PostCssOptions {
       postcssOptions.plugins.push(tailwindcss);
       return postcssOptions;
     },

packages/cursorless-org-docs/tailwind.config.js

@@ -1,9 +1,17 @@
-/** @type {import('tailwindcss').Config} */
+import { readFileSync } from "node:fs";
 
-export const content = ["./src/**/*.{js,ts,jsx,tsx}"];
+const references = JSON.parse(
+  readFileSync("tsconfig.json", "utf-8"),
+).references.map((ref) => ref.path);
 
-export const corePlugins = {
-  preflight: false,
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [".", ...references].map((pkg) => `${pkg}/src/**/*.{js,ts,jsx,tsx}`),
+  theme: {
+    extend: {},
+  },
+  corePlugins: {
+    preflight: false,
+  },
+  plugins: [],
 };
-
-export const plugins = [];

packages/cursorless-org-docs/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "es2022"],
-    "moduleResolution": "node",
+    "moduleResolution": "nodenext",
+    "module": "nodenext",
     "esModuleInterop": true,
     "emitDeclarationOnly": false,
     "jsx": "react"