tailwind v4

.prettierignore

@@ -2,7 +2,7 @@
 /.direnv/
 /.vscode/
 /dist/
-pnpm-lock.yaml
+package-lock.json
 *.d.ts
 **/*.mdx
 src/components/Posthog.astro

README.md

@@ -12,9 +12,6 @@ Make sure that you have Nix and [direnv] installed, then:
 ```shell
 # Activate Nix development environment
 direnv allow
-
-# Recommended
-alias npm=pnpm
 ```
 
 ## Developing the site
@@ -159,7 +156,6 @@ We also recommend adding these settings to your local `.vscode/settings.json`:
     "**/.git": true,
     "**/node_modules": true,
     "dist": true,
-    "pnpm-lock.yaml": true,
     "*.d.ts": true,
     "tmp": true,
   },

astro.config.mjs

@@ -2,9 +2,10 @@ import alpinejs from "@astrojs/alpinejs";
 import mdx from "@astrojs/mdx";
 import react from "@astrojs/react";
 import sitemap from "@astrojs/sitemap";
-import tailwind from "@astrojs/tailwind";
 import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
 import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
+import typography from "@tailwindcss/typography";
+import tailwindcss from "@tailwindcss/vite";
 import expressiveCode from "astro-expressive-code";
 import icon from "astro-icon";
 import { defineConfig } from "astro/config";
@@ -35,7 +36,6 @@ export default defineConfig({
       remarkPlugins: [remarkEmoji, remarkHeadingId],
     }),
     sitemap(),
-    tailwind(),
     react(),
   ],
   markdown: {
@@ -55,4 +55,7 @@ export default defineConfig({
     port: 3000,
   },
   site: "https://zero-to-nix.com",
+  vite: {
+    plugins: [tailwindcss({ plugins: [typography] })],
+  },
 });

flake.nix

@@ -44,8 +44,7 @@
             lychee
 
             # JS
-            nodejs
-            pnpm
+            nodejs_latest
 
             # Serve locally
             static-web-server
@@ -60,26 +59,31 @@
             };
 
           scripts = with pkgs; [
-            (script "setup" [ pnpm ] "pnpm install")
+            (script "pnpm" [ ] ''
+              echo "pnpm is no longer used in this repo; use npm instead"
+              exit 1
+            '')
+
+            (script "setup" [ nodejs_latest ] "npm ci")
 
-            (script "build" [ pnpm ] ''
+            (script "build" [ nodejs_latest ] ''
               setup
-              pnpm run build
+              npm run build
             '')
 
-            (script "build-ci" [ pnpm ] ''
+            (script "build-ci" [ nodejs_latest ] ''
               setup
-              ENV=ci pnpm run build
+              ENV=ci npm run build
             '')
 
-            (script "dev" [ pnpm ] ''
+            (script "dev" [ nodejs_latest ] ''
               setup
-              pnpm run dev
+              npm run dev
             '')
 
-            (script "format" [ pnpm ] ''
+            (script "format" [ nodejs_latest ] ''
               setup
-              pnpm run format
+              npm run format
             '')
 
             (script "check-internal-links" [ htmltest ] ''
@@ -90,9 +94,9 @@
               vale src/pages
             '')
 
-            (script "preview" [ pnpm ] ''
+            (script "preview" [ nodejs_latest ] ''
               build
-              pnpm run preview
+              npm run preview
             '')
 
             (script "check-nix-formatting" [ nixfmt-rfc-style ] ''

netlify.toml

@@ -1,5 +1,5 @@
 [build]
-command = "./scripts/netlify-redirects.sh >> netlify.toml && pnpm run build"
+command = "./scripts/netlify-redirects.sh >> netlify.toml && npm run build"
 publish = "dist"
 
 [context.production]