[UXIT-2039] Upgrade to Tailwind V4 [skip percy]

apps/site/.prettierrc.json

@@ -1,6 +1,8 @@
 {
   "singleQuote": true,
   "semi": false,
+  "tailwindStylesheet": "./src/app/_styles/globals.css",
+  "tailwindFunctions": ["clsx"],
   "overrides": [
     {
       "files": "*.md",

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/Card.tsx

@@ -2,7 +2,7 @@ import Image, { type ImageProps } from 'next/image'
 
 import { ArrowUpRight } from '@phosphor-icons/react/dist/ssr'
 import { clsx } from 'clsx'
-import theme from 'tailwindcss/defaultTheme'
+import theme from 'tailwindcss/dist/default-theme'
 
 import { type CTAProps } from '@/types/ctaType'
 import type { ImageObjectFit, StaticImageProps } from '@/types/imageType'
@@ -72,7 +72,7 @@ export function Card({
   return (
     <Tag
       className={clsx(
-        'relative h-full rounded-lg border bg-brand-700 bg-opacity-30 backdrop-blur-xl',
+        'relative h-full rounded-lg border bg-brand-700/30 backdrop-blur-xl',
         borderStyles[borderColor],
       )}
     >

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

@@ -13,7 +13,7 @@ import type { TouchTarget } from '@/types/touchTargetType'
 import { NOTIFICATION_DIALOG_DURATION_MS } from '@/constants/notificationDialogDuration'
 
 import { Icon } from '@/components/Icon'
-import { NotificationDialog } from '@/components/NotificationDialog'
+import { NotificationDialog } from '@/components/NotificationDialog/NotificationDialog'
 
 type CopyToClipboardProps = {
   text: string

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

@@ -17,7 +17,7 @@ export function ExploreSectionCard({
   children,
 }: ExploreSectionCardProps) {
   return (
-    <div className="relative flex flex-col justify-between gap-3 rounded-lg border border-brand-500 bg-brand-700 bg-opacity-10 p-4 backdrop-blur-md">
+    <div className="relative flex flex-col justify-between gap-3 rounded-lg border border-brand-500 bg-brand-700/10 p-4 backdrop-blur-md">
       <div className={clsx('flex flex-col gap-3', cta && 'mb-10')}>
         <Heading {...heading} />
         {children && <p>{children}</p>}

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/FormListbox.tsx

@@ -1,5 +1,5 @@
 import { Listbox } from '@headlessui/react'
-import theme from 'tailwindcss/defaultTheme'
+import theme from 'tailwindcss/dist/default-theme'
 
 import { FormField, type FormFieldProps } from '@/components/Form/FormField'
 import { type IconProps } from '@/components/Icon'

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 = {
@@ -65,7 +63,7 @@ const MarkdownLink: Components['a'] = ({ href, children }) => {
 
     return <>{children}</>
   }
-  return <SmartTextLink href={href}>{children}</SmartTextLink>
+  return <SmartTextLink href={href} className="not-prose">{children}</SmartTextLink>
 }
 
 const markdownComponents: Components = {
@@ -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/NewsletterForm.tsx

@@ -14,7 +14,7 @@ import { Button } from '@/components/Button'
 import { ControlledForm } from '@/components/Form/ControlledForm'
 import { ControlledFormInput } from '@/components/Form/ControlledFormInput'
 import type { IconProps } from '@/components/Icon'
-import { NotificationDialog } from '@/components/NotificationDialog'
+import { NotificationDialog } from '@/components/NotificationDialog/NotificationDialog'
 
 const NewsletterSchema = z.object({
   email: z

apps/site/src/app/_components/NotificationDialog/NotificationDialog.css

@@ -0,0 +1,27 @@
+@keyframes slide-in-from-top {
+    from {
+      transform: translateY(-100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes shrink-and-fade-out {
+    from {
+      transform: scale(1);
+      opacity: 1;
+    }
+    to {
+      transform: scale(0.9);
+      opacity: 0;
+    }
+  }
+
+  .animate-slide-in-from-top {
+    animation: slide-in-from-top 300ms cubic-bezier(0.41, 0.73, 0.51, 1.02);
+  }
+
+  .animate-shrink-and-fade-out {
+    animation: shrink-and-fade-out 150ms ease-in forwards;
+  }

apps/site/src/app/_components/NotificationDialog.tsx → apps/site/src/app/_components/NotificationDialog/NotificationDialog.tsx

@@ -9,6 +9,8 @@ import { clsx } from 'clsx'
 
 import { Icon, type IconProps } from '@/components/Icon'
 
+import './NotificationDialog.css'
+
 type NotificationDialogProps = {
   isOpen: boolean
   setIsOpen: (arg: boolean) => void
@@ -32,7 +34,7 @@ export function NotificationDialog({
       <DialogPanel
         transition
         className={clsx(
-          'flex w-80 gap-3 rounded-lg border border-brand-100 border-opacity-20 bg-brand-800 p-5 sm:w-96',
+          'flex w-80 gap-3 rounded-lg border border-brand-100/20 bg-brand-800 p-5 sm:w-96',
           {
             'animate-slide-in-from-top': isOpen,
             'animate-shrink-and-fade-out': !isOpen,

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>