Use the standalone cli for tailwind

flake.nix

@@ -13,6 +13,7 @@
   flake-utils.lib.eachDefaultSystem (system:
     let
       pkgs = nixpkgs.legacyPackages.${system};
+      tailwindcss-cli = pkgs.callPackage ./tailwind {};
       hp = pkgs.haskellPackages.override ( old: {
         overrides = pkgs.lib.composeExtensions ( old.overrides or (_: _: {})) (f: p: {
           build-rauhala-info = f.callPackage ./site {};
@@ -31,8 +32,8 @@
           entr
           haskell-language-server
           ipfs
-          nodePackages.npm
+
-          node2nix
+          tailwindcss-cli
         ];
       };
     });

rauhala.info/css/index.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.0 | MIT License | https://tailwindcss.com
+! tailwindcss v3.3.1 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -562,35 +562,11 @@ video {
   inset: 0px;
 }
 
-.z-10 {
-  z-index: 10;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
 
-.mt-10 {
-  margin-top: 2.5rem;
-}
-
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
-.mt-5 {
-  margin-top: 1.25rem;
-}
-
-.mt-8 {
-  margin-top: 2rem;
-}
-
 .mb-10 {
   margin-bottom: 2.5rem;
 }
@@ -599,15 +575,12 @@ video {
   margin-right: 2.5rem;
 }
 
-.ml-10 {
+.mt-10 {
-  margin-left: 2.5rem;
+  margin-top: 2.5rem;
 }
 
-.line-clamp-3 {
+.mt-3 {
-  overflow: hidden;
+  margin-top: 0.75rem;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
 }
 
 .flex {
@@ -618,14 +591,6 @@ video {
   display: grid;
 }
 
-.h-10 {
-  height: 2.5rem;
-}
-
-.w-10 {
-  width: 2.5rem;
-}
-
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -646,10 +611,6 @@ video {
   flex-shrink: 1;
 }
 
-.grow {
-  flex-grow: 1;
-}
-
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -688,32 +649,16 @@ video {
   row-gap: 4rem;
 }
 
-.justify-self-center {
-  justify-self: center;
-}
-
-.rounded-full {
-  border-radius: 9999px;
-}
-
 .rounded {
   border-radius: 0.25rem;
 }
 
-.border {
-  border-width: 1px;
-}
-
-.border-t {
-  border-top-width: 1px;
-}
-
 .border-b {
   border-bottom-width: 1px;
 }
 
-.border-r {
+.border-t {
-  border-right-width: 1px;
+  border-top-width: 1px;
 }
 
 .border-gray-200 {
@@ -721,28 +666,14 @@ video {
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.bg-gray-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-}
-
 .bg-gray-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
-.p-4 {
+.bg-white {
-  padding: 1rem;
+  --tw-bg-opacity: 1;
-}
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-
-.py-24 {
-  padding-top: 6rem;
-  padding-bottom: 6rem;
 }
 
 .px-3 {
@@ -755,65 +686,28 @@ video {
   padding-right: 1.5rem;
 }
 
-.py-1 {
+.py-24 {
-  padding-top: 0.25rem;
+  padding-top: 6rem;
-  padding-bottom: 0.25rem;
+  padding-bottom: 6rem;
-}
-
-.py-1\.5 {
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
-}
-
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
 }
 
 .pt-10 {
   padding-top: 2.5rem;
 }
 
-.font-sans {
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
-}
-
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
 }
 
-.font-bold {
+.text-lg {
-  font-weight: 700;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
 }
 
-.font-medium {
+.text-xs {
-  font-weight: 500;
+  font-size: 0.75rem;
+  line-height: 1rem;
 }
 
 .font-semibold {
@@ -824,16 +718,9 @@ video {
   line-height: 1.5rem;
 }
 
-.leading-8 {
+.text-gray-300 {
-  line-height: 2rem;
+  --tw-text-opacity: 1;
-}
+  color: rgb(209 213 219 / var(--tw-text-opacity));
-
-.leading-tight {
-  line-height: 1.25;
-}
-
-.tracking-tight {
-  letter-spacing: -0.025em;
 }
 
 .text-gray-500 {
@@ -841,44 +728,15 @@ video {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
-.text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
-}
-
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.text-gray-400 {
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
-}
-
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-.text-gray-300 {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
-}
-
-.first\:border-0:first-child {
-  border-width: 0px;
-}
-
 .first\:border-none:first-child {
   border-style: none;
 }
 
-.hover\:bg-gray-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
 .hover\:text-gray-400:hover {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -902,11 +760,6 @@ video {
   .sm\:pt-16 {
     padding-top: 4rem;
   }
-
-  .sm\:text-4xl {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-  }
 }
 
 @media (min-width: 1024px) {

tailwind/default.nix

@@ -0,0 +1,20 @@
+{ lib, stdenv, fetchurl }:
+
+stdenv.mkDerivation rec {
+  pname = "tailwindcss-cli";
+  version = "3.3.1";
+  src = fetchurl {
+    url = "https://github.com/tailwindlabs/tailwindcss/releases/download/v${version}/tailwindcss-linux-x64";
+    sha256 = "sha256-i1ekM61t0SXR+iw9K9Z0y7cm3W4uQ4Kxodt/NK9fywg=";
+  };
+  dontUnpack = true;
+  dontStrip = true;
+  buildPhase = ''
+  cp $src tailwindcss
+  chmod u+x tailwindcss
+  '';
+  installPhase = ''
+  mkdir -p $out/bin
+  cp tailwindcss $out/bin/tailwindcss
+  '';
+}