From dfb61fa4f6fb224521ea4a5b5912f7ff9281a175 Mon Sep 17 00:00:00 2001 From: kodeFant Date: Fri, 6 Oct 2023 19:57:20 +0200 Subject: [PATCH 01/10] Replace nodejs buildsteps with pure nix --- Guide/tailwindcss.markdown | 70 +++++++++++++++++++++----------------- 1 file changed, 38 insertions(+), 32 deletions(-) diff --git a/Guide/tailwindcss.markdown b/Guide/tailwindcss.markdown index 9ec2d41d6..782c8e012 100644 --- a/Guide/tailwindcss.markdown +++ b/Guide/tailwindcss.markdown @@ -6,52 +6,62 @@ ## 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. +Yes, while bootstrap is the default CSS framework in IHP, you can use IHP together with TailwindCSS. This guide will help you set up the latest Tailwind version in your IHP project. -We will also have PostCSS added as part of the installation. PostCSS is used for nesting CSS, minifying, striping out comments, etc. ## 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 - -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. +### Installing Tailwind -For that open your projects `default.nix` and add `nodejs` to `otherDeps`: +In the `flake.nix`, add the `tailwindcss` package with recommended plugins. ```nix -otherDeps = p: with p; [ +packages = with pkgs; [ # Native dependencies, e.g. imagemagick - nodejs + (nodePackages.tailwindcss.overrideAttrs + (oa: { + 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: ```bash -devenv up +nix flake update ``` -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. -### Installing Tailwind +``` +$ tailwind +tailwindcss v3.2.7 -Install Tailwind along with PostCSS and some handy libraries via NPM: +Usage: + tailwindcss [--input input.css] [--output output.css] [--watch] [options...] + tailwindcss init [--full] [--postcss] [options...] -```bash -npm init -npm add tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/forms -``` +Commands: + init [options] -This will create `package.json` and `package-lock.json`. Make sure to commit both files to your git repository. +Options: + -i, --input Input file + -o, --output Output file + -w, --watch Watch for changes and rebuild as needed + -p, --poll Use polling instead of filesystem events when watching + --content Content paths to use for removing unused classes + --postcss Load custom PostCSS configuration + -m, --minify Minify the output + -c, --config Path to a custom config file + --no-autoprefixer Disable autoprefixer + -h, --help Display usage information +``` ### Configuring Tailwind @@ -67,7 +77,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 +114,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 + tailwind -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 +124,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 + tailwind -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** From e189dc809c2218916cd1bee565203e9b888e4960 Mon Sep 17 00:00:00 2001 From: kodeFant Date: Fri, 6 Oct 2023 20:07:54 +0200 Subject: [PATCH 02/10] Formatting etc --- Guide/tailwindcss.markdown | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/Guide/tailwindcss.markdown b/Guide/tailwindcss.markdown index 782c8e012..6a296eeff 100644 --- a/Guide/tailwindcss.markdown +++ b/Guide/tailwindcss.markdown @@ -6,32 +6,34 @@ ## Introduction -Yes, while bootstrap is the default CSS framework in IHP, you can use IHP together with TailwindCSS. This guide will help you set up the latest Tailwind version in your IHP project. - +Yes, while bootstrap is the default CSS framework in IHP, you can also use IHP together with Tailwind CSS. ## Installing -### Installing Tailwind +### Adding package to flake.nix -In the `flake.nix`, add the `tailwindcss` package with recommended plugins. +In the `flake.nix`, add the `tailwindcss` package with useful plugins. ```nix +... packages = with pkgs; [ # Native dependencies, e.g. imagemagick (nodePackages.tailwindcss.overrideAttrs (oa: { plugins = [ - nodePackages."@tailwindcss/aspect-ratio" - nodePackages."@tailwindcss/forms" - nodePackages."@tailwindcss/language-server" - nodePackages."@tailwindcss/line-clamp" - nodePackages."@tailwindcss/typography" + 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 nix flake update @@ -40,7 +42,7 @@ nix flake update After that, you should be able to verify that `tailwindcss` CLI is available in your project directory. ``` -$ tailwind +$ tailwindcss tailwindcss v3.2.7 Usage: @@ -114,7 +116,7 @@ We need to add a new build command for starting a tailwind build process to our ```makefile tailwind-dev: - 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** @@ -125,7 +127,7 @@ For production builds, we also need a new make target: ```makefile static/app.css: - 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** From ad89f8ceb9a6dd39cbf3f0a65eff983cd959b18e Mon Sep 17 00:00:00 2001 From: kodeFant Date: Fri, 6 Oct 2023 20:30:58 +0200 Subject: [PATCH 03/10] Minor fix on text --- Guide/tailwindcss.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Guide/tailwindcss.markdown b/Guide/tailwindcss.markdown index 6a296eeff..6c7e45ef5 100644 --- a/Guide/tailwindcss.markdown +++ b/Guide/tailwindcss.markdown @@ -12,7 +12,7 @@ Yes, while bootstrap is the default CSS framework in IHP, you can also use IHP t ### Adding package to flake.nix -In the `flake.nix`, add the `tailwindcss` package with useful plugins. +In the `flake.nix`, add the `tailwindcss` package bundled with the most common official plugins. ```nix ... From 20035792ae154d70c91ef41c510ba28b81deb34c Mon Sep 17 00:00:00 2001 From: kodeFant Date: Fri, 6 Oct 2023 20:38:17 +0200 Subject: [PATCH 04/10] Remove legacy config defaults --- Guide/search/package-lock.json | 58 ++++++++++++++++++++++++++++++++++ Guide/tailwindcss.markdown | 5 +-- flake.lock | 12 +++---- 3 files changed, 67 insertions(+), 8 deletions(-) diff --git a/Guide/search/package-lock.json b/Guide/search/package-lock.json index c41bd2464..47ede91d4 100644 --- a/Guide/search/package-lock.json +++ b/Guide/search/package-lock.json @@ -177,6 +177,29 @@ "react-dom": ">= 16.8.0 < 18.0.0" } }, + "node_modules/@types/prop-types": { + "version": "15.7.8", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.8.tgz", + "integrity": "sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==", + "peer": true + }, + "node_modules/@types/react": { + "version": "17.0.67", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.67.tgz", + "integrity": "sha512-zE76EIJ0Y58Oy9yDX/9csb/NuKjt0Eq2YgWb/8Wxo91YmuLzzbyiRoaqJE9h8iDlsT7n35GdpoLomHlaB1kFbg==", + "peer": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.4.tgz", + "integrity": "sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==", + "peer": true + }, "node_modules/algoliasearch": { "version": "4.10.5", "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.10.5.tgz", @@ -198,6 +221,12 @@ "@algolia/transporter": "4.10.5" } }, + "node_modules/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", + "peer": true + }, "node_modules/esbuild": { "version": "0.13.2", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.13.2.tgz", @@ -629,6 +658,29 @@ "algoliasearch": "^4.0.0" } }, + "@types/prop-types": { + "version": "15.7.8", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.8.tgz", + "integrity": "sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==", + "peer": true + }, + "@types/react": { + "version": "17.0.67", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.67.tgz", + "integrity": "sha512-zE76EIJ0Y58Oy9yDX/9csb/NuKjt0Eq2YgWb/8Wxo91YmuLzzbyiRoaqJE9h8iDlsT7n35GdpoLomHlaB1kFbg==", + "peer": true, + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "@types/scheduler": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.4.tgz", + "integrity": "sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==", + "peer": true + }, "algoliasearch": { "version": "4.10.5", "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.10.5.tgz", @@ -650,6 +702,12 @@ "@algolia/transporter": "4.10.5" } }, + "csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", + "peer": true + }, "esbuild": { "version": "0.13.2", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.13.2.tgz", diff --git a/Guide/tailwindcss.markdown b/Guide/tailwindcss.markdown index 6c7e45ef5..a8ff685dc 100644 --- a/Guide/tailwindcss.markdown +++ b/Guide/tailwindcss.markdown @@ -217,9 +217,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 () ``` diff --git a/flake.lock b/flake.lock index 70270fc75..5a1756a44 100644 --- a/flake.lock +++ b/flake.lock @@ -488,17 +488,17 @@ }, "nixpkgs_2": { "locked": { - "lastModified": 1696172942, - "narHash": "sha256-hKlB5InxJjDxLy5NJ4tQKEJ39Om81H87uoo0HHBG2UU=", - "owner": "mpscholten", + "lastModified": 1696291921, + "narHash": "sha256-isKgVAoUxuxYEuO3Q4xhbfKcZrF/+UkJtOTv0eb/W5E=", + "owner": "NixOS", "repo": "nixpkgs", - "rev": "3cdb4f45a50eb2a6a1a65f324e8243cedef4b19c", + "rev": "ea0284a3da391822909be5e98a60c1e62572a7dc", "type": "github" }, "original": { - "owner": "mpscholten", - "ref": "fix-ghc-m1-issue", + "owner": "NixOS", "repo": "nixpkgs", + "rev": "ea0284a3da391822909be5e98a60c1e62572a7dc", "type": "github" } }, From 0b1bf61f4b804d6e1938f38bfab4d3d409e4cbb8 Mon Sep 17 00:00:00 2001 From: kodeFant Date: Fri, 6 Oct 2023 20:44:59 +0200 Subject: [PATCH 05/10] Revert stuff irrelevant to this issue --- Guide/search/package-lock.json | 58 ---------------------------------- flake.lock | 12 +++---- 2 files changed, 6 insertions(+), 64 deletions(-) diff --git a/Guide/search/package-lock.json b/Guide/search/package-lock.json index 47ede91d4..c41bd2464 100644 --- a/Guide/search/package-lock.json +++ b/Guide/search/package-lock.json @@ -177,29 +177,6 @@ "react-dom": ">= 16.8.0 < 18.0.0" } }, - "node_modules/@types/prop-types": { - "version": "15.7.8", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.8.tgz", - "integrity": "sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==", - "peer": true - }, - "node_modules/@types/react": { - "version": "17.0.67", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.67.tgz", - "integrity": "sha512-zE76EIJ0Y58Oy9yDX/9csb/NuKjt0Eq2YgWb/8Wxo91YmuLzzbyiRoaqJE9h8iDlsT7n35GdpoLomHlaB1kFbg==", - "peer": true, - "dependencies": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" - } - }, - "node_modules/@types/scheduler": { - "version": "0.16.4", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.4.tgz", - "integrity": "sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==", - "peer": true - }, "node_modules/algoliasearch": { "version": "4.10.5", "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.10.5.tgz", @@ -221,12 +198,6 @@ "@algolia/transporter": "4.10.5" } }, - "node_modules/csstype": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", - "peer": true - }, "node_modules/esbuild": { "version": "0.13.2", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.13.2.tgz", @@ -658,29 +629,6 @@ "algoliasearch": "^4.0.0" } }, - "@types/prop-types": { - "version": "15.7.8", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.8.tgz", - "integrity": "sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==", - "peer": true - }, - "@types/react": { - "version": "17.0.67", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.67.tgz", - "integrity": "sha512-zE76EIJ0Y58Oy9yDX/9csb/NuKjt0Eq2YgWb/8Wxo91YmuLzzbyiRoaqJE9h8iDlsT7n35GdpoLomHlaB1kFbg==", - "peer": true, - "requires": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" - } - }, - "@types/scheduler": { - "version": "0.16.4", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.4.tgz", - "integrity": "sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==", - "peer": true - }, "algoliasearch": { "version": "4.10.5", "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.10.5.tgz", @@ -702,12 +650,6 @@ "@algolia/transporter": "4.10.5" } }, - "csstype": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", - "peer": true - }, "esbuild": { "version": "0.13.2", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.13.2.tgz", diff --git a/flake.lock b/flake.lock index 5a1756a44..70270fc75 100644 --- a/flake.lock +++ b/flake.lock @@ -488,17 +488,17 @@ }, "nixpkgs_2": { "locked": { - "lastModified": 1696291921, - "narHash": "sha256-isKgVAoUxuxYEuO3Q4xhbfKcZrF/+UkJtOTv0eb/W5E=", - "owner": "NixOS", + "lastModified": 1696172942, + "narHash": "sha256-hKlB5InxJjDxLy5NJ4tQKEJ39Om81H87uoo0HHBG2UU=", + "owner": "mpscholten", "repo": "nixpkgs", - "rev": "ea0284a3da391822909be5e98a60c1e62572a7dc", + "rev": "3cdb4f45a50eb2a6a1a65f324e8243cedef4b19c", "type": "github" }, "original": { - "owner": "NixOS", + "owner": "mpscholten", + "ref": "fix-ghc-m1-issue", "repo": "nixpkgs", - "rev": "ea0284a3da391822909be5e98a60c1e62572a7dc", "type": "github" } }, From bd0b6a649a5254c1ad15a42f88abf13528e54a7e Mon Sep 17 00:00:00 2001 From: Lars Lillo Ulvestad Date: Fri, 6 Oct 2023 21:49:18 +0200 Subject: [PATCH 06/10] Update Guide/tailwindcss.markdown Co-authored-by: Amitai Burstein --- Guide/tailwindcss.markdown | 1 + 1 file changed, 1 insertion(+) diff --git a/Guide/tailwindcss.markdown b/Guide/tailwindcss.markdown index a8ff685dc..cb2666207 100644 --- a/Guide/tailwindcss.markdown +++ b/Guide/tailwindcss.markdown @@ -12,6 +12,7 @@ Yes, while bootstrap is the default CSS framework in IHP, you can also use IHP t ### Adding package to flake.nix +While it's possible to have `nodejs` installed via nix, and then have npm install TailwindCSS, we can skip that part and have nix install the tailwindcss CLI itself. In the `flake.nix`, add the `tailwindcss` package bundled with the most common official plugins. ```nix From f0d0bdf7a5447f8698e0d06bc20aa96745958456 Mon Sep 17 00:00:00 2001 From: Lars Lillo Ulvestad Date: Fri, 6 Oct 2023 21:53:27 +0200 Subject: [PATCH 07/10] Update Guide/tailwindcss.markdown Co-authored-by: Amitai Burstein --- Guide/tailwindcss.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Guide/tailwindcss.markdown b/Guide/tailwindcss.markdown index cb2666207..5566e7e37 100644 --- a/Guide/tailwindcss.markdown +++ b/Guide/tailwindcss.markdown @@ -40,7 +40,7 @@ Rebuild your development environment to fetch the added package: nix flake update ``` -After that, you should be able to verify that `tailwindcss` CLI is available in your project directory. +After that, you should be able to verify that `tailwindcss` CLI is available in your project directory. Note that the version you will see is the latest release. ``` $ tailwindcss From eaf2eba15c6c3e63fcd186df219bb7a212e21f64 Mon Sep 17 00:00:00 2001 From: kodeFant Date: Fri, 6 Oct 2023 22:00:25 +0200 Subject: [PATCH 08/10] Revise text --- Guide/tailwindcss.markdown | 29 +++++------------------------ 1 file changed, 5 insertions(+), 24 deletions(-) diff --git a/Guide/tailwindcss.markdown b/Guide/tailwindcss.markdown index 5566e7e37..80a664418 100644 --- a/Guide/tailwindcss.markdown +++ b/Guide/tailwindcss.markdown @@ -12,7 +12,8 @@ Yes, while bootstrap is the default CSS framework in IHP, you can also use IHP t ### Adding package to flake.nix -While it's possible to have `nodejs` installed via nix, and then have npm install TailwindCSS, we can skip that part and have nix install the tailwindcss CLI itself. +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. + In the `flake.nix`, add the `tailwindcss` package bundled with the most common official plugins. ```nix @@ -37,33 +38,13 @@ packages = with pkgs; [ Rebuild your development environment to fetch the added package: ```bash -nix flake update +direnv allow ``` -After that, you should be able to verify that `tailwindcss` CLI is available in your project directory. Note that the version you will see is the latest release. +After that, you should be able to verify that `tailwindcss` CLI is available in your project directory by executing it from your shell. ``` -$ tailwindcss -tailwindcss v3.2.7 - -Usage: - tailwindcss [--input input.css] [--output output.css] [--watch] [options...] - tailwindcss init [--full] [--postcss] [options...] - -Commands: - init [options] - -Options: - -i, --input Input file - -o, --output Output file - -w, --watch Watch for changes and rebuild as needed - -p, --poll Use polling instead of filesystem events when watching - --content Content paths to use for removing unused classes - --postcss Load custom PostCSS configuration - -m, --minify Minify the output - -c, --config Path to a custom config file - --no-autoprefixer Disable autoprefixer - -h, --help Display usage information +tailwindcss ``` ### Configuring Tailwind From e812787d3146bb9a1998880aa7b8e722506a0208 Mon Sep 17 00:00:00 2001 From: kodeFant Date: Fri, 6 Oct 2023 22:01:55 +0200 Subject: [PATCH 09/10] use direnv reload --- Guide/tailwindcss.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Guide/tailwindcss.markdown b/Guide/tailwindcss.markdown index 80a664418..62ce36780 100644 --- a/Guide/tailwindcss.markdown +++ b/Guide/tailwindcss.markdown @@ -38,7 +38,7 @@ packages = with pkgs; [ Rebuild your development environment to fetch the added package: ```bash -direnv allow +direnv reload ``` After that, you should be able to verify that `tailwindcss` CLI is available in your project directory by executing it from your shell. From 2a8f06484147789c9e8bfe6b0723f6827903a4fb Mon Sep 17 00:00:00 2001 From: Lars Lillo Ulvestad Date: Sat, 7 Oct 2023 09:02:54 +0200 Subject: [PATCH 10/10] Update Guide/tailwindcss.markdown --- Guide/tailwindcss.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Guide/tailwindcss.markdown b/Guide/tailwindcss.markdown index 62ce36780..24e25934c 100644 --- a/Guide/tailwindcss.markdown +++ b/Guide/tailwindcss.markdown @@ -21,7 +21,7 @@ In the `flake.nix`, add the `tailwindcss` package bundled with the most common o packages = with pkgs; [ # Native dependencies, e.g. imagemagick (nodePackages.tailwindcss.overrideAttrs - (oa: { + (_: { plugins = [ nodePackages."@tailwindcss/aspect-ratio" nodePackages."@tailwindcss/forms"