Upgrade to Tailwind 4

apps/site/package.json

@@ -26,11 +26,11 @@
     "@radix-ui/react-popover": "^1.1.4",
     "@sentry/nextjs": "^8.52.0",
     "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/postcss": "^4.0.0",
     "@tailwindcss/typography": "^0.5.15",
     "@tanstack/react-table": "^8.20.6",
     "@vercel/speed-insights": "^1.1.0",
     "airtable": "^0.12.2",
-    "autoprefixer": "^10.4.20",
     "camelcase-keys": "^9.1.3",
     "clsx": "^2.1.1",
     "crypto-js": "^4.2.0",
@@ -60,7 +60,7 @@
     "schema-dts": "^1.1.2",
     "slugify": "^1.6.6",
     "swr": "^2.3.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "usehooks-ts": "^3.1.0",
     "zod": "^3.24.1"
   },
@@ -90,8 +90,7 @@
     "husky": "^9.1.7",
     "postcss": "^8.4.41",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
-    "sass": "^1.83.0",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "turbo": "^2.3.3",
     "typescript": "^5.7.2",
     "yaml-loader": "^0.8.1"

apps/site/postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

apps/site/src/app/_components/AlternatingImageCard.tsx

@@ -33,13 +33,13 @@ export function AlternatingImageCard({
       <Image
         src={image.data}
         alt={image.alt}
-        className="h-48 flex-shrink-0 rounded-lg object-cover sm:h-64 lg:h-auto lg:w-1/3"
+        className="h-48 shrink-0 rounded-lg object-cover sm:h-64 lg:h-auto lg:w-1/3"
         sizes={buildImageSizeProp({
           startSize: '100vw',
           lg: '33vw',
         })}
       />
-      <div className="flex-grow">
+      <div className="grow">
         <BasicCard>{children}</BasicCard>
       </div>
     </Tag>

apps/site/src/app/_components/BreadCrumbsLayout.tsx

@@ -6,7 +6,7 @@ import type { LayoutProps } from '@/layout'
 
 export function BreadCrumbsLayout({ children }: LayoutProps) {
   return (
-    <div className="flex flex-grow flex-col gap-8">
+    <div className="flex grow flex-col gap-8">
       <BreadCrumbs />
       {children}
     </div>

apps/site/src/app/_components/FocusAreaCard.tsx

@@ -22,7 +22,7 @@ export function FocusAreaCard({
       <Image
         src={image.data}
         alt={image.alt}
-        className="aspect-video w-full rounded object-cover sm:w-60 sm:shrink-0 md:w-80 lg:w-full"
+        className="aspect-video w-full rounded-sm object-cover sm:w-60 sm:shrink-0 md:w-80 lg:w-full"
         sizes={buildImageSizeProp({
           startSize: '100vw',
           sm: '250px',

apps/site/src/app/_components/Form/FormCheckbox.tsx

@@ -29,18 +29,18 @@ export function FormCheckbox({
       <Checkbox
         {...rest}
         className={clsx(
-          'group cursor-pointer focus:outline-none',
+          'group cursor-pointer focus:outline-hidden',
           TOUCH_TARGET.touchAreaPadding,
           TOUCH_TARGET.touchAreaOffset,
         )}
       >
         <div
           className={clsx(
             TOUCH_TARGET.visibleElementSize,
-            'rounded bg-brand-100 p-0.5 text-brand-100 hover:bg-brand-200 group-focus:bg-brand-200 group-focus:outline group-focus:outline-1 group-focus:outline-offset-2 group-focus:outline-brand-100 group-data-[disabled]:cursor-not-allowed group-data-[checked]:bg-brand-400 hover:group-data-[checked]:bg-brand-500',
+            'rounded-sm bg-brand-100 p-0.5 text-brand-100 hover:bg-brand-200 group-focus:bg-brand-200 group-focus:outline group-focus:outline-1 group-focus:outline-offset-2 group-focus:outline-brand-100 group-data-disabled:cursor-not-allowed group-data-checked:bg-brand-400 group-data-checked:hover:bg-brand-500',
           )}
         >
-          <span className="hidden group-data-[checked]:block">
+          <span className="hidden group-data-checked:block">
             <Icon component={Check} size={16} weight="bold" />
           </span>
         </div>

apps/site/src/app/_components/Form/FormInput.tsx

@@ -30,7 +30,7 @@ export function FormInput({
         {...rest}
         invalid={Boolean(error)}
         className={clsx(
-          'block w-full rounded-lg border border-brand-300 bg-brand-800 px-3.5 py-3 focus:brand-outline placeholder:text-brand-300 hover:border-brand-400 placeholder:hover:text-brand-400 focus:text-brand-100 placeholder:focus:text-brand-100 data-[disabled]:cursor-not-allowed',
+          'block w-full rounded-lg border border-brand-300 bg-brand-800 px-3.5 py-3 focus:brand-outline placeholder:text-brand-300 hover:border-brand-400 hover:placeholder:text-brand-400 focus:text-brand-100 focus:placeholder:text-brand-100 data-disabled:cursor-not-allowed',
           error && 'border-red-400',
         )}
       />

apps/site/src/app/_components/Form/FormTextarea/FormTextarea.tsx

@@ -52,7 +52,7 @@ export function FormTextarea({
         {...rest}
         invalid={Boolean(error)}
         className={clsx(
-          'block min-h-44 w-full rounded-lg border border-brand-300 bg-brand-800 px-3.5 py-3 focus:brand-outline placeholder:text-brand-300 hover:border-brand-400 placeholder:hover:text-brand-400 focus:text-brand-100 placeholder:focus:text-brand-100 data-[disabled]:cursor-not-allowed',
+          'block min-h-44 w-full rounded-lg border border-brand-300 bg-brand-800 px-3.5 py-3 focus:brand-outline placeholder:text-brand-300 hover:border-brand-400 hover:placeholder:text-brand-400 focus:text-brand-100 focus:placeholder:text-brand-100 data-disabled:cursor-not-allowed',
           error && 'border-red-400',
         )}
       />

apps/site/src/app/_components/KeyMemberCard.tsx

@@ -62,10 +62,10 @@ function KeyMemberImage({
     alt: `Photo of ${name}`,
     quality: 100,
     sizes: '150px',
-    className: 'rounded object-cover',
+    className: 'rounded-sm object-cover',
   }
 
-  const containerClass = 'aspect-[3/4] w-32 shrink-0'
+  const containerClass = 'aspect-3/4 w-32 shrink-0'
   const isStaticImage = typeof image === 'object'
 
   if (isStaticImage) {

apps/site/src/app/_components/Listbox/ListboxOption.tsx

@@ -26,7 +26,7 @@ export function ListboxOption<Value extends OptionType>({
       as={as}
       value={option}
       disabled={option.disabled}
-      className="group flex cursor-default items-center justify-between gap-12 px-5 py-2 data-[disabled]:cursor-not-allowed ui-active:bg-brand-500"
+      className="group flex cursor-default items-center justify-between gap-12 px-5 py-2 data-disabled:cursor-not-allowed ui-active:bg-brand-500"
     >
       <span>
         {option.name}
@@ -35,7 +35,7 @@ export function ListboxOption<Value extends OptionType>({
         )}
       </span>
 
-      <span className="invisible mb-px group-data-[selected]:visible">
+      <span className="invisible mb-px group-data-selected:visible">
         <Icon component={Check} size={20} />
       </span>
     </HeadlessUIListboxOption>

apps/site/src/app/_components/MarkdownContent.tsx

@@ -13,8 +13,6 @@ import { buildImageSizeProp } from '@/utils/buildImageSizeProp'
 
 import { SmartTextLink } from '@/components/TextLink/SmartTextLink'
 
-import styles from '@/security/maturity-model/components/TableOfContents.module.scss'
-
 type PluggableList = Parameters<typeof ReactMarkdown>[0]['rehypePlugins']
 
 export type MarkdownContentProps = {
@@ -113,7 +111,7 @@ function addTableOfContentsHeader(nodeTree: HtmlElementNode) {
   const headerNode = {
     type: 'element',
     tagName: 'p',
-    properties: { className: styles.tableOfContentsHeader },
+    properties: { className: 'toc-header' },
     children: [{ type: 'text', value: 'Table of Contents' }],
   }
 

apps/site/src/app/_components/Navigation/MobileNavigation/LinkItem.tsx

@@ -10,7 +10,6 @@ import { isExternalLink } from '@/utils/linkUtils'
 
 import { BaseLink } from '@/components/BaseLink'
 import { Icon } from '@/components/Icon'
-import styles from '@/components/TextLink/TextLink.module.scss'
 
 export type LinkItemProps = {
   label: string
@@ -25,16 +24,12 @@ export function LinkItem({ label, href, nested, setOpen }: LinkItemProps) {
     nested && 'ml-6',
     isExternal && 'inline-flex items-center gap-1',
   )
-  const linkStyles = clsx(
-    styles.base,
-    "relative before:absolute before:inset-0 before:-m-3.5 before:content-['']",
-  )
 
   return (
     <li className={containerStyles}>
       <BaseLink
         href={href}
-        className={linkStyles}
+        className="text-link relative before:absolute before:inset-0 before:-m-3.5 before:content-['']"
         onClick={() => setOpen(false)}
       >
         {label}

apps/site/src/app/_components/Navigation/MobileNavigation/MobileNavigation.tsx

@@ -32,7 +32,7 @@ export function MobileNavigation() {
         <div className="flex flex-col gap-12 px-6 py-8">
           <div className="flex items-center justify-between">
             <Link
-              className="flex-shrink-0 focus:brand-outline"
+              className="shrink-0 focus:brand-outline"
               href={PATHS.HOME.path}
               aria-label="Go to homepage"
               onClick={() => setOpen(false)}

apps/site/src/app/_components/Navigation/Navigation.tsx

@@ -11,7 +11,7 @@ export function Navigation() {
   return (
     <nav className="mb-6 flex justify-between gap-12 lg:items-center">
       <Link
-        className="flex-shrink-0 focus:brand-outline"
+        className="shrink-0 focus:brand-outline"
         href={PATHS.HOME.path}
         aria-label="Go to homepage"
       >

apps/site/src/app/_components/NavigationPopover.tsx

@@ -34,7 +34,7 @@ export function NavigationPopover({
       </PopoverButton>
       <PopoverPanel
         transition
-        className="z-10 transition duration-200 ease-out data-[closed]:translate-y-1 data-[open]:translate-y-0 data-[closed]:opacity-0 data-[open]:opacity-100"
+        className="z-10 transition duration-200 ease-out data-closed:translate-y-1 data-open:translate-y-0 data-closed:opacity-0 data-open:opacity-100"
         anchor={{
           to: 'bottom',
           gap: SPACE_BETWEEN_PANEL_AND_BUTTON,

apps/site/src/app/_components/Pagination.tsx

@@ -84,7 +84,7 @@ export function Pagination({
           aria-disabled={!canGoBack}
           disabled={!canGoBack}
           className={clsx(
-            'flex items-center gap-x-1.5 rounded bg-brand-300 p-1 px-2 transition',
+            'flex items-center gap-x-1.5 rounded-sm bg-brand-300 p-1 px-2 transition',
             canGoBack
               ? 'hover:bg-brand-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white'
               : 'cursor-not-allowed',
@@ -111,7 +111,7 @@ export function Pagination({
               <button
                 aria-label={`Go to page ${item}`}
                 className={clsx(
-                  'h-full w-full rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-white',
+                  'h-full w-full rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-white',
                   item === currentPage
                     ? 'bg-brand-800 text-brand-100'
                     : 'bg-brand-300 text-brand-700 hover:bg-brand-400',
@@ -139,7 +139,7 @@ export function Pagination({
           aria-disabled={!canGoForward}
           disabled={!canGoForward}
           className={clsx(
-            'flex items-center gap-x-1.5 rounded bg-brand-300 p-1 px-2 transition',
+            'flex items-center gap-x-1.5 rounded-sm bg-brand-300 p-1 px-2 transition',
             canGoForward
               ? 'hover:bg-brand-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white'
               : 'cursor-not-allowed',

apps/site/src/app/_components/SearchInput.tsx

@@ -14,7 +14,7 @@ export function SearchInput({ query, onChange }: SearchInputProps) {
       <Label className="sr-only">Search</Label>
       <div className="relative">
         <Input
-          className="peer form-input block w-full rounded-lg border border-brand-300 bg-brand-800 px-11 py-3 focus:brand-outline placeholder:text-brand-300 hover:border-brand-400 placeholder:hover:text-brand-400 focus:text-brand-100 placeholder:focus:text-brand-100 [&::-webkit-search-cancel-button]:appearance-none"
+          className="peer form-input block w-full rounded-lg border border-brand-300 bg-brand-800 px-11 py-3 focus:brand-outline placeholder:text-brand-300 hover:border-brand-400 hover:placeholder:text-brand-400 focus:text-brand-100 focus:placeholder:text-brand-100 [&::-webkit-search-cancel-button]:appearance-none"
           placeholder="Search"
           type="search"
           value={query}
@@ -25,7 +25,7 @@ export function SearchInput({ query, onChange }: SearchInputProps) {
         </div>
         {query && (
           <Button
-            className="absolute right-1 top-1 flex size-[42px] items-center justify-center rounded text-brand-300 focus:brand-outline peer-hover:text-brand-400 peer-focus:text-brand-100"
+            className="absolute right-1 top-1 flex size-[42px] items-center justify-center rounded-sm text-brand-300 focus:brand-outline peer-hover:text-brand-400 peer-focus:text-brand-100"
             aria-label="Clear search input"
             onClick={() => onChange('')}
           >

apps/site/src/app/_components/StatisticCard.tsx

@@ -5,7 +5,7 @@ import type { StatisticData } from '@/orbit/data/statisticsData'
 export function StatisticCard({ icon, value, description }: StatisticData) {
   return (
     <li className="flex min-h-32 rounded-lg border border-brand-300 p-1">
-      <figure className="grid w-1/3 place-items-center rounded bg-brand-500">
+      <figure className="grid w-1/3 place-items-center rounded-sm bg-brand-500">
         <Icon component={icon} color="brand-200" size={40} />
       </figure>
 

apps/site/src/app/_components/Table/Table.module.css

@@ -0,0 +1,51 @@
+@reference '../../_styles/globals.css';
+
+.tableWrapper {
+  @apply focus:brand-outline w-full overflow-x-auto rounded-lg;
+}
+
+.tableWrapper[data-freeze-header='true'] {
+  @apply max-h-screen;
+}
+
+.tableWrapper[data-freeze-header='true'] thead .cell {
+  @apply sticky top-0 z-10 bg-inherit;
+}
+
+.tableWrapper[data-freeze-header='true'][data-freeze-first-column='true']
+  thead
+  .cell:first-child {
+  @apply z-20;
+}
+
+.tableWrapper[data-freeze-first-column='true'] .cell:first-child {
+  @apply sticky left-0 z-10 bg-inherit;
+}
+
+.table {
+  @apply isolate h-full min-w-full border-separate border-spacing-0;
+}
+
+.row {
+  @apply bg-brand-800 h-[52px];
+}
+
+tbody .row {
+  @apply odd:bg-brand-700 even:bg-brand-800;
+}
+
+.cell {
+  @apply px-5 text-left font-normal whitespace-nowrap;
+}
+
+.cell:first-child {
+  @apply pl-10;
+}
+
+.cell:last-child {
+  @apply pr-10;
+}
+
+thead .cell {
+  @apply border-brand-500 border-b;
+}

apps/site/src/app/_components/Table/Table.tsx

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx'
 
-import styles from './Table.module.scss'
+import styles from './Table.module.css'
 
 type TableProps = {
   freezeFirstColumn?: boolean
@@ -23,7 +23,7 @@ export function Table({
       data-freeze-header={freezeHeader}
       className={clsx(
         styles.tableWrapper,
-        withBorder && 'border border-brand-300',
+        withBorder && 'border-brand-300 border',
       )}
     >
       <table

apps/site/src/app/_components/Table/TableBody.tsx

@@ -1,7 +1,7 @@
 import { flexRender, type RowModel, type RowData } from '@tanstack/react-table'
 import { clsx } from 'clsx'
 
-import styles from './Table.module.scss'
+import styles from './Table.module.css'
 
 type TableBodyProps<Data extends RowData> = {
   rowModel: RowModel<Data>