Replaced Tailwind with Bootstrap

.vscode/tasks.json

@@ -134,7 +134,7 @@
     {
       "label": "VSCode: Watch tutorial",
       "type": "npm",
-      "script": "watch:tailwind",
+      "script": "watch",
       "isBackground": true,
       "presentation": {
         "reveal": "never"

package.json

@@ -51,7 +51,6 @@
     "eslint-plugin-unicorn": "^63.0.0",
     "eslint-plugin-unused-imports": "^4.4.1",
     "prettier": "^3.8.1",
-    "prettier-plugin-tailwindcss": "^0.7.2",
     "syncpack": "^14.2.0",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",

packages/cheatsheet-local/package.json

@@ -13,18 +13,13 @@
       "default": "./out/index.js"
     }
   },
-  "postcss": {
-    "plugins": {
-      "@tailwindcss/postcss": {}
-    }
-  },
   "scripts": {
     "test": "jest",
     "compile": "tsc --build",
     "watch": "tsc --build --watch",
     "build": "pnpm build:prod",
     "build:dev": "vite build --mode development",
-    "build:prod": "vite build --mode production",
+    "build:prod": "vite build",
     "clean": "rm -rf ./out tsconfig.tsbuildinfo ./dist ./build"
   },
   "dependencies": {
@@ -35,12 +30,9 @@
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.3",
-    "@tailwindcss/postcss": "^4.2.1",
     "@types/jest": "^30.0.0",
     "@types/node": "^24.12.0",
     "jest": "^30.3.0",
-    "postcss": "^8.5.8",
-    "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3",
     "vite": "^8.0.0",
     "vite-plugin-singlefile": "^2.3.0"

packages/cheatsheet-local/src/app/app.tsx

@@ -1,6 +1,5 @@
 import type { CheatsheetInfo } from "@cursorless/cheatsheet";
 import { CheatsheetPage } from "@cursorless/cheatsheet";
-import "./styles.css";
 
 declare global {
   interface Document {

packages/cheatsheet-local/vite.config.ts

@@ -1,15 +1,19 @@
 import { fakeCheatsheetInfo } from "@cursorless/cheatsheet";
 import { viteHtmlParams } from "@cursorless/common";
 import preact from "@preact/preset-vite";
-import { defineConfig } from "vite";
+import { defineConfig, type UserConfig } from "vite";
 import { viteSingleFile } from "vite-plugin-singlefile";
 
-export default defineConfig(() => {
+export default defineConfig((): UserConfig => {
   return {
     build: {
       outDir: "dist",
     },
 
+    resolve: {
+      conditions: ["cursorless:bundler"],
+    },
+
     plugins: [
       preact(),
       viteSingleFile(),

packages/cursorless-org-docs/docusaurus.config.mts

@@ -160,10 +160,7 @@ const config: Config = {
     ],
   ],
 
-  plugins: [
-    "./src/plugins/tailwind-plugin.ts",
-    "./src/plugins/scope-tests-plugin.ts",
-  ],
+  plugins: ["./src/plugins/scope-tests-plugin.ts"],
 
   themeConfig: {
     navbar: {

packages/cursorless-org-docs/package.json

@@ -12,11 +12,6 @@
       "default": "./out/index.js"
     }
   },
-  "postcss": {
-    "plugins": {
-      "@tailwindcss/postcss": {}
-    }
-  },
   "browserslist": {
     "production": [
       ">0.5%",
@@ -54,6 +49,7 @@
     "@docusaurus/theme-common": "^3.9.2",
     "@docusaurus/theme-search-algolia": "^3.9.2",
     "@mdx-js/react": "^3.1.1",
+    "bootstrap": "^5.3.8",
     "clsx": "^2.1.1",
     "mdast-util-find-and-replace": "^3.0.2",
     "prism-react-renderer": "^2.4.1",
@@ -66,12 +62,9 @@
     "@cursorless/node-common": "workspace:*",
     "@docusaurus/module-type-aliases": "^3.9.2",
     "@docusaurus/types": "^3.9.2",
-    "@tailwindcss/postcss": "^4.2.1",
     "@tsconfig/docusaurus": "^2.0.9",
     "@types/mdast": "^4.0.4",
     "@types/react": "^19.2.14",
-    "postcss": "^8.5.8",
-    "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3",
     "unified": "^11.0.5"
   }

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

@@ -1,6 +1,34 @@
-@import "tailwindcss";
+@import "bootstrap/dist/css/bootstrap.min.css";
 
-@config "../../tailwind.config.mjs";
+/* Undo some of the global bootstrap styles */
+
+:root {
+  --bs-body-color: var(--ifm-text-color);
+  --bs-body-bg: var(--ifm-background-color);
+  --bs-body-line-height: var(--ifm-line-height-base);
+}
+
+.navbar {
+  --bs-navbar-padding-x: var(--ifm-navbar-padding-horizontal);
+  --bs-navbar-padding-y: var(--ifm-navbar-padding-vertical);
+}
+
+a {
+  text-decoration: var(--ifm-link-decoration);
+}
+
+code {
+  color: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: var(--ifm-heading-font-weight);
+}
 
 /* From https://github.com/facebook/docusaurus/blob/cc0bceab9c1678303f6237f5526753edc1b12fc3/website/src/css/custom.css#L70-L86 */
 .header-github-link:hover {
@@ -29,11 +57,6 @@
   filter: invert(90%) hue-rotate(180deg);
 }
 
-/* Necessary to make dropdown options work in dark mode */
-select {
-  background-color: var(--ifm-background-color);
-}
-
 .hidden {
   display: none;
 }

packages/cursorless-org-docs/src/docs/components/ScopeVisualizer.tsx

@@ -75,6 +75,7 @@ export function ScopeVisualizer({ languageId, scopeTypeType }: Props) {
     return (
       <div className="mb-4">
         <select
+          className="form-select form-select-sm d-inline-block w-auto"
           value={rangeType}
           onChange={(e) => setRangeType(e.currentTarget.value as RangeType)}
         >
@@ -83,10 +84,10 @@ export function ScopeVisualizer({ languageId, scopeTypeType }: Props) {
           <option value="blend">Blended ranges</option>
         </select>
 
-        <label className="ml-2">
+        <label className="ms-2">
           <input
             type="checkbox"
-            className="mr-1"
+            className="me-1"
             checked={renderWhitespace}
             onChange={(e) => setRenderWhitespace(e.currentTarget.checked)}
           />

packages/cursorless-org-docs/src/docs/contributing/MissingLanguageScopes.tsx

@@ -14,10 +14,10 @@ export function MissingLanguageScopes(): React.JSX.Element {
 
   return (
     <>
-      <label className="ml-1">
+      <label className="ms-1">
         <input
           type="checkbox"
-          className="mr-1"
+          className="me-1"
           checked={showPrivate}
           onChange={(e) => setShowPrivate(e.currentTarget.checked)}
         />
@@ -67,7 +67,7 @@ function Language({
       <h3>
         {languageId}
 
-        <small className="ml-2 text-sm">
+        <small className="ms-2">
           <a href={`../../user/languages/${languageId}`}>link</a>
         </small>
       </h3>

packages/cursorless-org-docs/src/theme/Root.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from "react";
+import type { Props } from "@theme/Root";
+
+function syncBootstrapTheme() {
+  const root = document.documentElement;
+  const theme = root.getAttribute("data-theme");
+
+  if (theme == null) {
+    root.removeAttribute("data-bs-theme");
+    return;
+  }
+
+  root.setAttribute("data-bs-theme", theme);
+}
+
+export default function Root({ children }: Props): React.JSX.Element {
+  useEffect(() => {
+    syncBootstrapTheme();
+
+    const observer = new MutationObserver(syncBootstrapTheme);
+    observer.observe(document.documentElement, {
+      attributeFilter: ["data-theme"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  return <>{children}</>;
+}

packages/cursorless-org/package.json

@@ -13,11 +13,6 @@
       "default": "./out/index.js"
     }
   },
-  "postcss": {
-    "plugins": {
-      "@tailwindcss/postcss": {}
-    }
-  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -30,18 +25,16 @@
   "dependencies": {
     "@cursorless/cheatsheet": "workspace:*",
     "@cursorless/common": "workspace:*",
+    "bootstrap": "^5.3.8",
     "preact": "^10.29.0",
     "react-player": "^3.4.0",
     "wouter-preact": "^3.9.0"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.3",
-    "@tailwindcss/postcss": "^4.2.1",
     "@types/node": "^24.12.0",
     "eslint": "^10.0.3",
     "http-server": "^14.1.1",
-    "postcss": "^8.5.8",
-    "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3",
     "vite": "^8.0.0",
     "vite-plugin-svgr": "^4.5.0"

packages/cursorless-org/src/Button.tsx

@@ -15,7 +15,7 @@ export function Button({ text, href, isExternal }: Props) {
   return (
     <a
       href={href}
-      className="hover:text-salmon-400 text-center text-2xl tracking-[0.18em] uppercase sm:text-[2.4em]"
+      className="landing-page-btn text-center text-uppercase"
       {...extraProps}
     >
       {text}

packages/cursorless-org/src/embedded-video.tsx → packages/cursorless-org/src/EmbeddedVideo.tsx

@@ -14,7 +14,7 @@ export function EmbeddedVideo({ youtubeSlug }: Props) {
     <div style={{ position: "relative", paddingTop: "56.25%" }}>
       {isError ? (
         <div
-          className={`flex h-full w-full border border-black text-center text-red-600`}
+          className="d-flex h-100 w-100 border border-dark text-center text-danger"
           style={{ position: "absolute", top: 0, left: 0 }}
         >
           <div className="m-auto">Error loading YouTube video</div>