Migrating tailwindcss to v4

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"

packages/cursorless-org/package.json

@@ -15,8 +15,7 @@
   },
   "postcss": {
     "plugins": {
-      "tailwindcss": {},
-      "autoprefixer": {}
+      "@tailwindcss/postcss": {}
     }
   },
   "scripts": {
@@ -41,16 +40,16 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
+    "@tailwindcss/postcss": "^4.1.11",
     "@types/mdx": "^2.0.13",
     "@types/node": "^24.1.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "autoprefixer": "^10.4.21",
     "eslint": "^9.31.0",
     "eslint-config-next": "^15.4.4",
     "http-server": "^14.1.1",
     "postcss": "^8.5.6",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.11",
     "typescript": "^5.8.3"
   }
 }

packages/cursorless-org/src/components/Layout.tsx

@@ -45,22 +45,22 @@ const components: MDXComponents = {
     // FIXME: Figure out how to use next/image with MDX
     // eslint-disable-next-line @next/next/no-img-element
     <img
-      className="mx-auto my-12 rounded-sm border border-teal-400 p-3 sm:p-6"
+      className="rounded-xs mx-auto my-12 border border-teal-400 p-3 sm:p-6"
       src={src}
       alt={alt}
       style={{ maxWidth: "100%" }}
     />
   ),
   CalloutBox: ({ children }) => (
-    <div className="my-12 rounded-sm border border-teal-400 px-7 pb-6">
+    <div className="rounded-xs my-12 border border-teal-400 px-7 pb-6">
       {children}
     </div>
   ),
   Testimonials: ({ children }) => (
     <div className="mt-8 flex flex-col gap-5">{children}</div>
   ),
   Testimonial: ({ children, src, name, title, company }) => (
-    <div className="flex flex-col items-center rounded-sm border border-teal-400 bg-teal-100 p-3 text-teal-700 sm:p-6 dark:bg-teal-900 dark:text-teal-300">
+    <div className="rounded-xs flex flex-col items-center border border-teal-400 bg-teal-100 p-3 text-teal-700 sm:p-6 dark:bg-teal-900 dark:text-teal-300">
       <blockquote className="mb-5 flex flex-col gap-4 sm:mb-6">
         {children}
       </blockquote>
@@ -71,7 +71,7 @@ const components: MDXComponents = {
           src={src}
           alt={name}
         />
-        <div className="flex flex-col gap-[0.375rem]">
+        <div className="flex flex-col gap-1.5">
           <div className="text-[1.2em] font-semibold leading-none text-teal-800 dark:text-teal-200">
             {name}
           </div>
@@ -82,7 +82,7 @@ const components: MDXComponents = {
     </div>
   ),
   Tiers: ({ children }) => (
-    <div className="my-8 text-[1.2em] font-medium tracking-[0.1em]">
+    <div className="my-8 text-[1.2em] font-medium tracking-widest">
       {children}
     </div>
   ),

packages/cursorless-org/src/components/SpamProofEmailLink.tsx

@@ -58,7 +58,7 @@ export function SpamProofEmailLink({
   return (
     <a
       href={href}
-      className="text-teal-600 underline underline-offset-4 hover:text-teal-500 dark:text-teal-500 hover:dark:text-teal-300"
+      className="text-teal-600 underline underline-offset-4 hover:text-teal-500 dark:text-teal-500 dark:hover:text-teal-300"
     >
       {children ?? (
         <span className="text-[18px]">

packages/cursorless-org/src/pages/index.tsx

@@ -11,17 +11,17 @@ export async function getStaticProps() {
 }
 
 export default function LandingPage() {
-  const smallScaling = "sm:w-smBase sm:h-smBase sm:text-smBase";
+  const smallScaling = "sm:w-sm-base sm:h-sm-base sm:text-sm-base";
   const stretchedScaling =
-    "sm:stretched:w-stretchedBase sm:stretched:h-stretchedBase sm:stretched:text-stretchedBase";
+    "sm:stretched:w-stretched-base sm:stretched:h-stretched-base sm:stretched:text-stretched-base";
 
   return (
     <>
       <Head>
         <title>{TITLE}</title>
         <IndexSocial />
       </Head>
-      <main className="text-salmon-900 dark:text-salmon-100 font-monoWide fixed bottom-0 left-0 right-0 top-0 items-center justify-center overflow-auto p-2 font-bold tracking-[0.18em] sm:flex sm:p-0">
+      <main className="text-salmon-900 dark:text-salmon-100 font-mono-wide fixed bottom-0 left-0 right-0 top-0 items-center justify-center overflow-auto p-2 font-bold tracking-[0.18em] sm:flex sm:p-0">
         {/*
         Note that the font scale gets applied to this element so that all nested elements can use
         `em` units and will automatically be scaled.
@@ -43,7 +43,7 @@ export default function LandingPage() {
             </header>
             <Slogan />
           </div>
-          <div className="border-salmon-100 border-[0.5px] p-[1px]">
+          <div className="border-salmon-100 border-[0.5px] p-px">
             <EmbeddedVideo youtubeSlug={YOUTUBE_SLUG} />
           </div>
           <div className="flex flex-1 flex-col">

packages/cursorless-org/src/styles/globals.css

@@ -1,6 +1,6 @@
-@tailwind components;
-@tailwind base;
-@tailwind utilities;
+@import "tailwindcss";
+
+@config "../../tailwind.config.js";
 
 :root {
   --safe-area-inset-top: env(safe-area-inset-top);