Tailwind nixpkgs (#1839)

* Replace nodejs buildsteps with pure nix * Formatting etc * Minor fix on text * Remove legacy config defaults * Revert stuff irrelevant to this issue * Update Guide/tailwindcss.markdown Co-authored-by: Amitai Burstein <[email protected]> * Update Guide/tailwindcss.markdown Co-authored-by: Amitai Burstein <[email protected]> * Revise text * use direnv reload * Update Guide/tailwindcss.markdown --------- Co-authored-by: Amitai Burstein <[email protected]>
digitallyinduced · Oct 7, 2023 · 776b19b · 776b19b
1 parent 4f1c9fb
commit 776b19b
Showing 1 changed file with 28 additions and 37 deletions.
diff --git a/Guide/tailwindcss.markdown b/Guide/tailwindcss.markdown
@@ -6,52 +6,46 @@
 
 ## Introduction
 
-Yes, while bootstrap is the default CSS framework in IHP, you can use IHP together with TailwindCSS (TW in short). This guide will help you set up the latest Tailwind version in your IHP project. We will be leveraging the TW's [JIT](https://tailwindcss.com/docs/just-in-time-mode) mode.
-
-We will also have PostCSS added as part of the installation. PostCSS is used for nesting CSS, minifying, striping out comments, etc.
+Yes, while bootstrap is the default CSS framework in IHP, you can also use IHP together with Tailwind CSS.
 
 ## Installing
 
-### Standalone CLI
-
-Tailwind offers a Standalone CLI for frameworks like IHP, Rails and Phoenix as an alternative to installing npm just for the sake of Tailwind.
-
-You can follow the [official article](https://tailwindcss.com/blog/standalone-cli) for checking a standalone Tailwind binary into your project.
-
-If you require cross-platform support, [ihp-tailwind-bootstrapper](https://github.com/ship-nix/ihp-tailwind-bootstrapper) uses Tailwind's official binaries and let's you automatically use the correct one for your system. Only the binary used for deployment is checked into version control.
-
-
-### NodeJS
+### Adding package to flake.nix
 
-First, we need to add NodeJS to our project. **You should also follow this step if you have NodeJS already installed on your system.** Installing the NodeJS version via nix allows all people working on your project to get the same NodeJS version as you're using.
+While it's possible to have `nodejs` installed via nix, and then have npm install Tailwind CSS, we can skip that part and have nix install the CLI directly.
 
-For that open your projects `default.nix` and add `nodejs` to `otherDeps`:
+In the `flake.nix`, add the `tailwindcss` package bundled with the most common official plugins.
 
 ```nix
-otherDeps = p: with p; [
+...
+packages = with pkgs; [
     # Native dependencies, e.g. imagemagick
-    nodejs
+    (nodePackages.tailwindcss.overrideAttrs
+        (_: {
+            plugins = [
+                nodePackages."@tailwindcss/aspect-ratio"
+                nodePackages."@tailwindcss/forms"
+                nodePackages."@tailwindcss/language-server"
+                nodePackages."@tailwindcss/line-clamp"
+                nodePackages."@tailwindcss/typography"
+            ];
+        })
+    )
 ];
+...
 ```
 
-Now you need to rebuild your local development environment:
+Rebuild your development environment to fetch the added package:
 
 ```bash
-devenv up
+direnv reload
 ```
 
-After that, you have `node` and `npm` available in your project.
+After that, you should be able to verify that `tailwindcss` CLI is available in your project directory by executing it from your shell.
 
-### Installing Tailwind
-
-Install Tailwind along with PostCSS and some handy libraries via NPM:
-
-```bash
-npm init
-npm add tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/forms
 ```
-
-This will create `package.json` and `package-lock.json`. Make sure to commit both files to your git repository.
+tailwindcss
+```
 
 ### Configuring Tailwind
 
@@ -67,7 +61,6 @@ Create the tailwind configuration file at `tailwind/tailwind.config.js` with the
 const plugin = require('tailwindcss/plugin');
 
 module.exports = {
-    mode: 'jit',
     theme: {
         extend: {
         },
@@ -105,7 +98,7 @@ We need to add a new build command for starting a tailwind build process to our
 
 ```makefile
 tailwind-dev:
-	node_modules/.bin/tailwind -c tailwind/tailwind.config.js -i ./tailwind/app.css -o static/app.css --watch
+	tailwindcss -c tailwind/tailwind.config.js -i ./tailwind/app.css -o static/app.css --watch
 ```
 
 **Make requires tab characters instead of 4 spaces in the second line. Make sure you're using a tab character when pasting this into the file**
@@ -115,11 +108,8 @@ This defines a new command `make tailwind-dev` that runs `npx tailwindcss build`
 For production builds, we also need a new make target:
 
 ```makefile
-node_modules:
-    NODE_ENV=production npm ci
-
 static/app.css:
-	NODE_ENV=production node_modules/.bin/tailwind -c tailwind/tailwind.config.js -i ./tailwind/app.css -o static/app.css --minify
+	tailwindcss -c tailwind/tailwind.config.js -i ./tailwind/app.css -o static/app.css --minify
 ```
 
 **Make requires tab characters instead of 4 spaces in the second line. Make sure you're using a tab character when pasting this into the file**
@@ -209,9 +199,10 @@ import Web.View.CustomCSSFramework -- ADD THIS IMPORT
 
 config :: ConfigBuilder
 config = do
-    option Development
-    option (AppHostname "localhost")
+    -- See https://ihp.digitallyinduced.com/Guide/config.html
+    -- for what you can do here
     option customTailwind -- ADD THIS OPTION
+    pure ()
 ```