chore: migrate to tailwind css v4

.prettierrc.js

@@ -4,4 +4,5 @@ module.exports = {
   jsxSingleQuote: true,
   tabWidth: 2,
   semi: true,
+  plugins: ['prettier-plugin-tailwindcss'],
 };

package.json

@@ -60,6 +60,7 @@
     "@eslint/js": "9.39.1",
     "@ianvs/prettier-plugin-sort-imports": "4.7.0",
     "@playwright/test": "1.56.1",
+    "@tailwindcss/postcss": "4.1.17",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^15.0.7",
     "@types/jest": "30.0.0",
@@ -85,7 +86,7 @@
     "prettier": "3.6.2",
     "prettier-plugin-sort-json": "4.1.1",
     "prettier-plugin-tailwindcss": "0.7.2",
-    "tailwindcss": "3.4.18",
+    "tailwindcss": "4.1.17",
     "typescript": "5.9.3",
     "vitest": "3.2.4"
   },

postcss.config.js

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

src/components/layout/Footer.tsx

@@ -5,14 +5,14 @@ import { Logo } from '@/components/ui/icons/Logo';
 
 export default function Footer() {
   return (
-    <footer className='border-t-solid border-t-4 border-primary/30 py-24'>
+    <footer className='border-t-solid border-primary/30 border-t-4 py-24'>
       <Container>
         <div className='px-2 sm:px-4'>
           <div className='grid grid-cols-3 gap-y-8 sm:grid-cols-4 sm:gap-0'>
             <div className='col-span-3 sm:col-span-1'>
               <Link
                 href='/'
-                className='text-black ease-in-out hover:text-primary'
+                className='hover:text-primary text-black ease-in-out'
               >
                 <Logo variant='logoWithText' />
               </Link>

src/components/layout/Header.tsx

@@ -27,7 +27,7 @@ export default function Header() {
   return (
     <header className='pointer-events-none fixed z-30 flex w-full justify-center'>
       <div className='pointer-events-auto relative mt-8 flex items-center justify-between gap-8 overflow-hidden rounded-full border-[1px] border-solid border-black bg-white/85 px-2 py-2 pl-4 shadow-sm backdrop-blur-md sm:gap-32'>
-        <Link href='/' className='text-black ease-in-out hover:text-primary'>
+        <Link href='/' className='hover:text-primary text-black ease-in-out'>
           <Logo className='w-24 sm:w-48' variant='textOnly' />
         </Link>
         <Navigation />

src/components/layout/VisualGrid.tsx

@@ -6,7 +6,7 @@ export default function VisualGrid() {
         .map((_, index) => (
           <div
             key={index}
-            className={`h-full w-[1px] bg-grid ${index === 4 ? 'hidden sm:block' : ''}`}
+            className={`bg-grid h-full w-[1px] ${index === 4 ? 'hidden sm:block' : ''}`}
           ></div>
         ))}
     </div>

src/components/templates/About.tsx

@@ -10,19 +10,19 @@ function AboutHero() {
     <>
       <Title className='leading-none' size='two'>
         About
-        <span className='font-secondary italic text-primary'>
+        <span className='font-secondary text-primary italic'>
           {' '}
           »
         </span> Project{' '}
         <span className='relative inline-flex items-center overflow-hidden rounded-full border-2 border-solid border-black px-3 py-2'>
-          <div className='absolute left-0 top-0 h-full w-full bg-primary object-cover' />
+          <div className='bg-primary absolute top-0 left-0 h-full w-full object-cover' />
           <span className='z-20'>
             <Logo variant='textOnly' className='w-32 sm:w-72' />
           </span>
         </span>{' '}
-        <span className='font-secondary italic text-primary'>(dot) org</span>,
+        <span className='font-secondary text-primary italic'>(dot) org</span>,
         IT Security Protects Privacy and Supports Democracy
-        <span className='font-secondary italic text-primary'> «</span>
+        <span className='font-secondary text-primary italic'> «</span>
       </Title>
       <Paragraph>
         SENTIMENT, an interdisciplinary research on self-disclosure in intimate

src/components/templates/ArticleCard.tsx

@@ -28,12 +28,12 @@ export default function ArticleCard({
   if (prominent && imageUrl) {
     return (
       <Link href={'/articles/' + slug} className='group block'>
-        <div className='group grid grid-cols-3 rounded-full py-6 group-hover:bg-primary/20 sm:grid-cols-4'>
+        <div className='group group-hover:bg-primary/20 grid grid-cols-3 rounded-full py-6 sm:grid-cols-4'>
           <div className='relative col-span-1'>
-            <div className='text-sm text-primary group-hover:text-black group-hover:blur-sm'>
+            <div className='text-primary text-sm group-hover:text-black group-hover:blur-sm'>
               {formatDate(createdAt)}
             </div>
-            <div className='text-sm text-primary group-hover:text-black group-hover:blur-sm'>
+            <div className='text-primary text-sm group-hover:text-black group-hover:blur-sm'>
               {author}
             </div>
           </div>
@@ -42,7 +42,7 @@ export default function ArticleCard({
               {title}
             </Title>
             <div className='mt-2 line-clamp-5 text-sm'>{description}</div>
-            <div className='mt-4 text-sm text-primary group-hover:text-black group-hover:underline'>
+            <div className='text-primary mt-4 text-sm group-hover:text-black group-hover:underline'>
               {readingDuration(description)}
             </div>
           </div>
@@ -53,14 +53,14 @@ export default function ArticleCard({
 
   return (
     <Link href={'/articles/' + slug} className='group block'>
-      <div className='group grid grid-cols-3 rounded-full py-6 group-hover:bg-primary/20 sm:grid-cols-4'>
-        <div className='text-sm text-primary group-hover:text-black group-hover:blur-sm'>
+      <div className='group group-hover:bg-primary/20 grid grid-cols-3 rounded-full py-6 sm:grid-cols-4'>
+        <div className='text-primary text-sm group-hover:text-black group-hover:blur-sm'>
           {author}
         </div>
-        <div className='text-sm text-primary group-hover:text-black group-hover:blur-sm'>
+        <div className='text-primary text-sm group-hover:text-black group-hover:blur-sm'>
           {formatDate(createdAt)}
         </div>
-        <div className='text-sm text-primary group-hover:text-black group-hover:blur-sm'>
+        <div className='text-primary text-sm group-hover:text-black group-hover:blur-sm'>
           {readingDuration(description)}
         </div>
         <div className='col-span-3 row-start-2 mt-4 sm:col-start-2'>

src/components/templates/ArticleLayout.tsx

@@ -25,12 +25,12 @@ function ArticleHeader({ article }: ArticleProps) {
           {article.title}
         </Title>
       </div>
-      <div className='col-span-4 mb-4 grid grid-cols-3 gap-0 text-sm text-primary sm:grid-cols-4'>
-        <div className='text-sm text-primary'>{article.author}</div>
-        <div className='text-sm text-primary'>
+      <div className='text-primary col-span-4 mb-4 grid grid-cols-3 gap-0 text-sm sm:grid-cols-4'>
+        <div className='text-primary text-sm'>{article.author}</div>
+        <div className='text-primary text-sm'>
           {formatDate(article.createdAt)}
         </div>
-        <div className='text-sm text-primary'>
+        <div className='text-primary text-sm'>
           {readingDuration(article.description)}
         </div>
       </div>

src/components/templates/Crossbar.tsx

@@ -1,6 +1,6 @@
 export default function Crossbar() {
   return (
-    <div className='text-md mb-4 grid grid-cols-3 text-primary sm:grid-cols-4'>
+    <div className='text-md text-primary mb-4 grid grid-cols-3 sm:grid-cols-4'>
       <div className='-ml-[7.7923px] text-3xl'>+</div>
     </div>
   );

src/components/templates/HeroIntro.tsx

@@ -25,8 +25,8 @@ function Text({ content }: { content: Homepage }) {
       <div className='z-20 col-span-3 sm:col-span-4'>
         <Title className='leading-none' size='two'>
           Creating{' '}
-          <span className='font-secondary italic text-primary'>Safe</span> &
-          <span className='font-secondary italic text-primary'>
+          <span className='font-secondary text-primary italic'>Safe</span> &
+          <span className='font-secondary text-primary italic'>
             {' '}
             Supportive
           </span>{' '}
@@ -61,7 +61,7 @@ function Text({ content }: { content: Homepage }) {
   }
 
   return (
-    <div className='border-b-solid mb-12 border-b-[1px] border-b-grid pb-12 sm:mb-24 sm:pb-24'>
+    <div className='border-b-solid border-b-grid mb-12 border-b-[1px] pb-12 sm:mb-24 sm:pb-24'>
       <div className='grid grid-cols-3 gap-0 sm:grid-cols-4'>
         <ProminentText />
         <HeroText />
@@ -103,7 +103,7 @@ function Partners() {
             key={index}
             href={partner.url}
             target='_blank'
-            className='rounded-full hover:bg-secondary/20'
+            className='hover:bg-secondary/20 rounded-full'
           >
             <div className='mx-auto w-2/3'>{partner.icon}</div>
           </Link>
@@ -116,7 +116,7 @@ function Partners() {
 export default function HeroIntro({ content }: { content: Homepage }) {
   return (
     <>
-      <section className='pb-24 pt-24 sm:pt-36'>
+      <section className='pt-24 pb-24 sm:pt-36'>
         <Container>
           <Crossbar />
           <div className='px-2 sm:px-4'>

src/components/templates/LatestWidget.tsx

@@ -14,7 +14,7 @@ interface LatestWidgetProps {
 export default function LatestWidget({ articles }: LatestWidgetProps) {
   return (
     <>
-      <section className='border-t-solid rounded-tl-[5rem] rounded-tr-[5rem] border-t-4 border-primary/30 py-24'>
+      <section className='border-t-solid border-primary/30 rounded-tl-[5rem] rounded-tr-[5rem] border-t-4 py-24'>
         <Container>
           <div className='px-2 sm:px-4'>
             <div className='mb-4 grid grid-cols-6 gap-0'>
@@ -40,7 +40,7 @@ export default function LatestWidget({ articles }: LatestWidgetProps) {
             <div className='mt-8 flex justify-start'>
               <Link href='/articles' className='text-xl hover:underline'>
                 View{' '}
-                <span className='font-secondary italic text-primary'> all</span>{' '}
+                <span className='font-secondary text-primary italic'> all</span>{' '}
                 articles <span className='font-secondary italic'>»</span>
               </Link>
             </div>

src/components/templates/Team.tsx

@@ -129,7 +129,7 @@ const teamMembers: TeamMember[] = [
         Science at Ruhr University Bochum (Germany), where she leads the{' '}
         <Link
           href='https://informatik.rub.de/ubisys/'
-          className='cursor-pointer text-primary underline'
+          className='text-primary cursor-pointer underline'
           target='_blank'
         >
           Chair for Security and Privacy of Ubiquitous Systems
@@ -154,7 +154,7 @@ const teamMembers: TeamMember[] = [
         Ramya Kandula is a PhD student at the{' '}
         <Link
           href='https://informatik.rub.de/ubisys/'
-          className='cursor-pointer text-primary underline'
+          className='text-primary cursor-pointer underline'
           target='_blank'
         >
           Chair for Security and Privacy of Ubiquitous Systems (UbiSys)
@@ -237,7 +237,7 @@ const teamMembers: TeamMember[] = [
         author of numerous publications. Detailed information is available at{' '}
         <Link
           href='https://goto.uni-kassel.de/go/dr-maxi-nebel'
-          className='cursor-pointer text-primary underline'
+          className='text-primary cursor-pointer underline'
           target='_blank'
         >
           https://goto.uni-kassel.de/go/dr-maxi-nebel
@@ -260,7 +260,7 @@ const teamMembers: TeamMember[] = [
         technology law. Detailed information is available at{' '}
         <Link
           href='https://www.uni-kassel.de/go/geminn'
-          className='cursor-pointer text-primary underline'
+          className='text-primary cursor-pointer underline'
           target='_blank'
         >
           https://www.uni-kassel.de/go/geminn
@@ -275,15 +275,15 @@ function TeamHero() {
     <>
       <Title className='leading-none' size='two'>
         Meet the{' '}
-        <span className='font-secondary italic text-primary'>Team</span>
+        <span className='font-secondary text-primary italic'>Team</span>
       </Title>
     </>
   );
 }
 
 function TeamMembers() {
   return (
-    <ul className='relative team-list'>
+    <ul className='team-list relative'>
       {teamMembers.map((member) => (
         <li
           key={member.name}
@@ -292,7 +292,7 @@ function TeamMembers() {
           <Title
             renderAs='h2'
             size='four'
-            className='col-span-4 font-primary uppercase sm:text-right'
+            className='font-primary col-span-4 uppercase sm:text-right'
           >
             {member.name}
           </Title>

src/styles/globals.css

@@ -1,6 +1,18 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@theme {
+  --font-family-primary:
+    CircularStd, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-family-secondary:
+    ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+
+  --color-primary: #ff5c24;
+  --color-secondary: #1f35a5;
+  --color-tertiary: #8b9094;
+  --color-text: #000000;
+  --color-grid: #f2f2f2;
+}
 
 :root {
   --max-width: 975px;
@@ -16,5 +28,6 @@ html,
 body {
   max-width: 100vw;
   overflow-x: hidden;
-  @apply font-primary text-text;
+  font-family: var(--font-family-primary);
+  color: var(--color-text);
 }