tailwindcss 4

Author: skshetry

.github/dependabot.yml

@@ -0,0 +1,13 @@
+version: 2
+
+updates:
+  - directory: '/'
+    package-ecosystem: 'github-actions'
+    schedule:
+      interval: 'weekly'
+    groups:
+      dependencies:
+        patterns:
+          - '*'
+    cooldown:
+      default-days: 14

.stylelintrc

@@ -18,7 +18,7 @@
     "at-rule-no-unknown": [
       true,
       {
-        "ignoreAtRules": ["mixin", "tailwind", "screen"]
+        "ignoreAtRules": ["mixin", "tailwind", "screen", "config", "reference"]
       }
     ],
     "at-rule-no-deprecated": [
@@ -27,6 +27,8 @@
         "ignoreAtRules": ["apply"]
       }
     ],
+    "import-notation": null,
+    "no-invalid-position-at-import-rule": null,
     "custom-property-pattern": null,
     "selector-id-pattern": null,
     "selector-class-pattern": null,

AGENTS.md

@@ -0,0 +1 @@
+CLAUDE.md

CLAUDE.md

@@ -0,0 +1,131 @@
+# DVC.org
+
+Documentation site for DVC (Data Version Control), built with Gatsby.
+
+## Stack
+
+React 19, Gatsby, CSS Modules, Tailwind, Webpack. Theme in
+`packages/gatsby-theme/`, docs content in `content/docs/`, components and
+plugins in `src/` and `plugins/`. `server/` is an Express production server that
+adds redirects, Plausible analytics proxy, Helmet security headers, and
+cache-control rules on top of the Gatsby static build.
+
+Docs served at https://dvc.org/doc (Heroku + CloudFront CDN).
+
+- `packages/gatsby-theme/src/components/Link/index.tsx` has a static DVC
+  `VERSION` that needs periodic updates.
+- `redirects-list.json` — URL redirect rules, used by the Express server.
+- `content/docs/sidebar.json` — left sidebar navigation structure.
+- `content/linked-terms.js` — defines which backtick terms auto-link (e.g.
+  `dvc.yaml` → project structure page, `dvc push` → command reference).
+- `content/docs/user-guide/basic-concepts/` — glossary source files for `<abbr>`
+  tooltip content (DVC project, workspace, etc.).
+
+## Commands
+
+**!!Important: Use `yarn` not `npm`**.
+
+- `yarn` — install dependencies
+- `yarn develop` — dev server with hot reload (localhost:8000)
+- `yarn clean` — clean Gatsby cache and build artifacts (used before starting
+  server if Gatsby plugins were updated before using `yarn develop`)
+- `yarn build` — production build to `public/`
+- `yarn start` — production server over `public/`
+- `yarn test` — run tests using vitest
+- `yarn format <FILE>` — format with Prettier
+- `yarn format-all` / `yarn format-staged` / `yarn format-check-all`
+- `yarn lint` / `yarn lint-fix` / `yarn lint-ts` / `yarn lint-css`
+- `yarn fix-all` — run all fixers at once
+
+## Writing docs
+
+See `content/docs/contributing/docs.md` for the full style guide.
+
+### Voice and tone
+
+- Clear, human, approachable — not authoritative or overly formal.
+- Familiar language over jargon ("commit" not "revision", "version" not
+  "reference") when accurate enough.
+- Tutorials/getting-started: direct address, contractions, light encouragement.
+- Command/API reference: systematic, scan-oriented, but still explanatory when
+  examples need it.
+- Lead with the essence, then layer in clarifications and edge cases.
+- Details/admonitions are a standard editorial pattern, not an exceptional
+  device.
+- Bullet lists max 5-7 items. Bullet text max ~3 sentences. Full-sentence
+  bullets start capitalized and end with a period; fragments can be lowercase
+  with no ending punctuation.
+- Emojis sparse and purposeful.
+
+### Markup conventions
+
+- One `.md` file per page in `content/docs/`.
+- Images in `static/img/`. Navigation in `content/docs/sidebar.json`.
+- `dvc <command>` and `dvc.api.<method>()` in backticks auto-link.
+- `dvc.yaml`, `.dvc`, `dvc.lock` in backticks also auto-link.
+- `<abbr>` tags for glossary terms — powers tooltip popups.
+- `<admon type="info">` clarifications, `type="tip"` best practices,
+  `type="warn"` data safety (sparingly).
+- `<details>` for setup steps, deep dives, optional complexity.
+- Code fences: `usage` for `dvc --help` output, `dvc` for terminal examples,
+  `yaml` for DVC/YAML files, `dvctable` for colored table cells, `diff` for git
+  diff output.
+- **Bold** for emphasis, _italics_ for special terms.
+- Emojis: 📖 related docs, ⚠️ warnings, 💡 tips.
+- 80-char line width. Prettier enforced via pre-commit hook.
+
+## Design
+
+Audience: ML engineers, data engineers, and developers who need fast lookup and
+comfortable long-session reading.
+
+- Pragmatic, precise, trustworthy. Not marketing, not dashboard.
+- Documentation-first editorial UI. Light mode is the baseline; dark mode is a
+  calm extension, not a re-skin.
+- Surfaces separate clearly without looking glossy, heavy, or over-cardified.
+- Accent color (cyan) concentrated in links and active states, not spread as
+  decoration.
+
+### Typography
+
+- Reading comfort over stylistic expression.
+- Hierarchy through spacing, weight, and contrast — not size jumps.
+- On reference pages, typography does the heavy lifting: monospace rhythm,
+  weight, indentation, and alignment establish structure before borders or
+  fills.
+
+### Reference pages
+
+- Command and API docs are dense lookup tools. Optimize for scan speed and
+  stable structure.
+- Quieter than tutorials — no decorative surfaces or oversized gestures.
+- Emphasis from typography and grouping first; box treatments only when they
+  materially improve comprehension.
+- Tutorials may allow more surface treatment and guidance cues; reference pages
+  stay tighter, flatter, and more systematic.
+
+### Principles
+
+1. **Content first.** Reading flow and scanability outrank decoration.
+2. **Quiet hierarchy.** Spacing, contrast, and weight before stronger effects.
+3. **Accent with restraint.** Cyan guides interaction, doesn't dominate.
+4. **Supportive chrome.** Sidebars and cards frame content, don't compete.
+5. **Calm dark mode.** Durable for long reading sessions.
+6. **Accessible by default.** Clear contrast, visible focus, restrained motion,
+   differentiation that doesn't rely on color alone.
+7. **Minimal interactive states.** Prefer underline, color shift, or icon
+   emphasis before background fills or shadows that create extra visual layers.
+
+### Heuristics
+
+- Prefer incremental refinement over redesign. Match the existing docs system
+  unless there is a clear product or usability reason to diverge.
+- No glossy panels, heavy shadows, hover lifts, or decorative gradients.
+- Keep interaction language consistent. Links read as links through color and
+  underline, not component-specific hover inventions.
+- Keep complexity progressive. Core guidance in the main flow; use
+  details/collapsible sections for deeper notes when that preserves scanability.
+- Tutorials allow more guidance and surface treatment; reference pages stay
+  denser, flatter, and more typographic.
+- Verify UI changes in both light and dark mode, on at least one tutorial-style
+  and one reference-style page.

gatsby-config.mjs

@@ -2,10 +2,8 @@ import { createRequire } from 'module'
 import fs from 'fs'
 import path from 'path'
 
-import autoprefixer from 'autoprefixer'
+import tailwindcssPostcss from '@tailwindcss/postcss'
 import postcssNested from 'postcss-nested'
-import tailwindcss from 'tailwindcss'
-import tailwindNesting from 'tailwindcss/nesting/index.js'
 
 import 'dotenv/config'
 import './src/config/prismjs/dvc.js'
@@ -50,9 +48,8 @@ const argsLinkerPath = ['command-reference', 'ref', 'cli-reference']
 const sentry = true
 
 const postCssPlugins = [
-  tailwindNesting(postcssNested),
-  autoprefixer,
-  tailwindcss,
+  postcssNested,
+  tailwindcssPostcss(),
   makeGitHubMarkdownCssUseThemeAttribute
 ]
 

package.json

@@ -45,7 +45,7 @@
     "@sentry/gatsby": "10.17.0",
     "@sentry/node": "10.27.0",
     "@svgr/webpack": "8.1.0",
-    "autoprefixer": "10.4.21",
+    "@tailwindcss/postcss": "4.2.2",
     "classnames": "2.5.1",
     "compression": "1.8.1",
     "dotenv": "17.2.3",
@@ -99,7 +99,7 @@
     "remark-preset-lint-recommended": "7.0.1",
     "reset-css": "5.0.2",
     "serve-handler": "6.1.6",
-    "tailwindcss": "3.4.18",
+    "tailwindcss": "4.2.2",
     "tailwindcss-animate": "1.0.7",
     "title-case": "3.0.3",
     "tsconfig-paths-webpack-plugin": "4.2.0",

renovate.json

@@ -10,28 +10,113 @@
     ":label(dependencies)",
     ":pinAllExceptPeerDependencies"
   ],
-  "prConcurrentLimit": 1,
+  "prConcurrentLimit": 3,
   "rebaseWhen": "conflicted",
   "dependencyDashboardApproval": true,
+  "minimumReleaseAge": "14 days",
+  "customManagers": [
+    {
+      "customType": "regex",
+      "fileMatch": ["^src/components/Link/index\\.tsx$"],
+      "matchStrings": [
+        "'(?<currentValue>\\d+\\.\\d+\\.\\d+)'\\s*//\\s*renovate:\\s*datasource=(?<datasource>.*?)\\s+depName=(?<depName>.*?)\\s*$"
+      ]
+    }
+  ],
   "packageRules": [
     {
-      "groupName": "minor and patch updates",
+      "description": "DVC version bump — PR immediately on new release",
+      "matchPackageNames": ["dvc"],
+      "matchDatasources": ["pypi"],
+      "schedule": ["at any time"],
+      "minimumReleaseAge": "0 days",
+      "prPriority": 10,
+      "dependencyDashboardApproval": false,
+      "automerge": false
+    },
+    {
+      "groupName": "gatsby",
+      "matchPackageNames": ["gatsby", "gatsby-*"],
+      "matchDatasources": ["npm"]
+    },
+    {
+      "groupName": "sentry",
+      "matchPackageNames": ["@sentry/*"],
+      "matchDatasources": ["npm"]
+    },
+    {
+      "description": "Add typescript-eslint to the linters preset group",
+      "groupName": "linters",
+      "matchPackageNames": ["typescript-eslint"],
+      "matchDatasources": ["npm"]
+    },
+    {
+      "description": "Add unified ecosystem packages to the remark preset group",
+      "groupName": "remark",
+      "matchPackageNames": [
+        "unified",
+        "rehype-*",
+        "hast-util-*",
+        "unist-util-*"
+      ],
+      "matchDatasources": ["npm"]
+    },
+    {
+      "groupName": "styling",
+      "matchPackageNames": [
+        "tailwindcss",
+        "tailwindcss-animate",
+        "autoprefixer"
+      ],
+      "matchDatasources": ["npm"]
+    },
+    {
+      "groupName": "server",
+      "matchPackageNames": [
+        "express",
+        "compression",
+        "dotenv",
+        "helmet",
+        "serve-handler",
+        "http-proxy-middleware",
+        "permissions-policy",
+        "nodemon"
+      ],
+      "matchDatasources": ["npm"]
+    },
+    {
+      "groupName": "dev tools",
+      "matchPackageNames": ["vitest", "lint-staged", "husky", "typescript"],
+      "matchDatasources": ["npm"]
+    },
+    {
+      "groupName": "babel",
+      "matchPackageNames": ["@babel/*"],
+      "matchDatasources": ["npm"]
+    },
+    {
+      "groupName": "reach-ui",
+      "matchPackageNames": ["@reach/*"],
+      "matchDatasources": ["npm"]
+    },
+    {
+      "groupName": "types",
+      "matchPackageNames": ["@types/*", "!@types/react", "!@types/react-dom"],
       "matchDatasources": ["npm"],
-      "minimumReleaseAge": "7 days",
-      "matchUpdateTypes": ["minor", "patch"],
       "automerge": true,
       "automergeType": "branch",
-      "prPriority": 1,
-      "dependencyDashboardApproval": false,
-      "matchPackageNames": ["*"]
+      "dependencyDashboardApproval": false
     },
     {
-      "minimumReleaseAge": "7 days",
+      "groupName": "minor and patch updates",
+      "description": "Catch-all for remaining minor/patch",
       "matchDatasources": ["npm"],
+      "matchUpdateTypes": ["minor", "patch"],
+      "matchPackageNames": ["*"],
       "automerge": true,
       "automergeType": "branch",
-      "dependencyDashboardApproval": false,
-      "matchPackageNames": ["*"]
+      "prPriority": -1,
+      "dependencyDashboardApproval": false
     }
   ]
 }

src/components/Documentation/Layout/SidebarMenu/styles.module.css

@@ -1,3 +1,5 @@
+@reference "../../../../styles/global.css";
+
 .menu {
   @apply relative top-0 flex-1 min-h-0 overflow-y-auto overflow-x-hidden px-2;
 
@@ -36,7 +38,7 @@
   color: var(--docs-toc-text);
   border-radius: 6px;
 
-  @media screen(smMax) {
+  @media (width <= 768px) {
     min-height: 38px;
     padding: 8px 8px 8px 36px;
     font-size: 16px;
@@ -94,7 +96,7 @@
   transform: translateY(-50%);
   left: 3px;
 
-  @media screen(smMax) {
+  @media (width <= 768px) {
     left: 11px;
   }
 }
@@ -123,7 +125,7 @@
     transform 0.2s ease,
     color 0.2s ease;
 
-  @media screen(smMax) {
+  @media (width <= 768px) {
     width: 32px;
   }
 
@@ -165,7 +167,7 @@
     bottom: auto;
     transform: translateY(-50%);
 
-    @media screen(smMax) {
+    @media (width <= 768px) {
       left: 10px;
     }
 

src/components/Documentation/Layout/SiteNav/styles.module.css

@@ -1,8 +1,10 @@
+@reference "../../../../styles/global.css";
+
 .siteNav {
   display: none;
   border-bottom: 1px solid var(--docs-border-subtle);
 
-  @media screen(smMax) {
+  @media (width <= 768px) {
     display: block;
   }
 }