chore: tailwind v4

Author: karl-run

package.json

@@ -64,18 +64,17 @@
         "@hookform/devtools": "^4.3.3",
         "@navikt/eslint-config-teamsykmelding": "^7.1.0",
         "@playwright/test": "1.50.1",
+        "@tailwindcss/postcss": "^4.0.10",
         "@types/node": "^22.13.9",
         "@types/react": "^19.0.10",
         "@types/react-dom": "^19.0.4",
-        "autoprefixer": "^10.4.20",
         "eslint": "^8.57.1",
         "eslint-config-next": "15.2.1",
         "husky": "^9.1.7",
         "lint-staged": "^15.4.3",
         "postcss": "^8.5.3",
-        "postcss-import": "^16.1.0",
         "prettier": "^3.5.3",
-        "tailwindcss": "^3.4.17",
+        "tailwindcss": "^4.0.10",
         "typescript": "^5.8.2",
         "vite-tsconfig-paths": "^5.1.4",
         "vitest": "^3.0.7"

postcss.config.mjs

@@ -1,9 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
     plugins: {
-        'postcss-import': {},
-        tailwindcss: {},
-        autoprefixer: {},
+        '@tailwindcss/postcss': {},
     },
 }
 

src/app/(standalone)/page.tsx

@@ -26,7 +26,7 @@ export default function Home(): ReactElement {
                     </div>
                 </Heading>
 
-                <div className="border border-border-subtle p-3 rounded mt-2">
+                <div className="border border-border-subtle p-3 rounded-sm mt-2">
                     <Heading size="small" className="-mt-7 bg-white w-fit px-2 py-0">
                         Metadata
                     </Heading>

src/app/globals.css

@@ -1,4 +1,4 @@
-@import 'tailwindcss/base';
-@import '@navikt/ds-css';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss';
+@import '@navikt/ds-css' layer(components);
+
+@config '../../tailwind.config.ts';

src/components/ny-sykmelding-form/diagnose/combobox/AkselifiedCombobox.module.css

@@ -4,7 +4,9 @@
     right: 0.5rem;
     height: 2rem;
     width: 2rem;
-    @apply p-0 flex justify-center items-center;
+    padding: 0;
+
+    @apply flex justify-center items-center;
 }
 
 .comboboxItem:hover {

src/components/ui/form.tsx

@@ -14,7 +14,7 @@ export function FormSection({ children, icon, title }: PropsWithChildren<Props>)
 
     return (
         <div className="relative">
-            <section className="p-4 bg-bg-subtle rounded" aria-labelledby={headingId}>
+            <section className="p-4 bg-bg-subtle rounded-sm" aria-labelledby={headingId}>
                 <Heading level="2" size="medium" id={headingId} className="flex items-center gap-1">
                     {icon}
                     {title}

src/devtools/InternalDevToolItem.tsx

@@ -11,7 +11,7 @@ type Props = {
 
 export function DevToolItem({ title, description, children, className }: PropsWithChildren<Props>): ReactElement {
     return (
-        <div className="p-2 border border-border-alt-3 rounded grow">
+        <div className="p-2 border border-border-alt-3 rounded-sm grow">
             <div className="-mt-6">
                 <Heading level="3" size="xsmall" className="bg-surface-alt-3-subtle p-1 inline-block">
                     {title}

src/devtools/ScenarioLinks.tsx

@@ -8,7 +8,7 @@ import { getAbsoluteURL, pathWithBasePath } from '@utils/url'
 
 function ScenarioLinks(): ReactElement {
     return (
-        <div className="border border-border-subtle p-3 rounded mt-2">
+        <div className="border border-border-subtle p-3 rounded-sm mt-2">
             <Heading level="2" size="small" className="-mt-7 bg-white w-fit px-2 py-0">
                 Examples
             </Heading>