nodejs · bjohansebas · Feb 23, 2025 · Feb 23, 2025 · Feb 23, 2025 · Feb 23, 2025
@@ -3,9 +3,6 @@
     "postcss-mixins": {},
     "postcss-simple-vars": {},
     "postcss-calc": {},
-    "postcss-import": {},
-    "tailwindcss/nesting": {},
-    "tailwindcss": {},
-    "autoprefixer": {}
+    "@tailwindcss/postcss": {}
   }
 }
@@ -41,5 +41,7 @@ export default {
     'media-feature-range-notation': 'prefix',
     // Adopts the import notation from `postcss-import`
     'import-notation': 'string',
+    'at-rule-no-unknown': null,
+    'function-no-unknown': null,
   },
 };
@@ -1,34 +1,23 @@
+@reference "../../../styles/index.css";
+
 .blogHeader {
   h1 {
-    @apply inline-flex
-      w-full
-      items-center
-      justify-between;
+    @apply inline-flex w-full items-center justify-between;
 
     a {
-      @apply inline-flex
-        size-9
-        items-center
-        justify-center
-        rounded-md
-        p-2;
+      @apply inline-flex size-9 items-center justify-center rounded-md p-2;
 
       &:hover {
-        @apply bg-neutral-100
-          dark:bg-neutral-900;
+        @apply bg-neutral-100 dark:bg-neutral-900;
       }
     }
 
     svg {
-      @apply size-6
-        text-neutral-500;
+      @apply size-6 text-neutral-500;
     }
   }
 
   p {
-    @apply text-lg
-      font-medium
-      text-neutral-800
-      dark:text-neutral-200;
+    @apply text-lg font-medium text-neutral-800 dark:text-neutral-200;
   }
 }
@@ -1,3 +1,5 @@
+@reference "../../../styles/index.css";
+
 .alertBox {
   @apply flex
     flex-row

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

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

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

@@ -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;
 

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

@@ -1,3 +1,5 @@
+@reference "../../../styles/index.css";
+
 .wrapper {
   @apply flex
     max-w-2xl

@@ -1,11 +1,13 @@
+@reference "../../../styles/index.css";
+
 .container {
   @apply max-w-full
     flex-1;
 }
 
 .subtitle {
-  @apply mb-2
-    mt-6
+  @apply mt-6
+    mb-2
     inline-block
     text-xs
     font-semibold

@@ -1,3 +1,5 @@
+@reference "../../../../styles/index.css";
+
 .icon {
   @apply size-4;
 }
@@ -1,3 +1,5 @@
+@reference "../../../../styles/index.css";
+
 .item {
   @apply flex
      max-w-fit

@@ -1,3 +1,5 @@
+@reference "../../../../styles/index.css";
+
 .link {
   @apply max-w-fit
     truncate;

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

@@ -1,10 +1,12 @@
+@reference "../../../styles/index.css";
+
 .button {
-  @apply px-4.5
-    relative
+  @apply relative
     inline-flex
     items-center
     justify-center
     gap-2
+    px-4.5
     py-2.5
     text-center
     font-semibold
@@ -105,9 +107,9 @@
     &::before {
       @apply bg-gradient-glow-backdrop
         absolute
-        left-0
-        right-0
         top-0
+        right-0
+        left-0
         -z-10
         mx-auto
         h-full
@@ -119,8 +121,8 @@
     &::after {
       @apply absolute
         -top-px
-        left-0
         right-0
+        left-0
         mx-auto
         h-px
         w-2/5

@@ -1,3 +1,5 @@
+@reference "../../../styles/index.css";
+
 .root {
   @apply w-full
     rounded
@@ -32,12 +34,12 @@
         }
 
         &:not(:empty:last-child)::after {
-          @apply w-4.5
-            font-ibm-plex-mono
+          @apply font-ibm-plex-mono
             absolute
-            left-0
             top-0
+            left-0
             mr-4
+            w-4.5
             text-right
             text-neutral-600
             [content:counter(line)]

@@ -1,3 +1,5 @@
+@reference "../../../styles/index.css";
+
 .root {
   > [role='tabpanel'] > :first-child {
     @apply rounded-t-none;

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

@@ -1,7 +1,9 @@
+@reference "../../../styles/index.css";
+
 .glowingBackdrop {
   @apply absolute
-    left-0
     top-0
+    left-0
     -z-10
     size-full
     opacity-50

@@ -1,3 +1,5 @@
+@reference "../../../styles/index.css";
+
 .languageDropdown {
   @apply h-9
     w-9

@@ -1,8 +1,10 @@
+@reference "../../../styles/index.css";
+
 .tabsList {
   @apply font-open-sans
     max-xs:hidden
-    mb-6
     mt-10
+    mb-6
     flex
     gap-2
     border-b

@@ -1,3 +1,5 @@
+@reference "../../../styles/index.css";
+
 .nodejsLogo {
   @apply h-6
     w-20;

@@ -1,3 +1,5 @@
+@reference "../../../styles/index.css";
+
 .root {
   @apply m-6
     rounded

@@ -1,3 +1,5 @@
+@reference "../../../../styles/index.css";
+
 .ellipsis {
   @apply w-10
     px-3

@@ -1,16 +1,18 @@
+@reference "../../../../styles/index.css";
+
 .listItem,
 .listItem:link,
 .listItem:active {
-  @apply aria-current:bg-green-600
-    aria-current:text-white
-    flex
+  @apply flex
     size-10
     items-center
     justify-center
     rounded
     px-3
     py-2.5
     text-neutral-800
+    aria-current:bg-green-600
+    aria-current:text-white
     motion-safe:transition-colors
     dark:text-neutral-200;
 

@@ -1,3 +1,5 @@
+@reference "../../../styles/index.css";
+
 .pagination {
   @apply grid
     items-center

@@ -1,3 +1,5 @@
+@reference "../../../styles/index.css";
+
 .root {
   @apply @container/preview
     relative
@@ -11,15 +13,15 @@
 
   &::after {
     @apply bg-gradient-radial
-      @md/preview:blur-3xl
       absolute
       inset-0
       m-auto
       aspect-square
       w-1/3
       rounded-full
       blur-2xl
-      content-[''];
+      content-['']
+      @md/preview:blur-3xl;
 
     &.announcements {
       @apply from-green-700/90;
@@ -35,15 +37,7 @@
   }
 
   .container {
-    @apply @sm/preview:text-base
-      @md/preview:gap-6
-      @md/preview:text-lg
-      @lg/preview:gap-8
-      @lg/preview:text-xl
-      @xl/preview:gap-12
-      @xl/preview:text-2xl
-      @2xl/preview:text-3xl
-      z-10
+    @apply z-10
       mx-auto
       flex
       w-2/3
@@ -53,29 +47,37 @@
       text-center
       text-xs
       font-semibold
-      text-white;
+      text-white
+      @sm/preview:text-base
+      @md/preview:gap-6
+      @md/preview:text-lg
+      @lg/preview:gap-8
+      @lg/preview:text-xl
+      @xl/preview:gap-12
+      @xl/preview:text-2xl
+      @2xl/preview:text-3xl;
 
     .hexagon {
-      @apply @md/preview:h-3/5
+      @apply absolute
+        inset-0
+        m-auto
+        size-full
+        @md/preview:h-3/5
         @md/preview:w-3/5
         @lg/preview:h-2/3
         @lg/preview:w-2/3
         @xl/preview:h-3/5
         @xl/preview:w-3/5
         @2xl/preview:h-2/3
-        @2xl/preview:w-2/3
-        absolute
-        inset-0
-        m-auto
-        size-full;
+        @2xl/preview:w-2/3;
     }
 
     .logo {
-      @apply @md/preview:size-14
+      @apply mx-auto
+        size-6
+        @md/preview:size-14
         @lg/preview:size-16
-        @xl/preview:size-20
-        mx-auto
-        size-6;
+        @xl/preview:size-20;
     }
   }
 }