Upgrade Tailwind CSS to 4.3.3 and migrate panel styles

checks/README.md

@@ -50,6 +50,10 @@ named `testdata` so the Go tool ignores it, and it is in the justfile's
 Fix a finding by changing the code, or by narrowing the rule if the finding
 turns out to be a rule bug - never by loosening what the rule means.
 
+`tailwind-v4-utilities` keeps vertical form spacing on flex-column gaps and
+preserves forced-colors focus outlines with `outline-hidden`. It rejects the
+earlier utility names whose behavior changed in Tailwind 4.
+
 `unapproved-entity-autocreate` (`checks/semgrep/service-go.yml`) ships without
 its `ensure$ANY(...)` branch on purpose: officer's `ensureAccount` /
 `ensureLimitAccount` / `ensureAutoCreatedAsset` family in

checks/semgrep/tailwind-v4-utilities.yml

@@ -0,0 +1,27 @@
+# Copyright The Pit Project Owners. All rights reserved.
+# SPDX-License-Identifier: Apache-2.0
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# Please see https://officer.openpit.dev and the OWNERS file for details.
+
+rules:
+  - id: tailwind-v4-utilities
+    message: Use flex-column gap spacing and outline-hidden to retain Tailwind v3 layout and focus behavior.
+    severity: ERROR
+    languages: [generic]
+    pattern-regex: '(?<![\w-])(?:space-y-(?:[0-9.]+|\[[^\]\r\n]+\])|outline-none)(?![\w-])'
+    paths:
+      include: ["/web/src/**"]
+      exclude: ["/checks/semgrep/testdata/**"]
+

checks/semgrep/testdata/tailwind-v4-utilities.tsx

@@ -0,0 +1,26 @@
+// Copyright The Pit Project Owners. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+// Please see https://officer.openpit.dev and the OWNERS file for details.
+
+// ruleid: tailwind-v4-utilities
+const oldSpacing = "space-y-2";
+// ruleid: tailwind-v4-utilities
+const oldFocus = "focus:outline-none";
+// ok: tailwind-v4-utilities
+const spacing = "flex flex-col gap-y-2";
+// ok: tailwind-v4-utilities
+const focus = "focus:outline-hidden";
+

justfile

@@ -187,6 +187,7 @@ check-semgrep: install-semgrep
     {{ semgrep }} --test --config checks/semgrep/file-header-site-link.yml --metrics=off --disable-version-check checks/semgrep/testdata/file-header-site-link.txt
     {{ semgrep }} --test --config checks/semgrep/panel-access-reuse.yml --metrics=off --disable-version-check checks/semgrep/testdata/panel-access-reuse.tsx
     {{ semgrep }} --test --config checks/semgrep/no-legacy-database-probe.yml --metrics=off --disable-version-check checks/semgrep/testdata/no-legacy-database-probe.go
+    {{ semgrep }} --test --config checks/semgrep/tailwind-v4-utilities.yml --metrics=off --disable-version-check checks/semgrep/testdata/tailwind-v4-utilities.tsx
 
 # Lint all.
 [parallel]