migrate to tailwind 4

Author: bjohansebas

apps/site/.postcssrc.json

@@ -3,9 +3,6 @@
     "postcss-mixins": {},
     "postcss-simple-vars": {},
     "postcss-calc": {},
-    "postcss-import": {},
-    "tailwindcss/nesting": {},
-    "tailwindcss": {},
-    "autoprefixer": {}
+    "@tailwindcss/postcss": {}
   }
 }

apps/site/.stylelintrc.mjs

@@ -43,5 +43,7 @@ export default {
     'import-notation': 'string',
     // Allow the `@apply` at rule as its part of Tailwind
     'at-rule-no-deprecated': [true, { ignoreAtRules: ['apply'] }],
+    'at-rule-no-unknown': null,
+    'function-no-unknown': null,
   },
 };

apps/site/app/[locale]/next-data/og/[category]/[title]/route.tsx

@@ -4,13 +4,12 @@ import HexagonGrid from '@/components/Icons/HexagonGrid';
 import JsIconWhite from '@/components/Icons/Logos/JsIconWhite';
 import { DEFAULT_CATEGORY_OG_TYPE } from '@/next.constants.mjs';
 import { defaultLocale } from '@/next.locales.mjs';
-import tailwindConfig from '@/tailwind.config';
 import { hexToRGBA } from '@/util/hexToRGBA';
 
 const CATEGORY_TO_THEME_COLOUR_MAP = {
-  announcement: tailwindConfig.theme.colors.green['700'],
-  release: tailwindConfig.theme.colors.info['600'],
-  vulnerability: tailwindConfig.theme.colors.warning['600'],
+  announcement: 'var(--color-green-900)',
+  release: 'var(--color-info-600)',
+  vulnerability: 'var(--color-warning-600)',
 };
 
 type Category = keyof typeof CATEGORY_TO_THEME_COLOUR_MAP;

apps/site/components/Blog/BlogHeader/index.module.css

@@ -1,3 +1,5 @@
+@reference "../../../styles/index.css";
+
 .blogHeader {
   h1 {
     @apply inline-flex

apps/site/components/Common/AlertBox/index.module.css

@@ -1,9 +1,11 @@
+@reference "../../../styles/index.css";
+
 .alertBox {
   @apply flex
     flex-row
     items-center
     gap-2
-    rounded
+    rounded-sm
     px-4
     py-3
     text-sm
@@ -31,7 +33,7 @@
   }
 
   .title {
-    @apply rounded-sm
+    @apply rounded-xs
       px-1.5;
   }
 

apps/site/components/Common/AvatarGroup/Avatar/index.module.css

@@ -1,3 +1,5 @@
+@reference "../../../../styles/index.css";
+
 .item {
   @apply xs:max-h-10
     xs:max-w-10

apps/site/components/Common/AvatarGroup/Overlay/index.module.css

@@ -1,3 +1,5 @@
+@reference "../../../../styles/index.css";
+
 .overlay {
   @apply flex
     min-w-56

apps/site/components/Common/AvatarGroup/index.module.css

@@ -1,3 +1,5 @@
+@reference "../../../styles/index.css";
+
 .avatarGroup {
   @apply flex
     flex-wrap

apps/site/components/Common/Badge/index.module.css

@@ -1,12 +1,14 @@
+@reference "../../../styles/index.css";
+
 .wrapper {
   @apply flex
     w-fit
     items-center
     rounded-full
     border
     py-1
-    pl-1
     pr-2.5
+    pl-1
     text-sm
     font-medium;
 

apps/site/components/Common/Banner/index.module.css

@@ -1,3 +1,5 @@
+@reference "../../../styles/index.css";
+
 .banner {
   @apply flex
     w-full