Tailwind CSS and data attributes

tailwindcss/.envrc

@@ -0,0 +1 @@
+use flake

tailwindcss/.gitignore

@@ -0,0 +1 @@
+/tailwind.css

tailwindcss/data-attributes.html

@@ -0,0 +1,13 @@
+<link href="/tailwind.css" rel="stylesheet" />
+
+<div class="p-10 flex gap-4">
+  <div class="size-30 bg-red-500"></div>
+
+  <!-- Styling based on a data attribute on the element. -->
+  <div class="size-30 bg-red-500 data-[theme=blue]:bg-blue-500" data-theme="blue"></div>
+
+  <!-- Styling based on a data attribute on a parent element. -->
+  <div class="group" data-theme="banana">
+    <div class="size-30 bg-red-500 group-data-[theme=banana]:bg-yellow-500"></div>
+  </div>
+</div>

tailwindcss/flake.lock

@@ -0,0 +1,82 @@
+{
+  "nodes": {
+    "devshell": {
+      "inputs": {
+        "nixpkgs": [
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1741473158,
+        "narHash": "sha256-kWNaq6wQUbUMlPgw8Y+9/9wP0F8SHkjy24/mN3UAppg=",
+        "owner": "numtide",
+        "repo": "devshell",
+        "rev": "7c9e793ebe66bcba8292989a68c0419b737a22a0",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "devshell",
+        "type": "github"
+      }
+    },
+    "flake-parts": {
+      "inputs": {
+        "nixpkgs-lib": "nixpkgs-lib"
+      },
+      "locked": {
+        "lastModified": 1754091436,
+        "narHash": "sha256-XKqDMN1/Qj1DKivQvscI4vmHfDfvYR2pfuFOJiCeewM=",
+        "owner": "hercules-ci",
+        "repo": "flake-parts",
+        "rev": "67df8c627c2c39c41dbec76a1f201929929ab0bd",
+        "type": "github"
+      },
+      "original": {
+        "owner": "hercules-ci",
+        "repo": "flake-parts",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1754214453,
+        "narHash": "sha256-Q/I2xJn/j1wpkGhWkQnm20nShYnG7TI99foDBpXm1SY=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "5b09dc45f24cf32316283e62aec81ffee3c3e376",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs-lib": {
+      "locked": {
+        "lastModified": 1753579242,
+        "narHash": "sha256-zvaMGVn14/Zz8hnp4VWT9xVnhc8vuL3TStRqwk22biA=",
+        "owner": "nix-community",
+        "repo": "nixpkgs.lib",
+        "rev": "0f36c44e01a6129be94e3ade315a5883f0228a6e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-community",
+        "repo": "nixpkgs.lib",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "devshell": "devshell",
+        "flake-parts": "flake-parts",
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

tailwindcss/flake.nix

@@ -0,0 +1,42 @@
+{
+  inputs = {
+    devshell.inputs.nixpkgs.follows = "nixpkgs";
+    devshell.url = "github:numtide/devshell";
+
+    flake-parts.url = "github:hercules-ci/flake-parts";
+
+    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+  };
+
+  outputs =
+    inputs:
+    inputs.flake-parts.lib.mkFlake { inherit inputs; } {
+      systems = [ "x86_64-linux" ];
+
+      imports = [ inputs.devshell.flakeModule ];
+
+      perSystem =
+        { pkgs, ... }:
+        {
+          devshells.default = {
+            packages = [
+              (pkgs.writeShellApplication {
+                name = "serve";
+
+                runtimeInputs = with pkgs; [
+                  simple-http-server
+                  tailwindcss_4
+                  watchman
+                ];
+
+                text = ''
+                  simple-http-server --index --nocache "$@" & \
+                  tailwindcss --output tailwind.css --watch & \
+                  wait
+                '';
+              })
+            ];
+          };
+        };
+    };
+}