From 36d5962f2428eb623edf24473e73769aa09d0ce9 Mon Sep 17 00:00:00 2001
From: Abi <46168827+Abdullah85MBA@users.noreply.github.com>
Date: Sat, 4 Oct 2025 19:04:09 +0100
Subject: [PATCH 1/3] CodeCanvas: Save
---
tailwindcss.CodeCanvas | 6378 ++++++++++++++++++++++++++++++++++++++++
1 file changed, 6378 insertions(+)
create mode 100644 tailwindcss.CodeCanvas
diff --git a/tailwindcss.CodeCanvas b/tailwindcss.CodeCanvas
new file mode 100644
index 000000000000..b37bb776b30e
--- /dev/null
+++ b/tailwindcss.CodeCanvas
@@ -0,0 +1,6378 @@
+{
+ "drawioXML": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n",
+ "fileName": "",
+ "fileURL": "github",
+ "repoData": {
+ "crates": {
+ "path": "crates",
+ "fileName": "crates",
+ "cellName": "crates",
+ "cellId": "69cd5b59-55ce-4dca-be52-218e92d88ee7",
+ "visible": true,
+ "children": [
+ "crates/node",
+ "crates/oxide",
+ "crates/ignore"
+ ]
+ },
+ "crates/ignore": {
+ "path": "crates/ignore",
+ "fileName": "ignore",
+ "cellName": "ignore",
+ "cellId": "8b8d7829-1345-4a9f-888e-179f388aa019",
+ "visible": true,
+ "parentCellId": "69cd5b59-55ce-4dca-be52-218e92d88ee7",
+ "children": [
+ "crates/ignore/src"
+ ]
+ },
+ "crates/ignore/src": {
+ "path": "crates/ignore/src",
+ "fileName": "src",
+ "cellName": "src",
+ "cellId": "629e315e-a831-419d-9497-3095c8682a2c",
+ "visible": true,
+ "parentCellId": "8b8d7829-1345-4a9f-888e-179f388aa019",
+ "children": [
+ "crates/ignore/src/walk.rs"
+ ]
+ },
+ "crates/ignore/src/walk.rs": {
+ "path": "crates/ignore/src/walk.rs",
+ "fileName": "walk.rs",
+ "cellName": "walk.rs",
+ "cellId": "1244f936-3470-4cec-a183-82050790decb",
+ "visible": true,
+ "parentCellId": "629e315e-a831-419d-9497-3095c8682a2c",
+ "children": [
+ "crates/ignore/src/walk.rs-simstep-13a986da-a534-4196-b808-d8de4f9a0a8a"
+ ]
+ },
+ "crates/node": {
+ "path": "crates/node",
+ "fileName": "node",
+ "cellName": "node",
+ "cellId": "036071af-66af-47ba-8024-c75ac0d7943c",
+ "visible": true,
+ "parentCellId": "69cd5b59-55ce-4dca-be52-218e92d88ee7",
+ "children": [
+ "crates/node/src"
+ ]
+ },
+ "crates/node/src": {
+ "path": "crates/node/src",
+ "fileName": "src",
+ "cellName": "src",
+ "cellId": "c26839de-96f5-4ae4-b17f-939fca7a8d36",
+ "visible": true,
+ "parentCellId": "036071af-66af-47ba-8024-c75ac0d7943c",
+ "children": [
+ "crates/node/src/lib.rs"
+ ]
+ },
+ "crates/node/src/lib.rs": {
+ "path": "crates/node/src/lib.rs",
+ "fileName": "lib.rs",
+ "cellName": "lib.rs",
+ "cellId": "a11486ec-9812-484b-bbc9-28e0cdb8b368",
+ "visible": true,
+ "parentCellId": "c26839de-96f5-4ae4-b17f-939fca7a8d36",
+ "children": [
+ "crates/node/src/lib.rs-simstep-eda16679-649a-455b-8094-c9fb4a3423c6"
+ ]
+ },
+ "crates/oxide": {
+ "path": "crates/oxide",
+ "fileName": "oxide",
+ "cellName": "oxide",
+ "cellId": "aa99a857-fcc1-42ee-a1c6-0dc76a93ebc4",
+ "visible": true,
+ "parentCellId": "69cd5b59-55ce-4dca-be52-218e92d88ee7",
+ "children": [
+ "crates/oxide/src"
+ ]
+ },
+ "crates/oxide/src": {
+ "path": "crates/oxide/src",
+ "fileName": "src",
+ "cellName": "src",
+ "cellId": "6ab2ff5a-6aab-4726-9d64-7368429e7a76",
+ "visible": true,
+ "parentCellId": "aa99a857-fcc1-42ee-a1c6-0dc76a93ebc4",
+ "children": [
+ "crates/oxide/src/scanner",
+ "crates/oxide/src/main.rs",
+ "crates/oxide/src/extractor"
+ ]
+ },
+ "crates/oxide/src/extractor": {
+ "path": "crates/oxide/src/extractor",
+ "fileName": "extractor",
+ "cellName": "extractor",
+ "cellId": "81e0fe1a-06e9-49f5-b8ee-71d5246c8539",
+ "visible": true,
+ "parentCellId": "6ab2ff5a-6aab-4726-9d64-7368429e7a76",
+ "children": [
+ "crates/oxide/src/extractor/utility_machine.rs",
+ "crates/oxide/src/extractor/named_utility_machine.rs"
+ ]
+ },
+ "crates/oxide/src/extractor/named_utility_machine.rs": {
+ "path": "crates/oxide/src/extractor/named_utility_machine.rs",
+ "fileName": "named_utility_machine.rs",
+ "cellName": "named_utility_machine.rs",
+ "cellId": "6af31246-07dc-48bb-a34b-f2d5c80288aa",
+ "visible": true,
+ "parentCellId": "81e0fe1a-06e9-49f5-b8ee-71d5246c8539",
+ "children": [
+ "crates/oxide/src/extractor/named_utility_machine.rs-simstep-8647727d-bf05-4ebb-909d-b3a4f14afc49"
+ ]
+ },
+ "crates/oxide/src/extractor/utility_machine.rs": {
+ "path": "crates/oxide/src/extractor/utility_machine.rs",
+ "fileName": "utility_machine.rs",
+ "cellName": "utility_machine.rs",
+ "cellId": "a77fa17c-460f-4ba2-a498-e159030060c7",
+ "visible": true,
+ "parentCellId": "81e0fe1a-06e9-49f5-b8ee-71d5246c8539",
+ "children": [
+ "crates/oxide/src/extractor/utility_machine.rs-simstep-bf62f504-9a6a-4026-b2e0-408d8f6515fd",
+ "crates/oxide/src/extractor/utility_machine.rs-simstep-f10ece63-581a-4070-a21e-75ec0d3aa8fc",
+ "crates/oxide/src/extractor/utility_machine.rs-simstep-d4c22b52-6478-4320-a872-e2b7e794fe68"
+ ]
+ },
+ "crates/oxide/src/main.rs": {
+ "path": "crates/oxide/src/main.rs",
+ "fileName": "main.rs",
+ "cellName": "main.rs",
+ "cellId": "2d2d5c49-dcd8-49b2-83da-b52f0f2f7fab",
+ "visible": true,
+ "parentCellId": "6ab2ff5a-6aab-4726-9d64-7368429e7a76",
+ "children": [
+ "crates/oxide/src/main.rs-simstep-2c6a58c2-d3cd-4991-89f9-07f78e5f0a76",
+ "crates/oxide/src/main.rs-simstep-03cba560-0826-4cf8-8711-6179a7eb8788"
+ ]
+ },
+ "crates/oxide/src/scanner": {
+ "path": "crates/oxide/src/scanner",
+ "fileName": "scanner",
+ "cellName": "scanner",
+ "cellId": "4ee95362-ec80-41e1-af6f-7877634490d6",
+ "visible": true,
+ "parentCellId": "6ab2ff5a-6aab-4726-9d64-7368429e7a76",
+ "children": [
+ "crates/oxide/src/scanner/mod.rs"
+ ]
+ },
+ "crates/oxide/src/scanner/mod.rs": {
+ "path": "crates/oxide/src/scanner/mod.rs",
+ "fileName": "mod.rs",
+ "cellName": "mod.rs",
+ "cellId": "93fa4c2d-9a63-49f0-a06e-9557a5200a76",
+ "visible": true,
+ "parentCellId": "4ee95362-ec80-41e1-af6f-7877634490d6",
+ "children": [
+ "crates/oxide/src/scanner/mod.rs-simstep-50225845-94e9-487b-90e5-f3342bacb723",
+ "crates/oxide/src/scanner/mod.rs-simstep-03b0fc2f-dfc1-4f49-b8af-c4a1d3c49f65"
+ ]
+ },
+ "integrations": {
+ "path": "integrations",
+ "fileName": "integrations",
+ "cellName": "integrations",
+ "cellId": "eba901e8-9643-438a-96bc-0dcde82a7c20",
+ "visible": true,
+ "children": [
+ "integrations/cli"
+ ]
+ },
+ "integrations/cli": {
+ "path": "integrations/cli",
+ "fileName": "cli",
+ "cellName": "cli",
+ "cellId": "36f30b02-b1e0-4fbb-9e63-6b20cb749220",
+ "visible": true,
+ "parentCellId": "eba901e8-9643-438a-96bc-0dcde82a7c20",
+ "children": [
+ "integrations/cli/index.test.ts"
+ ]
+ },
+ "integrations/cli/index.test.ts": {
+ "path": "integrations/cli/index.test.ts",
+ "fileName": "index.test.ts",
+ "cellName": "index.test.ts",
+ "cellId": "a8a73047-0292-4204-ae1b-f737ffd7e186",
+ "visible": true,
+ "parentCellId": "36f30b02-b1e0-4fbb-9e63-6b20cb749220",
+ "children": [
+ "integrations/cli/index.test.ts-simstep-e6753a9e-15a6-4ac3-8323-44b208eff2a9",
+ "integrations/cli/index.test.ts-simstep-7d1f3c46-2e32-4199-8d44-2ee319345f57",
+ "integrations/cli/index.test.ts-simstep-20480b42-f302-4806-bc81-b904a6cb5d62"
+ ]
+ },
+ "packages": {
+ "path": "packages",
+ "fileName": "packages",
+ "cellName": "packages",
+ "cellId": "8cf7f1e0-3fe6-46a3-b961-356a05cf5c23",
+ "visible": true,
+ "children": [
+ "packages/@tailwindcss-vite",
+ "packages/tailwindcss",
+ "packages/@tailwindcss-postcss",
+ "packages/@tailwindcss-cli",
+ "packages/@tailwindcss-upgrade"
+ ]
+ },
+ "packages/@tailwindcss-cli": {
+ "path": "packages/@tailwindcss-cli",
+ "fileName": "@tailwindcss-cli",
+ "cellName": "@tailwindcss-cli",
+ "cellId": "84b5e2ac-fddb-4e13-8165-4d84176fe6f7",
+ "visible": true,
+ "parentCellId": "8cf7f1e0-3fe6-46a3-b961-356a05cf5c23",
+ "children": [
+ "packages/@tailwindcss-cli/src"
+ ]
+ },
+ "packages/@tailwindcss-cli/src": {
+ "path": "packages/@tailwindcss-cli/src",
+ "fileName": "src",
+ "cellName": "src",
+ "cellId": "966ed1d6-6e20-4090-bb80-639075e583ed",
+ "visible": true,
+ "parentCellId": "84b5e2ac-fddb-4e13-8165-4d84176fe6f7",
+ "children": [
+ "packages/@tailwindcss-cli/src/index.ts"
+ ]
+ },
+ "packages/@tailwindcss-cli/src/index.ts": {
+ "path": "packages/@tailwindcss-cli/src/index.ts",
+ "fileName": "index.ts",
+ "cellName": "index.ts",
+ "cellId": "7418384f-4087-444d-98f3-f15e8c6dee4c",
+ "visible": true,
+ "parentCellId": "966ed1d6-6e20-4090-bb80-639075e583ed",
+ "children": [
+ "packages/@tailwindcss-cli/src/index.ts-simstep-fa981cdc-06e1-400e-aaa5-91cdb7f9e856"
+ ]
+ },
+ "packages/@tailwindcss-postcss": {
+ "path": "packages/@tailwindcss-postcss",
+ "fileName": "@tailwindcss-postcss",
+ "cellName": "@tailwindcss-postcss",
+ "cellId": "147fcd88-9ff4-4fd5-8c10-b518d9fe3630",
+ "visible": true,
+ "parentCellId": "8cf7f1e0-3fe6-46a3-b961-356a05cf5c23",
+ "children": [
+ "packages/@tailwindcss-postcss/src"
+ ]
+ },
+ "packages/@tailwindcss-postcss/src": {
+ "path": "packages/@tailwindcss-postcss/src",
+ "fileName": "src",
+ "cellName": "src",
+ "cellId": "579630a3-44bc-46d8-8f70-1cf46e48cf29",
+ "visible": true,
+ "parentCellId": "147fcd88-9ff4-4fd5-8c10-b518d9fe3630",
+ "children": [
+ "packages/@tailwindcss-postcss/src/index.ts",
+ "packages/@tailwindcss-postcss/src/fixtures"
+ ]
+ },
+ "packages/@tailwindcss-postcss/src/fixtures": {
+ "path": "packages/@tailwindcss-postcss/src/fixtures",
+ "fileName": "fixtures",
+ "cellName": "fixtures",
+ "cellId": "e390d827-7630-4c39-9772-3d2fb9a3819c",
+ "visible": true,
+ "parentCellId": "579630a3-44bc-46d8-8f70-1cf46e48cf29",
+ "children": [
+ "packages/@tailwindcss-postcss/src/fixtures/example-project"
+ ]
+ },
+ "packages/@tailwindcss-postcss/src/fixtures/example-project": {
+ "path": "packages/@tailwindcss-postcss/src/fixtures/example-project",
+ "fileName": "example-project",
+ "cellName": "example-project",
+ "cellId": "a4a09831-2b8f-4103-8df6-a5a8bbd57548",
+ "visible": true,
+ "parentCellId": "e390d827-7630-4c39-9772-3d2fb9a3819c",
+ "children": [
+ "packages/@tailwindcss-postcss/src/fixtures/example-project/plugin.js"
+ ]
+ },
+ "packages/@tailwindcss-postcss/src/fixtures/example-project/plugin.js": {
+ "path": "packages/@tailwindcss-postcss/src/fixtures/example-project/plugin.js",
+ "fileName": "plugin.js",
+ "cellName": "plugin.js",
+ "cellId": "28d77789-1578-4ba3-8bc8-6b6d38c2670b",
+ "visible": true,
+ "parentCellId": "a4a09831-2b8f-4103-8df6-a5a8bbd57548"
+ },
+ "packages/@tailwindcss-postcss/src/index.ts": {
+ "path": "packages/@tailwindcss-postcss/src/index.ts",
+ "fileName": "index.ts",
+ "cellName": "index.ts",
+ "cellId": "fcb21d37-9994-4006-8fd4-098f96bec9cc",
+ "visible": true,
+ "parentCellId": "579630a3-44bc-46d8-8f70-1cf46e48cf29",
+ "children": [
+ "packages/@tailwindcss-postcss/src/index.ts-simstep-8aa13357-95a4-4cea-b4bd-b5b70d4f3de3",
+ "packages/@tailwindcss-postcss/src/index.ts-simstep-6ac19244-330b-46a3-8ee1-3342c8edaf5b",
+ "packages/@tailwindcss-postcss/src/index.ts-simstep-0e41a1b5-e546-486b-ae62-d6861fdf7ce5"
+ ]
+ },
+ "packages/@tailwindcss-upgrade": {
+ "path": "packages/@tailwindcss-upgrade",
+ "fileName": "@tailwindcss-upgrade",
+ "cellName": "@tailwindcss-upgrade",
+ "cellId": "6e701650-96db-43c1-903b-624571aab002",
+ "visible": true,
+ "parentCellId": "8cf7f1e0-3fe6-46a3-b961-356a05cf5c23",
+ "children": [
+ "packages/@tailwindcss-upgrade/src"
+ ]
+ },
+ "packages/@tailwindcss-upgrade/src": {
+ "path": "packages/@tailwindcss-upgrade/src",
+ "fileName": "src",
+ "cellName": "src",
+ "cellId": "36a082db-3d3b-4e94-b9cd-eb1498ba1791",
+ "visible": true,
+ "parentCellId": "6e701650-96db-43c1-903b-624571aab002",
+ "children": [
+ "packages/@tailwindcss-upgrade/src/index.ts",
+ "packages/@tailwindcss-upgrade/src/codemods"
+ ]
+ },
+ "packages/@tailwindcss-upgrade/src/codemods": {
+ "path": "packages/@tailwindcss-upgrade/src/codemods",
+ "fileName": "codemods",
+ "cellName": "codemods",
+ "cellId": "f67b4f04-8c97-4b42-b087-d308c12af7ab",
+ "visible": true,
+ "parentCellId": "36a082db-3d3b-4e94-b9cd-eb1498ba1791",
+ "children": [
+ "packages/@tailwindcss-upgrade/src/codemods/config",
+ "packages/@tailwindcss-upgrade/src/codemods/css",
+ "packages/@tailwindcss-upgrade/src/codemods/template"
+ ]
+ },
+ "packages/@tailwindcss-upgrade/src/codemods/config": {
+ "path": "packages/@tailwindcss-upgrade/src/codemods/config",
+ "fileName": "config",
+ "cellName": "config",
+ "cellId": "1521f797-a86c-42d5-9569-e8509b1a9b1c",
+ "visible": true,
+ "parentCellId": "f67b4f04-8c97-4b42-b087-d308c12af7ab",
+ "children": [
+ "packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts",
+ "packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts"
+ ]
+ },
+ "packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts": {
+ "path": "packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts",
+ "fileName": "migrate-js-config.ts",
+ "cellName": "migrate-js-config.ts",
+ "cellId": "df5b0085-8384-4821-ab95-f85e82bb9f9e",
+ "visible": true,
+ "parentCellId": "1521f797-a86c-42d5-9569-e8509b1a9b1c",
+ "children": [
+ "packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts-simstep-93199260-e2ea-489d-8592-77a7f0899362"
+ ]
+ },
+ "packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts": {
+ "path": "packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts",
+ "fileName": "migrate-postcss.ts",
+ "cellName": "migrate-postcss.ts",
+ "cellId": "36d99a6e-17e3-4cac-bf94-9e913af6e836",
+ "visible": true,
+ "parentCellId": "1521f797-a86c-42d5-9569-e8509b1a9b1c",
+ "children": [
+ "packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts-simstep-00af9177-f9ac-4995-8158-df8fb42d1d65"
+ ]
+ },
+ "packages/@tailwindcss-upgrade/src/codemods/css": {
+ "path": "packages/@tailwindcss-upgrade/src/codemods/css",
+ "fileName": "css",
+ "cellName": "css",
+ "cellId": "cfff54dd-c38e-499b-9ba6-416f253ce44c",
+ "visible": true,
+ "parentCellId": "f67b4f04-8c97-4b42-b087-d308c12af7ab",
+ "children": [
+ "packages/@tailwindcss-upgrade/src/codemods/css/migrate.ts"
+ ]
+ },
+ "packages/@tailwindcss-upgrade/src/codemods/css/migrate.ts": {
+ "path": "packages/@tailwindcss-upgrade/src/codemods/css/migrate.ts",
+ "fileName": "migrate.ts",
+ "cellName": "migrate.ts",
+ "cellId": "831b0964-3ec2-4c29-8701-21f672966d76",
+ "visible": true,
+ "parentCellId": "cfff54dd-c38e-499b-9ba6-416f253ce44c",
+ "children": [
+ "packages/@tailwindcss-upgrade/src/codemods/css/migrate.ts-simstep-e92a32ae-c3cc-45c5-b6a2-c33fd48f023c"
+ ]
+ },
+ "packages/@tailwindcss-upgrade/src/codemods/template": {
+ "path": "packages/@tailwindcss-upgrade/src/codemods/template",
+ "fileName": "template",
+ "cellName": "template",
+ "cellId": "7a100cf0-eb22-4095-9d1d-29b05d40ba36",
+ "visible": true,
+ "parentCellId": "f67b4f04-8c97-4b42-b087-d308c12af7ab",
+ "children": [
+ "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts"
+ ]
+ },
+ "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts": {
+ "path": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts",
+ "fileName": "migrate.ts",
+ "cellName": "migrate.ts",
+ "cellId": "6e3f56ab-6733-408c-a555-a1d334cd6114",
+ "visible": true,
+ "parentCellId": "7a100cf0-eb22-4095-9d1d-29b05d40ba36",
+ "children": [
+ "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts-simstep-1c3ec338-fdc9-4775-9293-8227945ffe56",
+ "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts-simstep-8485b8c0-dfc3-4e62-bf40-025a709f2559",
+ "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts-simstep-2f421e36-42fd-460c-a31d-aafb4fe73702"
+ ]
+ },
+ "packages/@tailwindcss-upgrade/src/index.ts": {
+ "path": "packages/@tailwindcss-upgrade/src/index.ts",
+ "fileName": "index.ts",
+ "cellName": "index.ts",
+ "cellId": "db83c168-0406-448d-85af-5e0d98377086",
+ "visible": true,
+ "parentCellId": "36a082db-3d3b-4e94-b9cd-eb1498ba1791",
+ "children": [
+ "packages/@tailwindcss-upgrade/src/index.ts-simstep-ce816b1a-1bf4-4eb6-94b0-027562d885d1"
+ ]
+ },
+ "packages/@tailwindcss-vite": {
+ "path": "packages/@tailwindcss-vite",
+ "fileName": "@tailwindcss-vite",
+ "cellName": "@tailwindcss-vite",
+ "cellId": "eef1d4c1-2cad-4c4a-b95e-0654677e0efe",
+ "visible": true,
+ "parentCellId": "8cf7f1e0-3fe6-46a3-b961-356a05cf5c23",
+ "children": [
+ "packages/@tailwindcss-vite/src"
+ ]
+ },
+ "packages/@tailwindcss-vite/src": {
+ "path": "packages/@tailwindcss-vite/src",
+ "fileName": "src",
+ "cellName": "src",
+ "cellId": "7da350bf-9915-4bfe-b5a7-34d1c4b9c5a1",
+ "visible": true,
+ "parentCellId": "eef1d4c1-2cad-4c4a-b95e-0654677e0efe",
+ "children": [
+ "packages/@tailwindcss-vite/src/index.ts"
+ ]
+ },
+ "packages/@tailwindcss-vite/src/index.ts": {
+ "path": "packages/@tailwindcss-vite/src/index.ts",
+ "fileName": "index.ts",
+ "cellName": "index.ts",
+ "cellId": "11f84044-473f-4f66-a07b-e497d279a653",
+ "visible": true,
+ "parentCellId": "7da350bf-9915-4bfe-b5a7-34d1c4b9c5a1",
+ "children": [
+ "packages/@tailwindcss-vite/src/index.ts-simstep-070c05f0-e90a-4524-80b9-d646718c498b",
+ "packages/@tailwindcss-vite/src/index.ts-simstep-0f0bf488-9de2-4511-9ea7-0db1864eb44c",
+ "packages/@tailwindcss-vite/src/index.ts-simstep-847f2607-c677-4eaa-b73e-dd372d73ef70",
+ "packages/@tailwindcss-vite/src/index.ts-simstep-a660c7cc-56bb-4fac-af79-3d00679a5759",
+ "packages/@tailwindcss-vite/src/index.ts-simstep-f1917cc3-57ba-4953-84c5-19442c893485"
+ ]
+ },
+ "packages/tailwindcss": {
+ "path": "packages/tailwindcss",
+ "fileName": "tailwindcss",
+ "cellName": "tailwindcss",
+ "cellId": "4200d2fe-839e-44b1-9dd0-c368bc58b0de",
+ "visible": true,
+ "parentCellId": "8cf7f1e0-3fe6-46a3-b961-356a05cf5c23",
+ "children": [
+ "packages/tailwindcss/src"
+ ]
+ },
+ "packages/tailwindcss/src": {
+ "path": "packages/tailwindcss/src",
+ "fileName": "src",
+ "cellName": "src",
+ "cellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609",
+ "visible": true,
+ "parentCellId": "4200d2fe-839e-44b1-9dd0-c368bc58b0de",
+ "children": [
+ "packages/tailwindcss/src/index.ts",
+ "packages/tailwindcss/src/compile.ts",
+ "packages/tailwindcss/src/compat",
+ "packages/tailwindcss/src/candidate.ts",
+ "packages/tailwindcss/src/variants.ts",
+ "packages/tailwindcss/src/css-parser.test.ts",
+ "packages/tailwindcss/src/apply.ts",
+ "packages/tailwindcss/src/ast.bench.ts",
+ "packages/tailwindcss/src/design-system.ts",
+ "packages/tailwindcss/src/intellisense.ts",
+ "packages/tailwindcss/src/intellisense.test.ts"
+ ]
+ },
+ "packages/tailwindcss/src/apply.ts": {
+ "path": "packages/tailwindcss/src/apply.ts",
+ "fileName": "apply.ts",
+ "cellName": "apply.ts",
+ "cellId": "96485fa7-4834-4429-ad88-ac10916ff8f6",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609",
+ "children": [
+ "packages/tailwindcss/src/apply.ts-simstep-ee3a753a-f104-4033-ac7b-466c7d0ebd42"
+ ]
+ },
+ "packages/tailwindcss/src/ast.bench.ts": {
+ "path": "packages/tailwindcss/src/ast.bench.ts",
+ "fileName": "ast.bench.ts",
+ "cellName": "ast.bench.ts",
+ "cellId": "fff5b81c-6f22-4caa-903e-5454c42fa6e1",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609",
+ "children": [
+ "packages/tailwindcss/src/ast.bench.ts-simstep-f5348025-a9a1-4beb-836d-066db79336ce"
+ ]
+ },
+ "packages/tailwindcss/src/candidate.ts": {
+ "path": "packages/tailwindcss/src/candidate.ts",
+ "fileName": "candidate.ts",
+ "cellName": "candidate.ts",
+ "cellId": "4006b47a-16f3-4e62-9cc4-efd228fef6cf",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609",
+ "children": [
+ "packages/tailwindcss/src/candidate.ts-simstep-82d5255c-7c07-47a4-8df5-70710261d128"
+ ]
+ },
+ "packages/tailwindcss/src/compat": {
+ "path": "packages/tailwindcss/src/compat",
+ "fileName": "compat",
+ "cellName": "compat",
+ "cellId": "30c8c2d0-c23e-4a0f-be8d-f2f3d609d920",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609",
+ "children": [
+ "packages/tailwindcss/src/compat/config",
+ "packages/tailwindcss/src/compat/apply-compat-hooks.ts",
+ "packages/tailwindcss/src/compat/apply-config-to-theme.ts",
+ "packages/tailwindcss/src/compat/plugin-api.ts"
+ ]
+ },
+ "packages/tailwindcss/src/compat/apply-compat-hooks.ts": {
+ "path": "packages/tailwindcss/src/compat/apply-compat-hooks.ts",
+ "fileName": "apply-compat-hooks.ts",
+ "cellName": "apply-compat-hooks.ts",
+ "cellId": "61012578-ad7a-4829-984f-b33619a8b5c5",
+ "visible": true,
+ "parentCellId": "30c8c2d0-c23e-4a0f-be8d-f2f3d609d920",
+ "children": [
+ "packages/tailwindcss/src/compat/apply-compat-hooks.ts-simstep-bba7f885-598c-48f4-bbe1-5035a3d78c49",
+ "packages/tailwindcss/src/compat/apply-compat-hooks.ts-simstep-f85f0059-785e-45bf-952d-70f31d1ca531",
+ "packages/tailwindcss/src/compat/apply-compat-hooks.ts-simstep-8d3e5126-3fb6-46bf-9e8b-be5c79236566"
+ ]
+ },
+ "packages/tailwindcss/src/compat/apply-config-to-theme.ts": {
+ "path": "packages/tailwindcss/src/compat/apply-config-to-theme.ts",
+ "fileName": "apply-config-to-theme.ts",
+ "cellName": "apply-config-to-theme.ts",
+ "cellId": "81a8cde9-b849-4eef-9441-c91b4ec43848",
+ "visible": true,
+ "parentCellId": "30c8c2d0-c23e-4a0f-be8d-f2f3d609d920",
+ "children": [
+ "packages/tailwindcss/src/compat/apply-config-to-theme.ts-simstep-4444211c-72da-4515-a507-e555b0954069"
+ ]
+ },
+ "packages/tailwindcss/src/compat/config": {
+ "path": "packages/tailwindcss/src/compat/config",
+ "fileName": "config",
+ "cellName": "config",
+ "cellId": "ab7e1c25-5704-4933-ba49-e663112e7d63",
+ "visible": true,
+ "parentCellId": "30c8c2d0-c23e-4a0f-be8d-f2f3d609d920",
+ "children": [
+ "packages/tailwindcss/src/compat/config/resolve-config.ts"
+ ]
+ },
+ "packages/tailwindcss/src/compat/config/resolve-config.ts": {
+ "path": "packages/tailwindcss/src/compat/config/resolve-config.ts",
+ "fileName": "resolve-config.ts",
+ "cellName": "resolve-config.ts",
+ "cellId": "3ba89ecd-cb8e-44ca-ac14-dadc04eee4cd",
+ "visible": true,
+ "parentCellId": "ab7e1c25-5704-4933-ba49-e663112e7d63",
+ "children": [
+ "packages/tailwindcss/src/compat/config/resolve-config.ts-simstep-adb9b981-59c4-48ba-9903-8ff051d2479b",
+ "packages/tailwindcss/src/compat/config/resolve-config.ts-simstep-63d599b1-4e75-471b-9357-c6257451dbed"
+ ]
+ },
+ "packages/tailwindcss/src/compat/plugin-api.ts": {
+ "path": "packages/tailwindcss/src/compat/plugin-api.ts",
+ "fileName": "plugin-api.ts",
+ "cellName": "plugin-api.ts",
+ "cellId": "a1a07f94-78e2-4c9d-ae24-49ab5e598fe8",
+ "visible": true,
+ "parentCellId": "30c8c2d0-c23e-4a0f-be8d-f2f3d609d920",
+ "children": [
+ "packages/tailwindcss/src/compat/plugin-api.ts-simstep-15362ed0-6ffd-4177-a992-bfd6b46ad403"
+ ]
+ },
+ "packages/tailwindcss/src/compile.ts": {
+ "path": "packages/tailwindcss/src/compile.ts",
+ "fileName": "compile.ts",
+ "cellName": "compile.ts",
+ "cellId": "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609",
+ "children": [
+ "packages/tailwindcss/src/compile.ts-simstep-0919e474-6ea8-4106-81e5-6bed6d2cc022",
+ "packages/tailwindcss/src/compile.ts-simstep-f289837c-4a0a-4f3e-897d-84aa2e21fd3e",
+ "packages/tailwindcss/src/compile.ts-simstep-eaa78521-2d8b-4bff-ade7-099ab10fb0dd",
+ "packages/tailwindcss/src/compile.ts-simstep-a122af75-88a8-4058-bc30-b8c4f39509fe",
+ "packages/tailwindcss/src/compile.ts-simstep-2b6cc5b2-2c96-49e5-8f98-e7f98efea128",
+ "packages/tailwindcss/src/compile.ts-simstep-1f173972-2fe5-42c2-b8ea-f6992ab624e2"
+ ]
+ },
+ "packages/tailwindcss/src/css-parser.test.ts": {
+ "path": "packages/tailwindcss/src/css-parser.test.ts",
+ "fileName": "css-parser.test.ts",
+ "cellName": "css-parser.test.ts",
+ "cellId": "38cee91e-f342-4fea-b4a4-b84ba2d910d4",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609",
+ "children": [
+ "packages/tailwindcss/src/css-parser.test.ts-simstep-0eb15c43-6535-4dfd-bb33-4482340935ae"
+ ]
+ },
+ "packages/tailwindcss/src/design-system.ts": {
+ "path": "packages/tailwindcss/src/design-system.ts",
+ "fileName": "design-system.ts",
+ "cellName": "design-system.ts",
+ "cellId": "a8b162d6-7069-4dc9-ba56-58204ecbde74",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609",
+ "children": [
+ "packages/tailwindcss/src/design-system.ts-simstep-b76339cb-6f5e-4223-b3b2-3d113c2f6884",
+ "packages/tailwindcss/src/design-system.ts-simstep-f61b8e3a-0145-4b35-8b3f-a2a46ed8c241",
+ "packages/tailwindcss/src/design-system.ts-simstep-8c5cee0f-aec6-465f-9f4a-031dc540b2c6",
+ "packages/tailwindcss/src/design-system.ts-simstep-3f0e83f8-1c9d-4ae3-8d11-b05d77cc861b"
+ ]
+ },
+ "packages/tailwindcss/src/index.ts": {
+ "path": "packages/tailwindcss/src/index.ts",
+ "fileName": "index.ts",
+ "cellName": "index.ts",
+ "cellId": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609",
+ "children": [
+ "packages/tailwindcss/src/index.ts-simstep-86a5c51c-3902-4461-a34c-5ba93101aa5b",
+ "packages/tailwindcss/src/index.ts-simstep-ff576a5f-0492-417d-8d25-6fd864a80989",
+ "packages/tailwindcss/src/index.ts-simstep-f3bd330a-032f-4154-be70-0b6b7f43feda",
+ "packages/tailwindcss/src/index.ts-simstep-07d6d4fa-896e-4cd5-84aa-685001282e98",
+ "packages/tailwindcss/src/index.ts-simstep-2328c343-084d-4465-aa48-14a08a41c4ae",
+ "packages/tailwindcss/src/index.ts-simstep-6e16fb9e-1fea-4158-8326-353b2ad48b5e",
+ "packages/tailwindcss/src/index.ts-simstep-0da50755-36e5-481e-9ab4-3d0ec52133ba",
+ "packages/tailwindcss/src/index.ts-simstep-2053de67-31dc-4f8c-88cc-232e376872e9"
+ ]
+ },
+ "packages/tailwindcss/src/intellisense.test.ts": {
+ "path": "packages/tailwindcss/src/intellisense.test.ts",
+ "fileName": "intellisense.test.ts",
+ "cellName": "intellisense.test.ts",
+ "cellId": "2bc2b4b6-60cb-4b51-b8ea-e5df9c051b52",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609",
+ "children": [
+ "packages/tailwindcss/src/intellisense.test.ts-simstep-641ad633-7a5c-4b15-9c46-2bf634c3f800",
+ "packages/tailwindcss/src/intellisense.test.ts-simstep-b2a40d88-b7bb-46b8-98f1-2f3a4376318c"
+ ]
+ },
+ "packages/tailwindcss/src/intellisense.ts": {
+ "path": "packages/tailwindcss/src/intellisense.ts",
+ "fileName": "intellisense.ts",
+ "cellName": "intellisense.ts",
+ "cellId": "870260c4-12e9-42a3-beee-8b68c09815cb",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609",
+ "children": [
+ "packages/tailwindcss/src/intellisense.ts-simstep-e1e4b09a-cf43-4cbf-8b71-21be9b586242",
+ "packages/tailwindcss/src/intellisense.ts-simstep-7d7867c1-64a1-42e4-badc-45932fe924a4"
+ ]
+ },
+ "packages/tailwindcss/src/variants.ts": {
+ "path": "packages/tailwindcss/src/variants.ts",
+ "fileName": "variants.ts",
+ "cellName": "variants.ts",
+ "cellId": "905dc9a1-50bc-46aa-ba84-1b3bb59b780e",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609",
+ "children": [
+ "packages/tailwindcss/src/variants.ts-simstep-62f1d35b-b450-4d02-9124-8d11383e0b52"
+ ]
+ },
+ "playgrounds": {
+ "path": "playgrounds",
+ "fileName": "playgrounds",
+ "cellName": "playgrounds",
+ "cellId": "b455a6d1-3d52-4434-b400-07c67d0f2d5f",
+ "visible": true,
+ "children": [
+ "playgrounds/nextjs",
+ "playgrounds/vite"
+ ]
+ },
+ "playgrounds/nextjs": {
+ "path": "playgrounds/nextjs",
+ "fileName": "nextjs",
+ "cellName": "nextjs",
+ "cellId": "3d5f03e6-8cde-4451-a23f-4a2d158c71fe",
+ "visible": true,
+ "parentCellId": "b455a6d1-3d52-4434-b400-07c67d0f2d5f",
+ "children": [
+ "playgrounds/nextjs/postcss.config.js"
+ ]
+ },
+ "playgrounds/nextjs/postcss.config.js": {
+ "path": "playgrounds/nextjs/postcss.config.js",
+ "fileName": "postcss.config.js",
+ "cellName": "postcss.config.js",
+ "cellId": "2b07b8c2-5cdf-4a14-b401-6d47a1b6b28a",
+ "visible": true,
+ "parentCellId": "3d5f03e6-8cde-4451-a23f-4a2d158c71fe",
+ "children": [
+ "playgrounds/nextjs/postcss.config.js-simstep-c0ea92ee-3c0a-4dc5-b3ad-9e02d73420c1"
+ ]
+ },
+ "playgrounds/vite": {
+ "path": "playgrounds/vite",
+ "fileName": "vite",
+ "cellName": "vite",
+ "cellId": "9b9585a8-7790-42ec-abe0-879b5078eb36",
+ "visible": true,
+ "parentCellId": "b455a6d1-3d52-4434-b400-07c67d0f2d5f",
+ "children": [
+ "playgrounds/vite/vite.config.ts"
+ ]
+ },
+ "playgrounds/vite/vite.config.ts": {
+ "path": "playgrounds/vite/vite.config.ts",
+ "fileName": "vite.config.ts",
+ "cellName": "vite.config.ts",
+ "cellId": "195406ec-0ef6-4ddc-80e8-6bd58afcb908",
+ "visible": true,
+ "parentCellId": "9b9585a8-7790-42ec-abe0-879b5078eb36",
+ "children": [
+ "playgrounds/vite/vite.config.ts-simstep-31c30553-f46d-4083-9634-2581d6e0f040"
+ ]
+ },
+ "pnpm-lock.yaml": {
+ "path": "pnpm-lock.yaml",
+ "fileName": "pnpm-lock.yaml",
+ "cellName": "pnpm-lock.yaml",
+ "cellId": "6cba388c-c9bb-4bf9-99b0-bb7d8d9a7957",
+ "visible": true
+ },
+ "8cf7f1e0-3fe6-46a3-b961-356a05cf5c23": {
+ "path": "8cf7f1e0-3fe6-46a3-b961-356a05cf5c23",
+ "cellName": "packages",
+ "cellId": "8cf7f1e0-3fe6-46a3-b961-356a05cf5c23",
+ "visible": true
+ },
+ "69cd5b59-55ce-4dca-be52-218e92d88ee7": {
+ "path": "69cd5b59-55ce-4dca-be52-218e92d88ee7",
+ "cellName": "crates",
+ "cellId": "69cd5b59-55ce-4dca-be52-218e92d88ee7",
+ "visible": true
+ },
+ "eef1d4c1-2cad-4c4a-b95e-0654677e0efe": {
+ "path": "eef1d4c1-2cad-4c4a-b95e-0654677e0efe",
+ "cellName": "@tailwindcss-vite",
+ "cellId": "eef1d4c1-2cad-4c4a-b95e-0654677e0efe",
+ "visible": true,
+ "parentCellId": "8cf7f1e0-3fe6-46a3-b961-356a05cf5c23"
+ },
+ "4200d2fe-839e-44b1-9dd0-c368bc58b0de": {
+ "path": "4200d2fe-839e-44b1-9dd0-c368bc58b0de",
+ "cellName": "tailwindcss",
+ "cellId": "4200d2fe-839e-44b1-9dd0-c368bc58b0de",
+ "visible": true,
+ "parentCellId": "8cf7f1e0-3fe6-46a3-b961-356a05cf5c23"
+ },
+ "036071af-66af-47ba-8024-c75ac0d7943c": {
+ "path": "036071af-66af-47ba-8024-c75ac0d7943c",
+ "cellName": "node",
+ "cellId": "036071af-66af-47ba-8024-c75ac0d7943c",
+ "visible": true,
+ "parentCellId": "69cd5b59-55ce-4dca-be52-218e92d88ee7"
+ },
+ "aa99a857-fcc1-42ee-a1c6-0dc76a93ebc4": {
+ "path": "aa99a857-fcc1-42ee-a1c6-0dc76a93ebc4",
+ "cellName": "oxide",
+ "cellId": "aa99a857-fcc1-42ee-a1c6-0dc76a93ebc4",
+ "visible": true,
+ "parentCellId": "69cd5b59-55ce-4dca-be52-218e92d88ee7"
+ },
+ "7da350bf-9915-4bfe-b5a7-34d1c4b9c5a1": {
+ "path": "7da350bf-9915-4bfe-b5a7-34d1c4b9c5a1",
+ "cellName": "src",
+ "cellId": "7da350bf-9915-4bfe-b5a7-34d1c4b9c5a1",
+ "visible": true,
+ "parentCellId": "eef1d4c1-2cad-4c4a-b95e-0654677e0efe"
+ },
+ "1dd81203-e3d1-43c3-b060-0dcf2af49609": {
+ "path": "1dd81203-e3d1-43c3-b060-0dcf2af49609",
+ "cellName": "src",
+ "cellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609",
+ "visible": true,
+ "parentCellId": "4200d2fe-839e-44b1-9dd0-c368bc58b0de"
+ },
+ "c26839de-96f5-4ae4-b17f-939fca7a8d36": {
+ "path": "c26839de-96f5-4ae4-b17f-939fca7a8d36",
+ "cellName": "src",
+ "cellId": "c26839de-96f5-4ae4-b17f-939fca7a8d36",
+ "visible": true,
+ "parentCellId": "036071af-66af-47ba-8024-c75ac0d7943c"
+ },
+ "6ab2ff5a-6aab-4726-9d64-7368429e7a76": {
+ "path": "6ab2ff5a-6aab-4726-9d64-7368429e7a76",
+ "cellName": "src",
+ "cellId": "6ab2ff5a-6aab-4726-9d64-7368429e7a76",
+ "visible": true,
+ "parentCellId": "aa99a857-fcc1-42ee-a1c6-0dc76a93ebc4"
+ },
+ "11f84044-473f-4f66-a07b-e497d279a653": {
+ "path": "11f84044-473f-4f66-a07b-e497d279a653",
+ "cellName": "index.ts",
+ "cellId": "11f84044-473f-4f66-a07b-e497d279a653",
+ "visible": true,
+ "parentCellId": "7da350bf-9915-4bfe-b5a7-34d1c4b9c5a1"
+ },
+ "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347": {
+ "path": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347",
+ "cellName": "index.ts",
+ "cellId": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9": {
+ "path": "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9",
+ "cellName": "compile.ts",
+ "cellId": "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "a11486ec-9812-484b-bbc9-28e0cdb8b368": {
+ "path": "a11486ec-9812-484b-bbc9-28e0cdb8b368",
+ "cellName": "lib.rs",
+ "cellId": "a11486ec-9812-484b-bbc9-28e0cdb8b368",
+ "visible": true,
+ "parentCellId": "c26839de-96f5-4ae4-b17f-939fca7a8d36"
+ },
+ "4ee95362-ec80-41e1-af6f-7877634490d6": {
+ "path": "4ee95362-ec80-41e1-af6f-7877634490d6",
+ "cellName": "scanner",
+ "cellId": "4ee95362-ec80-41e1-af6f-7877634490d6",
+ "visible": true,
+ "parentCellId": "6ab2ff5a-6aab-4726-9d64-7368429e7a76"
+ },
+ "93fa4c2d-9a63-49f0-a06e-9557a5200a76": {
+ "path": "93fa4c2d-9a63-49f0-a06e-9557a5200a76",
+ "cellName": "mod.rs",
+ "cellId": "93fa4c2d-9a63-49f0-a06e-9557a5200a76",
+ "visible": true,
+ "parentCellId": "4ee95362-ec80-41e1-af6f-7877634490d6"
+ },
+ "373f836b-c272-4cff-952b-31881d7bbe0d": {
+ "path": "373f836b-c272-4cff-952b-31881d7bbe0d",
+ "cellName": "Vite Plugin Triggered - index.ts:L100-102",
+ "cellId": "373f836b-c272-4cff-952b-31881d7bbe0d",
+ "visible": true,
+ "parentCellId": "11f84044-473f-4f66-a07b-e497d279a653"
+ },
+ "packages/@tailwindcss-vite/src/index.ts-simstep-070c05f0-e90a-4524-80b9-d646718c498b": {
+ "path": "packages/@tailwindcss-vite/src/index.ts-simstep-070c05f0-e90a-4524-80b9-d646718c498b",
+ "fileName": "index.ts",
+ "wiki": "Vite's build process discovers a CSS file (`index.css`) that is a potential Tailwind CSS entry point and calls the `transform` hook of the `@tailwindcss/vite` plugin. A `Root` instance is created to manage the compilation for this CSS file.",
+ "cellName": "Vite Plugin Triggered - index.ts:L100-102",
+ "cellId": "373f836b-c272-4cff-952b-31881d7bbe0d",
+ "visible": true,
+ "startLine": 100,
+ "endLine": 102,
+ "parentCellId": "11f84044-473f-4f66-a07b-e497d279a653",
+ "parentPath": "packages/@tailwindcss-vite/src/index.ts"
+ },
+ "2243483a-2947-4317-b128-96245ab9b8d2": {
+ "path": "2243483a-2947-4317-b128-96245ab9b8d2",
+ "cellName": "Parse CSS & Build Design System - index.ts:L837-843",
+ "cellId": "2243483a-2947-4317-b128-96245ab9b8d2",
+ "visible": true,
+ "parentCellId": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347"
+ },
+ "packages/tailwindcss/src/index.ts-simstep-86a5c51c-3902-4461-a34c-5ba93101aa5b": {
+ "path": "packages/tailwindcss/src/index.ts-simstep-86a5c51c-3902-4461-a34c-5ba93101aa5b",
+ "fileName": "index.ts",
+ "wiki": "The core `compile` function parses the CSS, processes directives like `@theme` and `@source`, resolves any `@import` statements, and builds the 'Design System' (the internal representation of the theme and utilities). It also extracts the source file patterns for the scanner.",
+ "cellName": "Parse CSS & Build Design System - index.ts:L837-843",
+ "cellId": "2243483a-2947-4317-b128-96245ab9b8d2",
+ "visible": true,
+ "startLine": 837,
+ "endLine": 843,
+ "parentCellId": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347",
+ "parentPath": "packages/tailwindcss/src/index.ts"
+ },
+ "c373f9ca-351d-4a67-af50-2570e9e52d92": {
+ "path": "c373f9ca-351d-4a67-af50-2570e9e52d92",
+ "cellName": "Scanner Initialization (Rust/N-API) - lib.rs:L111-119",
+ "cellId": "c373f9ca-351d-4a67-af50-2570e9e52d92",
+ "visible": true,
+ "parentCellId": "a11486ec-9812-484b-bbc9-28e0cdb8b368"
+ },
+ "crates/node/src/lib.rs-simstep-eda16679-649a-455b-8094-c9fb4a3423c6": {
+ "path": "crates/node/src/lib.rs-simstep-eda16679-649a-455b-8094-c9fb4a3423c6",
+ "fileName": "lib.rs",
+ "wiki": "The N-API bridge in `@tailwindcss/oxide` receives the source patterns and instantiates the `tailwindcss_oxide::Scanner` struct in Rust, preparing it for file system traversal.",
+ "cellName": "Scanner Initialization (Rust/N-API) - lib.rs:L111-119",
+ "cellId": "c373f9ca-351d-4a67-af50-2570e9e52d92",
+ "visible": true,
+ "startLine": 111,
+ "endLine": 119,
+ "parentCellId": "a11486ec-9812-484b-bbc9-28e0cdb8b368",
+ "parentPath": "crates/node/src/lib.rs"
+ },
+ "355b0995-e0fe-4ea0-bae3-b033754c4a1a": {
+ "path": "355b0995-e0fe-4ea0-bae3-b033754c4a1a",
+ "cellName": "Walking the File System - mod.rs:L644-646",
+ "cellId": "355b0995-e0fe-4ea0-bae3-b033754c4a1a",
+ "visible": true,
+ "parentCellId": "93fa4c2d-9a63-49f0-a06e-9557a5200a76"
+ },
+ "crates/oxide/src/scanner/mod.rs-simstep-50225845-94e9-487b-90e5-f3342bacb723": {
+ "path": "crates/oxide/src/scanner/mod.rs-simstep-50225845-94e9-487b-90e5-f3342bacb723",
+ "fileName": "mod.rs",
+ "wiki": "The Rust scanner uses the `ignore` crate's `WalkBuilder` to recursively find all files matching the source patterns. It respects `.gitignore` rules and custom ignore patterns to create an accurate list of files to process.",
+ "cellName": "Walking the File System - mod.rs:L644-646",
+ "cellId": "355b0995-e0fe-4ea0-bae3-b033754c4a1a",
+ "visible": true,
+ "startLine": 644,
+ "endLine": 646,
+ "parentCellId": "93fa4c2d-9a63-49f0-a06e-9557a5200a76",
+ "parentPath": "crates/oxide/src/scanner/mod.rs"
+ },
+ "e6e37d78-d762-46b6-bbf0-b9e7a989a08f": {
+ "path": "e6e37d78-d762-46b6-bbf0-b9e7a989a08f",
+ "cellName": "Extracting Candidates from Content - mod.rs:L197",
+ "cellId": "e6e37d78-d762-46b6-bbf0-b9e7a989a08f",
+ "visible": true,
+ "parentCellId": "93fa4c2d-9a63-49f0-a06e-9557a5200a76"
+ },
+ "crates/oxide/src/scanner/mod.rs-simstep-03b0fc2f-dfc1-4f49-b8af-c4a1d3c49f65": {
+ "path": "crates/oxide/src/scanner/mod.rs-simstep-03b0fc2f-dfc1-4f49-b8af-c4a1d3c49f65",
+ "fileName": "mod.rs",
+ "wiki": "The Rust `Extractor` uses a state machine to process the file content byte by byte, identifying sequences that are potential Tailwind CSS utility classes. This process is highly optimized for speed and handles various contexts like strings, comments, and different template syntaxes.",
+ "cellName": "Extracting Candidates from Content - mod.rs:L197",
+ "cellId": "e6e37d78-d762-46b6-bbf0-b9e7a989a08f",
+ "visible": true,
+ "startLine": 197,
+ "endLine": 197,
+ "parentCellId": "93fa4c2d-9a63-49f0-a06e-9557a5200a76",
+ "parentPath": "crates/oxide/src/scanner/mod.rs"
+ },
+ "72766964-f322-4bb1-b8f2-96c8db4a2fe7": {
+ "path": "72766964-f322-4bb1-b8f2-96c8db4a2fe7",
+ "cellName": "Compiling Candidates to CSS AST - compile.ts:L16-23",
+ "cellId": "72766964-f322-4bb1-b8f2-96c8db4a2fe7",
+ "visible": true,
+ "parentCellId": "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9"
+ },
+ "packages/tailwindcss/src/compile.ts-simstep-0919e474-6ea8-4106-81e5-6bed6d2cc022": {
+ "path": "packages/tailwindcss/src/compile.ts-simstep-0919e474-6ea8-4106-81e5-6bed6d2cc022",
+ "fileName": "compile.ts",
+ "wiki": "The Vite plugin calls `compiler.build(candidates)`. This triggers the core JavaScript compilation logic, which parses each candidate, looks up the corresponding utility in the design system, applies variants, and generates an abstract syntax tree (AST) of CSS rules.",
+ "cellName": "Compiling Candidates to CSS AST - compile.ts:L16-23",
+ "cellId": "72766964-f322-4bb1-b8f2-96c8db4a2fe7",
+ "visible": true,
+ "startLine": 16,
+ "endLine": 23,
+ "parentCellId": "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9",
+ "parentPath": "packages/tailwindcss/src/compile.ts"
+ },
+ "3e96bd1c-d473-4381-80c3-eca8f05896ce": {
+ "path": "3e96bd1c-d473-4381-80c3-eca8f05896ce",
+ "cellName": "Generating Final CSS String - index.ts:L860",
+ "cellId": "3e96bd1c-d473-4381-80c3-eca8f05896ce",
+ "visible": true,
+ "parentCellId": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347"
+ },
+ "packages/tailwindcss/src/index.ts-simstep-ff576a5f-0492-417d-8d25-6fd864a80989": {
+ "path": "packages/tailwindcss/src/index.ts-simstep-ff576a5f-0492-417d-8d25-6fd864a80989",
+ "fileName": "index.ts",
+ "wiki": "The `build()` method takes the generated AST, optimizes it by merging adjacent rules where possible, and converts the entire tree into a final CSS string, complete with source maps if enabled.",
+ "cellName": "Generating Final CSS String - index.ts:L860",
+ "cellId": "3e96bd1c-d473-4381-80c3-eca8f05896ce",
+ "visible": true,
+ "startLine": 860,
+ "endLine": 860,
+ "parentCellId": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347",
+ "parentPath": "packages/tailwindcss/src/index.ts"
+ },
+ "e3e6f752-4c4f-411a-905f-61a8953bdfb4": {
+ "path": "e3e6f752-4c4f-411a-905f-61a8953bdfb4",
+ "cellName": "Build Tool Finalizes Output - index.ts:L123-130",
+ "cellId": "e3e6f752-4c4f-411a-905f-61a8953bdfb4",
+ "visible": true,
+ "parentCellId": "11f84044-473f-4f66-a07b-e497d279a653"
+ },
+ "packages/@tailwindcss-vite/src/index.ts-simstep-0f0bf488-9de2-4511-9ea7-0db1864eb44c": {
+ "path": "packages/@tailwindcss-vite/src/index.ts-simstep-0f0bf488-9de2-4511-9ea7-0db1864eb44c",
+ "fileName": "index.ts",
+ "wiki": "The build tool (Vite) receives the transformed CSS. It performs its final steps, such as minification and bundling with other CSS files, before writing the final asset to the output directory or serving it in development mode.",
+ "cellName": "Build Tool Finalizes Output - index.ts:L123-130",
+ "cellId": "e3e6f752-4c4f-411a-905f-61a8953bdfb4",
+ "visible": true,
+ "startLine": 123,
+ "endLine": 130,
+ "parentCellId": "11f84044-473f-4f66-a07b-e497d279a653",
+ "parentPath": "packages/@tailwindcss-vite/src/index.ts"
+ },
+ "3b5a12d0-480e-4dd5-8fc6-16c807a68584": {
+ "path": "3b5a12d0-480e-4dd5-8fc6-16c807a68584",
+ "cellName": "CSS Content\nPassed to\nCompiler",
+ "cellId": "3b5a12d0-480e-4dd5-8fc6-16c807a68584",
+ "visible": true,
+ "parentCellId": "8cf7f1e0-3fe6-46a3-b961-356a05cf5c23"
+ },
+ "generated-edge-simstep-4fd1f069-9598-4f24-b477-59c9df6ee696-3b5a12d0-480e-4dd5-8fc6-16c807a68584": {
+ "path": "generated-edge-simstep-4fd1f069-9598-4f24-b477-59c9df6ee696-3b5a12d0-480e-4dd5-8fc6-16c807a68584",
+ "fileName": "index.ts",
+ "cellName": "CSS Content Passed to Compiler",
+ "cellId": "3b5a12d0-480e-4dd5-8fc6-16c807a68584",
+ "visible": true,
+ "startLine": 241,
+ "endLine": 248,
+ "parentPath": "packages/@tailwindcss-vite/src/index.ts"
+ },
+ "73e5e4e3-e760-40af-b927-f92f8a10979c": {
+ "path": "73e5e4e3-e760-40af-b927-f92f8a10979c",
+ "cellName": "Source Patterns\nto Scanner",
+ "cellId": "73e5e4e3-e760-40af-b927-f92f8a10979c",
+ "visible": true
+ },
+ "generated-edge-simstep-921f8e69-5718-42dd-adec-453c0a22ed51-73e5e4e3-e760-40af-b927-f92f8a10979c": {
+ "path": "generated-edge-simstep-921f8e69-5718-42dd-adec-453c0a22ed51-73e5e4e3-e760-40af-b927-f92f8a10979c",
+ "fileName": "index.ts",
+ "cellName": "Source Patterns to Scanner",
+ "cellId": "73e5e4e3-e760-40af-b927-f92f8a10979c",
+ "visible": true,
+ "startLine": 273,
+ "endLine": 273,
+ "parentPath": "packages/tailwindcss/src/index.ts"
+ },
+ "a7739e5a-ccee-4948-90c4-c0cf2c018953": {
+ "path": "a7739e5a-ccee-4948-90c4-c0cf2c018953",
+ "cellName": "Scan Command\nInvoked",
+ "cellId": "a7739e5a-ccee-4948-90c4-c0cf2c018953",
+ "visible": true,
+ "parentCellId": "69cd5b59-55ce-4dca-be52-218e92d88ee7"
+ },
+ "generated-edge-simstep-31568cde-0ab0-463d-819f-b5896e0fc7e1-a7739e5a-ccee-4948-90c4-c0cf2c018953": {
+ "path": "generated-edge-simstep-31568cde-0ab0-463d-819f-b5896e0fc7e1-a7739e5a-ccee-4948-90c4-c0cf2c018953",
+ "fileName": "lib.rs",
+ "cellName": "Scan Command Invoked",
+ "cellId": "a7739e5a-ccee-4948-90c4-c0cf2c018953",
+ "visible": true,
+ "startLine": 299,
+ "endLine": 301,
+ "parentPath": "crates/node/src/lib.rs"
+ },
+ "2d460f8a-13b6-412e-b653-df6cc79aa069": {
+ "path": "2d460f8a-13b6-412e-b653-df6cc79aa069",
+ "cellName": "File Content\nPassed to\nExtractor",
+ "cellId": "2d460f8a-13b6-412e-b653-df6cc79aa069",
+ "visible": true,
+ "parentCellId": "93fa4c2d-9a63-49f0-a06e-9557a5200a76"
+ },
+ "generated-edge-simstep-56f1281c-75cc-4ac1-95a2-c070478b7ae1-2d460f8a-13b6-412e-b653-df6cc79aa069": {
+ "path": "generated-edge-simstep-56f1281c-75cc-4ac1-95a2-c070478b7ae1-2d460f8a-13b6-412e-b653-df6cc79aa069",
+ "fileName": "mod.rs",
+ "cellName": "File Content Passed to Extractor",
+ "cellId": "2d460f8a-13b6-412e-b653-df6cc79aa069",
+ "visible": true,
+ "startLine": 194,
+ "endLine": 195,
+ "parentPath": "crates/oxide/src/scanner/mod.rs"
+ },
+ "13664c11-6236-4d78-8ccc-52e321e27492": {
+ "path": "13664c11-6236-4d78-8ccc-52e321e27492",
+ "cellName": "Candidates Returned\nto JavaScript",
+ "cellId": "13664c11-6236-4d78-8ccc-52e321e27492",
+ "visible": true
+ },
+ "generated-edge-simstep-845cc912-18ef-4747-9db9-0a25b1573c1f-13664c11-6236-4d78-8ccc-52e321e27492": {
+ "path": "generated-edge-simstep-845cc912-18ef-4747-9db9-0a25b1573c1f-13664c11-6236-4d78-8ccc-52e321e27492",
+ "fileName": "mod.rs",
+ "cellName": "Candidates Returned to JavaScript",
+ "cellId": "13664c11-6236-4d78-8ccc-52e321e27492",
+ "visible": true,
+ "startLine": 121,
+ "endLine": 123,
+ "parentPath": "crates/oxide/src/scanner/mod.rs"
+ },
+ "21958e82-9c3c-4cf0-b2da-769f72bdc2be": {
+ "path": "21958e82-9c3c-4cf0-b2da-769f72bdc2be",
+ "cellName": "CSS AST\nto Stringifier",
+ "cellId": "21958e82-9c3c-4cf0-b2da-769f72bdc2be",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "generated-edge-simstep-40ba90e1-bf86-44ed-90a7-909c74c31968-21958e82-9c3c-4cf0-b2da-769f72bdc2be": {
+ "path": "generated-edge-simstep-40ba90e1-bf86-44ed-90a7-909c74c31968-21958e82-9c3c-4cf0-b2da-769f72bdc2be",
+ "fileName": "compile.ts",
+ "cellName": "CSS AST to Stringifier",
+ "cellId": "21958e82-9c3c-4cf0-b2da-769f72bdc2be",
+ "visible": true,
+ "startLine": 851,
+ "endLine": 866,
+ "parentPath": "packages/tailwindcss/src/compile.ts"
+ },
+ "0ffc7c9e-b11c-4332-b31c-312b410547d8": {
+ "path": "0ffc7c9e-b11c-4332-b31c-312b410547d8",
+ "cellName": "Final CSS\nReturned to\nBuild Tool",
+ "cellId": "0ffc7c9e-b11c-4332-b31c-312b410547d8",
+ "visible": true,
+ "parentCellId": "8cf7f1e0-3fe6-46a3-b961-356a05cf5c23"
+ },
+ "generated-edge-simstep-276bcabc-ad09-4160-a3ac-8fa73f844387-0ffc7c9e-b11c-4332-b31c-312b410547d8": {
+ "path": "generated-edge-simstep-276bcabc-ad09-4160-a3ac-8fa73f844387-0ffc7c9e-b11c-4332-b31c-312b410547d8",
+ "fileName": "index.ts",
+ "cellName": "Final CSS Returned to Build Tool",
+ "cellId": "0ffc7c9e-b11c-4332-b31c-312b410547d8",
+ "visible": true,
+ "startLine": 116,
+ "endLine": 119,
+ "parentPath": "packages/tailwindcss/src/index.ts"
+ },
+ "30c8c2d0-c23e-4a0f-be8d-f2f3d609d920": {
+ "path": "30c8c2d0-c23e-4a0f-be8d-f2f3d609d920",
+ "cellName": "compat",
+ "cellId": "30c8c2d0-c23e-4a0f-be8d-f2f3d609d920",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "ab7e1c25-5704-4933-ba49-e663112e7d63": {
+ "path": "ab7e1c25-5704-4933-ba49-e663112e7d63",
+ "cellName": "config",
+ "cellId": "ab7e1c25-5704-4933-ba49-e663112e7d63",
+ "visible": true,
+ "parentCellId": "30c8c2d0-c23e-4a0f-be8d-f2f3d609d920"
+ },
+ "61012578-ad7a-4829-984f-b33619a8b5c5": {
+ "path": "61012578-ad7a-4829-984f-b33619a8b5c5",
+ "cellName": "apply-compat-hooks.ts",
+ "cellId": "61012578-ad7a-4829-984f-b33619a8b5c5",
+ "visible": true,
+ "parentCellId": "30c8c2d0-c23e-4a0f-be8d-f2f3d609d920"
+ },
+ "81a8cde9-b849-4eef-9441-c91b4ec43848": {
+ "path": "81a8cde9-b849-4eef-9441-c91b4ec43848",
+ "cellName": "apply-config-to-theme.ts",
+ "cellId": "81a8cde9-b849-4eef-9441-c91b4ec43848",
+ "visible": true,
+ "parentCellId": "30c8c2d0-c23e-4a0f-be8d-f2f3d609d920"
+ },
+ "3ba89ecd-cb8e-44ca-ac14-dadc04eee4cd": {
+ "path": "3ba89ecd-cb8e-44ca-ac14-dadc04eee4cd",
+ "cellName": "resolve-config.ts",
+ "cellId": "3ba89ecd-cb8e-44ca-ac14-dadc04eee4cd",
+ "visible": true,
+ "parentCellId": "ab7e1c25-5704-4933-ba49-e663112e7d63"
+ },
+ "d496aee2-d3ca-45fe-9014-347b0c49d664": {
+ "path": "d496aee2-d3ca-45fe-9014-347b0c49d664",
+ "cellName": "Parse CSS and Process `@theme` Rules - index.ts:L538-592",
+ "cellId": "d496aee2-d3ca-45fe-9014-347b0c49d664",
+ "visible": true,
+ "parentCellId": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347"
+ },
+ "packages/tailwindcss/src/index.ts-simstep-f3bd330a-032f-4154-be70-0b6b7f43feda": {
+ "path": "packages/tailwindcss/src/index.ts-simstep-f3bd330a-032f-4154-be70-0b6b7f43feda",
+ "fileName": "index.ts",
+ "wiki": "The build process begins by parsing the input CSS. When an `@theme` at-rule is found, the engine extracts all the CSS custom properties and `@keyframes` defined within it. These values are the first layer of customization.",
+ "cellName": "Parse CSS and Process `@theme` Rules - index.ts:L538-592",
+ "cellId": "d496aee2-d3ca-45fe-9014-347b0c49d664",
+ "visible": true,
+ "startLine": 538,
+ "endLine": 592,
+ "parentCellId": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347",
+ "parentPath": "packages/tailwindcss/src/index.ts"
+ },
+ "77b16a01-56a2-44cb-8df3-db2c02adceb7": {
+ "path": "77b16a01-56a2-44cb-8df3-db2c02adceb7",
+ "cellName": "Resolve JavaScript Configuration - resolve-config.ts:L42-50",
+ "cellId": "77b16a01-56a2-44cb-8df3-db2c02adceb7",
+ "visible": true,
+ "parentCellId": "3ba89ecd-cb8e-44ca-ac14-dadc04eee4cd"
+ },
+ "packages/tailwindcss/src/compat/config/resolve-config.ts-simstep-adb9b981-59c4-48ba-9903-8ff051d2479b": {
+ "path": "packages/tailwindcss/src/compat/config/resolve-config.ts-simstep-adb9b981-59c4-48ba-9903-8ff051d2479b",
+ "fileName": "resolve-config.ts",
+ "wiki": "The engine loads the `tailwind.config.js` file, along with any specified presets. It recursively merges the `theme` and `theme.extend` objects from these sources to create a single, fully resolved configuration object.",
+ "cellName": "Resolve JavaScript Configuration - resolve-config.ts:L42-50",
+ "cellId": "77b16a01-56a2-44cb-8df3-db2c02adceb7",
+ "visible": true,
+ "startLine": 42,
+ "endLine": 50,
+ "parentCellId": "3ba89ecd-cb8e-44ca-ac14-dadc04eee4cd",
+ "parentPath": "packages/tailwindcss/src/compat/config/resolve-config.ts"
+ },
+ "8dd53534-ac78-4604-b647-35a223654911": {
+ "path": "8dd53534-ac78-4604-b647-35a223654911",
+ "cellName": "Apply JS Config to Theme and Merge - apply-config-to-theme.ts:L33-119",
+ "cellId": "8dd53534-ac78-4604-b647-35a223654911",
+ "visible": true,
+ "parentCellId": "81a8cde9-b849-4eef-9441-c91b4ec43848"
+ },
+ "packages/tailwindcss/src/compat/apply-config-to-theme.ts-simstep-4444211c-72da-4515-a507-e555b0954069": {
+ "path": "packages/tailwindcss/src/compat/apply-config-to-theme.ts-simstep-4444211c-72da-4515-a507-e555b0954069",
+ "fileName": "apply-config-to-theme.ts",
+ "wiki": "The system iterates over the resolved JS config. It converts JavaScript-style theme keys (e.g., `colors.brand-red`) into CSS custom property names (e.g., `--color-brand-red`) and adds them to the same `Theme` object. During this step, precedence rules are enforced: values from a standard `@theme` rule override values from the JS config, which in turn override values from `@theme default`.",
+ "cellName": "Apply JS Config to Theme and Merge - apply-config-to-theme.ts:L33-119",
+ "cellId": "8dd53534-ac78-4604-b647-35a223654911",
+ "visible": true,
+ "startLine": 33,
+ "endLine": 119,
+ "parentCellId": "81a8cde9-b849-4eef-9441-c91b4ec43848",
+ "parentPath": "packages/tailwindcss/src/compat/apply-config-to-theme.ts"
+ },
+ "b0c1e709-112b-4444-8a6c-4ff5f6c2fe12": {
+ "path": "b0c1e709-112b-4444-8a6c-4ff5f6c2fe12",
+ "cellName": "Generate CSS Utilities - compile.ts:L20-213",
+ "cellId": "b0c1e709-112b-4444-8a6c-4ff5f6c2fe12",
+ "visible": true,
+ "parentCellId": "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9"
+ },
+ "packages/tailwindcss/src/compile.ts-simstep-f289837c-4a0a-4f3e-897d-84aa2e21fd3e": {
+ "path": "packages/tailwindcss/src/compile.ts-simstep-f289837c-4a0a-4f3e-897d-84aa2e21fd3e",
+ "fileName": "compile.ts",
+ "wiki": "Using the fully configured `DesignSystem`, the engine processes utility classes found in your content files (e.g., `bg-brand-blue`, `m-22`). It looks up the corresponding theme value for each class and generates the final CSS rules.",
+ "cellName": "Generate CSS Utilities - compile.ts:L20-213",
+ "cellId": "b0c1e709-112b-4444-8a6c-4ff5f6c2fe12",
+ "visible": true,
+ "startLine": 20,
+ "endLine": 213,
+ "parentCellId": "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9",
+ "parentPath": "packages/tailwindcss/src/compile.ts"
+ },
+ "c84cfc48-369e-4d1d-846c-9487f3d46057": {
+ "path": "c84cfc48-369e-4d1d-846c-9487f3d46057",
+ "cellName": "Populate Theme\nObject from\nCSS",
+ "cellId": "c84cfc48-369e-4d1d-846c-9487f3d46057",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "generated-edge-simstep-9b8e2e68-fb14-4434-a07d-4b7526a7df5d-c84cfc48-369e-4d1d-846c-9487f3d46057": {
+ "path": "generated-edge-simstep-9b8e2e68-fb14-4434-a07d-4b7526a7df5d-c84cfc48-369e-4d1d-846c-9487f3d46057",
+ "fileName": "index.ts",
+ "cellName": "Populate Theme Object from CSS",
+ "cellId": "c84cfc48-369e-4d1d-846c-9487f3d46057",
+ "visible": true,
+ "startLine": 569,
+ "endLine": 569,
+ "parentPath": "packages/tailwindcss/src/index.ts"
+ },
+ "1ef2725f-414c-4956-81cf-d83cc7b4fa5d": {
+ "path": "1ef2725f-414c-4956-81cf-d83cc7b4fa5d",
+ "cellName": "Transfer Resolved\nJS Config",
+ "cellId": "1ef2725f-414c-4956-81cf-d83cc7b4fa5d",
+ "visible": true,
+ "parentCellId": "30c8c2d0-c23e-4a0f-be8d-f2f3d609d920"
+ },
+ "generated-edge-simstep-46783681-b8f0-40a3-963e-f7c3f266dd6c-1ef2725f-414c-4956-81cf-d83cc7b4fa5d": {
+ "path": "generated-edge-simstep-46783681-b8f0-40a3-963e-f7c3f266dd6c-1ef2725f-414c-4956-81cf-d83cc7b4fa5d",
+ "fileName": "resolve-config.ts",
+ "cellName": "Transfer Resolved JS Config",
+ "cellId": "1ef2725f-414c-4956-81cf-d83cc7b4fa5d",
+ "visible": true,
+ "startLine": 280,
+ "endLine": 281,
+ "parentPath": "packages/tailwindcss/src/compat/config/resolve-config.ts"
+ },
+ "3b7ab692-5d29-4cb8-8ed7-84bef3f5886f": {
+ "path": "3b7ab692-5d29-4cb8-8ed7-84bef3f5886f",
+ "cellName": "Finalized Theme\nfor Generation",
+ "cellId": "3b7ab692-5d29-4cb8-8ed7-84bef3f5886f",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "generated-edge-simstep-65b152f0-aff8-4975-996b-d046e44265d9-3b7ab692-5d29-4cb8-8ed7-84bef3f5886f": {
+ "path": "generated-edge-simstep-65b152f0-aff8-4975-996b-d046e44265d9-3b7ab692-5d29-4cb8-8ed7-84bef3f5886f",
+ "fileName": "apply-config-to-theme.ts",
+ "cellName": "Finalized Theme for Generation",
+ "cellId": "3b7ab692-5d29-4cb8-8ed7-84bef3f5886f",
+ "visible": true,
+ "startLine": 777,
+ "endLine": 777,
+ "parentPath": "packages/tailwindcss/src/compat/apply-config-to-theme.ts"
+ },
+ "4006b47a-16f3-4e62-9cc4-efd228fef6cf": {
+ "path": "4006b47a-16f3-4e62-9cc4-efd228fef6cf",
+ "cellName": "candidate.ts",
+ "cellId": "4006b47a-16f3-4e62-9cc4-efd228fef6cf",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "905dc9a1-50bc-46aa-ba84-1b3bb59b780e": {
+ "path": "905dc9a1-50bc-46aa-ba84-1b3bb59b780e",
+ "cellName": "variants.ts",
+ "cellId": "905dc9a1-50bc-46aa-ba84-1b3bb59b780e",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "9819606a-f6b6-4001-aacf-1127d3666915": {
+ "path": "9819606a-f6b6-4001-aacf-1127d3666915",
+ "cellName": "Flow: Variant Application - Initial Compilation - compile.ts:L23-27",
+ "cellId": "9819606a-f6b6-4001-aacf-1127d3666915",
+ "visible": true,
+ "parentCellId": "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9"
+ },
+ "packages/tailwindcss/src/compile.ts-simstep-eaa78521-2d8b-4bff-ade7-099ab10fb0dd": {
+ "path": "packages/tailwindcss/src/compile.ts-simstep-eaa78521-2d8b-4bff-ade7-099ab10fb0dd",
+ "fileName": "compile.ts",
+ "wiki": "The Tailwind CSS engine starts the compilation process by receiving a set of raw class strings extracted from source files. This example will trace the class `md:hover:underline`.",
+ "cellName": "Flow: Variant Application - Initial Compilation - compile.ts:L23-27",
+ "cellId": "9819606a-f6b6-4001-aacf-1127d3666915",
+ "visible": true,
+ "startLine": 23,
+ "endLine": 27,
+ "parentCellId": "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9",
+ "parentPath": "packages/tailwindcss/src/compile.ts"
+ },
+ "cb0109bf-3e83-44de-9f04-4d995ca3b47f": {
+ "path": "cb0109bf-3e83-44de-9f04-4d995ca3b47f",
+ "cellName": "Node: Parse Candidate String - candidate.ts:L222-225",
+ "cellId": "cb0109bf-3e83-44de-9f04-4d995ca3b47f",
+ "visible": true,
+ "parentCellId": "4006b47a-16f3-4e62-9cc4-efd228fef6cf"
+ },
+ "packages/tailwindcss/src/candidate.ts-simstep-82d5255c-7c07-47a4-8df5-70710261d128": {
+ "path": "packages/tailwindcss/src/candidate.ts-simstep-82d5255c-7c07-47a4-8df5-70710261d128",
+ "fileName": "candidate.ts",
+ "wiki": "The `parseCandidate` function deconstructs the class string. It splits the string by the separator `:` into variants (`md`, `hover`) and a base utility (`underline`). It internally calls `parseVariant` for each variant part to create a structured `Candidate` object.",
+ "cellName": "Node: Parse Candidate String - candidate.ts:L222-225",
+ "cellId": "cb0109bf-3e83-44de-9f04-4d995ca3b47f",
+ "visible": true,
+ "startLine": 222,
+ "endLine": 225,
+ "parentCellId": "4006b47a-16f3-4e62-9cc4-efd228fef6cf",
+ "parentPath": "packages/tailwindcss/src/candidate.ts"
+ },
+ "7cbdc91e-47bc-4673-80f2-ecbac3f762c7": {
+ "path": "7cbdc91e-47bc-4673-80f2-ecbac3f762c7",
+ "cellName": "Node: Generate Base Utility Rule - compile.ts:L146-152",
+ "cellId": "7cbdc91e-47bc-4673-80f2-ecbac3f762c7",
+ "visible": true,
+ "parentCellId": "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9"
+ },
+ "packages/tailwindcss/src/compile.ts-simstep-a122af75-88a8-4058-bc30-b8c4f39509fe": {
+ "path": "packages/tailwindcss/src/compile.ts-simstep-a122af75-88a8-4058-bc30-b8c4f39509fe",
+ "fileName": "compile.ts",
+ "wiki": "The compiler looks up the base utility (`underline`) in the design system's utility collection and generates the base Abstract Syntax Tree (AST) for its CSS rule.",
+ "cellName": "Node: Generate Base Utility Rule - compile.ts:L146-152",
+ "cellId": "7cbdc91e-47bc-4673-80f2-ecbac3f762c7",
+ "visible": true,
+ "startLine": 146,
+ "endLine": 152,
+ "parentCellId": "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9",
+ "parentPath": "packages/tailwindcss/src/compile.ts"
+ },
+ "af5bb6af-b0ac-4f02-acc9-eedb55fe519d": {
+ "path": "af5bb6af-b0ac-4f02-acc9-eedb55fe519d",
+ "cellName": "Node: Apply Variants to Rule - compile.ts:L183-188",
+ "cellId": "af5bb6af-b0ac-4f02-acc9-eedb55fe519d",
+ "visible": true,
+ "parentCellId": "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9"
+ },
+ "packages/tailwindcss/src/compile.ts-simstep-2b6cc5b2-2c96-49e5-8f98-e7f98efea128": {
+ "path": "packages/tailwindcss/src/compile.ts-simstep-2b6cc5b2-2c96-49e5-8f98-e7f98efea128",
+ "fileName": "compile.ts",
+ "wiki": "The variants are applied sequentially to the base AST. The `variants.compare` function first sorts them (e.g., responsive `md` before state `hover`). Then, `applyVariant` is called for each. The `hover` variant wraps the rule in a `:hover` pseudo-class, and the `md` variant wraps the result in a media query, progressively modifying the AST.",
+ "cellName": "Node: Apply Variants to Rule - compile.ts:L183-188",
+ "cellId": "af5bb6af-b0ac-4f02-acc9-eedb55fe519d",
+ "visible": true,
+ "startLine": 183,
+ "endLine": 188,
+ "parentCellId": "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9",
+ "parentPath": "packages/tailwindcss/src/compile.ts"
+ },
+ "fdfbc500-48c7-46dc-9441-abcd42344e4c": {
+ "path": "fdfbc500-48c7-46dc-9441-abcd42344e4c",
+ "cellName": "Node: Sort and Generate Final CSS - compile.ts:L95-100",
+ "cellId": "fdfbc500-48c7-46dc-9441-abcd42344e4c",
+ "visible": true,
+ "parentCellId": "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9"
+ },
+ "packages/tailwindcss/src/compile.ts-simstep-1f173972-2fe5-42c2-b8ea-f6992ab624e2": {
+ "path": "packages/tailwindcss/src/compile.ts-simstep-1f173972-2fe5-42c2-b8ea-f6992ab624e2",
+ "fileName": "compile.ts",
+ "wiki": "The compiler sorts the generated AST node against all other generated nodes based on variant and property order. Finally, it stringifies the entire sorted AST tree into the final CSS output.",
+ "cellName": "Node: Sort and Generate Final CSS - compile.ts:L95-100",
+ "cellId": "fdfbc500-48c7-46dc-9441-abcd42344e4c",
+ "visible": true,
+ "startLine": 95,
+ "endLine": 100,
+ "parentCellId": "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9",
+ "parentPath": "packages/tailwindcss/src/compile.ts"
+ },
+ "30d2bf97-9dc9-4900-82dc-0008dbcb3d47": {
+ "path": "30d2bf97-9dc9-4900-82dc-0008dbcb3d47",
+ "cellName": "Flow: Custom Variant Definition - Parse CSS - index.ts:L350-352",
+ "cellId": "30d2bf97-9dc9-4900-82dc-0008dbcb3d47",
+ "visible": true,
+ "parentCellId": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347"
+ },
+ "packages/tailwindcss/src/index.ts-simstep-07d6d4fa-896e-4cd5-84aa-685001282e98": {
+ "path": "packages/tailwindcss/src/index.ts-simstep-07d6d4fa-896e-4cd5-84aa-685001282e98",
+ "fileName": "index.ts",
+ "wiki": "In a separate flow, the engine parses the user's CSS file and detects custom variant definitions, such as `@custom-variant`. This happens before source files are scanned for classes. This example traces `@custom-variant hocus (&:hover, &:focus);`.",
+ "cellName": "Flow: Custom Variant Definition - Parse CSS - index.ts:L350-352",
+ "cellId": "30d2bf97-9dc9-4900-82dc-0008dbcb3d47",
+ "visible": true,
+ "startLine": 350,
+ "endLine": 352,
+ "parentCellId": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347",
+ "parentPath": "packages/tailwindcss/src/index.ts"
+ },
+ "b18fca3e-8529-4b7f-8061-c8385ef13e3b": {
+ "path": "b18fca3e-8529-4b7f-8061-c8385ef13e3b",
+ "cellName": "Node: Register Custom Variant - variants.ts:L360-368",
+ "cellId": "b18fca3e-8529-4b7f-8061-c8385ef13e3b",
+ "visible": true,
+ "parentCellId": "905dc9a1-50bc-46aa-ba84-1b3bb59b780e"
+ },
+ "packages/tailwindcss/src/variants.ts-simstep-62f1d35b-b450-4d02-9124-8d11383e0b52": {
+ "path": "packages/tailwindcss/src/variants.ts-simstep-62f1d35b-b450-4d02-9124-8d11383e0b52",
+ "fileName": "variants.ts",
+ "wiki": "The engine registers the new 'hocus' variant. It creates a corresponding `applyFn` based on the provided selectors `(&:hover, &:focus)` and stores it in the `designSystem.variants` collection. This makes the `hocus:` variant available for use, just like built-in variants.",
+ "cellName": "Node: Register Custom Variant - variants.ts:L360-368",
+ "cellId": "b18fca3e-8529-4b7f-8061-c8385ef13e3b",
+ "visible": true,
+ "startLine": 360,
+ "endLine": 368,
+ "parentCellId": "905dc9a1-50bc-46aa-ba84-1b3bb59b780e",
+ "parentPath": "packages/tailwindcss/src/variants.ts"
+ },
+ "08bb973f-591d-4502-9fca-68d1a097fb08": {
+ "path": "08bb973f-591d-4502-9fca-68d1a097fb08",
+ "cellName": "Data Flow:\nPass Candidate\nString for\nParsing",
+ "cellId": "08bb973f-591d-4502-9fca-68d1a097fb08",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "generated-edge-simstep-673ad478-e89b-4d0c-836e-3b4aad72b2d7-08bb973f-591d-4502-9fca-68d1a097fb08": {
+ "path": "generated-edge-simstep-673ad478-e89b-4d0c-836e-3b4aad72b2d7-08bb973f-591d-4502-9fca-68d1a097fb08",
+ "fileName": "compile.ts",
+ "cellName": "Data Flow: Pass Candidate String for Parsing",
+ "cellId": "08bb973f-591d-4502-9fca-68d1a097fb08",
+ "visible": true,
+ "startLine": 32,
+ "endLine": 32,
+ "parentPath": "packages/tailwindcss/src/compile.ts"
+ },
+ "006b92f3-9cf3-4d28-8a5f-6a1916d9d43c": {
+ "path": "006b92f3-9cf3-4d28-8a5f-6a1916d9d43c",
+ "cellName": "Data Flow:\nPass Parsed\nCandidate for\nRule Generation",
+ "cellId": "006b92f3-9cf3-4d28-8a5f-6a1916d9d43c",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "generated-edge-simstep-a9ef6393-31b2-4559-a1cb-8c4d2f7078fa-006b92f3-9cf3-4d28-8a5f-6a1916d9d43c": {
+ "path": "generated-edge-simstep-a9ef6393-31b2-4559-a1cb-8c4d2f7078fa-006b92f3-9cf3-4d28-8a5f-6a1916d9d43c",
+ "fileName": "candidate.ts",
+ "cellName": "Data Flow: Pass Parsed Candidate for Rule Generation",
+ "cellId": "006b92f3-9cf3-4d28-8a5f-6a1916d9d43c",
+ "visible": true,
+ "startLine": 40,
+ "endLine": 40,
+ "parentPath": "packages/tailwindcss/src/candidate.ts"
+ },
+ "77ad0426-7373-4168-be2b-34a1bce4a89a": {
+ "path": "77ad0426-7373-4168-be2b-34a1bce4a89a",
+ "cellName": "Data Flow:\nPass AST\nand Variants\nfor Application",
+ "cellId": "77ad0426-7373-4168-be2b-34a1bce4a89a",
+ "visible": true,
+ "parentCellId": "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9"
+ },
+ "generated-edge-simstep-8d9c8785-0c68-432d-9472-03a26d9bfb75-77ad0426-7373-4168-be2b-34a1bce4a89a": {
+ "path": "generated-edge-simstep-8d9c8785-0c68-432d-9472-03a26d9bfb75-77ad0426-7373-4168-be2b-34a1bce4a89a",
+ "fileName": "compile.ts",
+ "cellName": "Data Flow: Pass AST and Variants for Application",
+ "cellId": "77ad0426-7373-4168-be2b-34a1bce4a89a",
+ "visible": true,
+ "startLine": 166,
+ "endLine": 166,
+ "parentPath": "packages/tailwindcss/src/compile.ts"
+ },
+ "0362a778-b1d3-4161-8a92-4cb3f23cfe4a": {
+ "path": "0362a778-b1d3-4161-8a92-4cb3f23cfe4a",
+ "cellName": "Data Flow:\nPass Final\nAST for\nCSS Generation",
+ "cellId": "0362a778-b1d3-4161-8a92-4cb3f23cfe4a",
+ "visible": true,
+ "parentCellId": "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9"
+ },
+ "generated-edge-simstep-9ce76e94-b5fe-44e1-a8c3-88fe41777f35-0362a778-b1d3-4161-8a92-4cb3f23cfe4a": {
+ "path": "generated-edge-simstep-9ce76e94-b5fe-44e1-a8c3-88fe41777f35-0362a778-b1d3-4161-8a92-4cb3f23cfe4a",
+ "fileName": "compile.ts",
+ "cellName": "Data Flow: Pass Final AST for CSS Generation",
+ "cellId": "0362a778-b1d3-4161-8a92-4cb3f23cfe4a",
+ "visible": true,
+ "startLine": 82,
+ "endLine": 82,
+ "parentPath": "packages/tailwindcss/src/compile.ts"
+ },
+ "90a6ac8c-db96-4cfb-aab8-4550cdc73d36": {
+ "path": "90a6ac8c-db96-4cfb-aab8-4550cdc73d36",
+ "cellName": "Data Flow:\nPass Variant\nDefinition for\nRegistration",
+ "cellId": "90a6ac8c-db96-4cfb-aab8-4550cdc73d36",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "generated-edge-simstep-c975cd6e-1ad8-4209-b8e9-dd15672c8027-90a6ac8c-db96-4cfb-aab8-4550cdc73d36": {
+ "path": "generated-edge-simstep-c975cd6e-1ad8-4209-b8e9-dd15672c8027-90a6ac8c-db96-4cfb-aab8-4550cdc73d36",
+ "fileName": "index.ts",
+ "cellName": "Data Flow: Pass Variant Definition for Registration",
+ "cellId": "90a6ac8c-db96-4cfb-aab8-4550cdc73d36",
+ "visible": true,
+ "startLine": 360,
+ "endLine": 360,
+ "parentPath": "packages/tailwindcss/src/index.ts"
+ },
+ "b455a6d1-3d52-4434-b400-07c67d0f2d5f": {
+ "path": "b455a6d1-3d52-4434-b400-07c67d0f2d5f",
+ "cellName": "playgrounds",
+ "cellId": "b455a6d1-3d52-4434-b400-07c67d0f2d5f",
+ "visible": true
+ },
+ "3d5f03e6-8cde-4451-a23f-4a2d158c71fe": {
+ "path": "3d5f03e6-8cde-4451-a23f-4a2d158c71fe",
+ "cellName": "nextjs",
+ "cellId": "3d5f03e6-8cde-4451-a23f-4a2d158c71fe",
+ "visible": true,
+ "parentCellId": "b455a6d1-3d52-4434-b400-07c67d0f2d5f"
+ },
+ "9b9585a8-7790-42ec-abe0-879b5078eb36": {
+ "path": "9b9585a8-7790-42ec-abe0-879b5078eb36",
+ "cellName": "vite",
+ "cellId": "9b9585a8-7790-42ec-abe0-879b5078eb36",
+ "visible": true,
+ "parentCellId": "b455a6d1-3d52-4434-b400-07c67d0f2d5f"
+ },
+ "147fcd88-9ff4-4fd5-8c10-b518d9fe3630": {
+ "path": "147fcd88-9ff4-4fd5-8c10-b518d9fe3630",
+ "cellName": "@tailwindcss-postcss",
+ "cellId": "147fcd88-9ff4-4fd5-8c10-b518d9fe3630",
+ "visible": true,
+ "parentCellId": "8cf7f1e0-3fe6-46a3-b961-356a05cf5c23"
+ },
+ "2b07b8c2-5cdf-4a14-b401-6d47a1b6b28a": {
+ "path": "2b07b8c2-5cdf-4a14-b401-6d47a1b6b28a",
+ "cellName": "postcss.config.js",
+ "cellId": "2b07b8c2-5cdf-4a14-b401-6d47a1b6b28a",
+ "visible": true,
+ "parentCellId": "3d5f03e6-8cde-4451-a23f-4a2d158c71fe"
+ },
+ "195406ec-0ef6-4ddc-80e8-6bd58afcb908": {
+ "path": "195406ec-0ef6-4ddc-80e8-6bd58afcb908",
+ "cellName": "vite.config.ts",
+ "cellId": "195406ec-0ef6-4ddc-80e8-6bd58afcb908",
+ "visible": true,
+ "parentCellId": "9b9585a8-7790-42ec-abe0-879b5078eb36"
+ },
+ "579630a3-44bc-46d8-8f70-1cf46e48cf29": {
+ "path": "579630a3-44bc-46d8-8f70-1cf46e48cf29",
+ "cellName": "src",
+ "cellId": "579630a3-44bc-46d8-8f70-1cf46e48cf29",
+ "visible": true,
+ "parentCellId": "147fcd88-9ff4-4fd5-8c10-b518d9fe3630"
+ },
+ "fcb21d37-9994-4006-8fd4-098f96bec9cc": {
+ "path": "fcb21d37-9994-4006-8fd4-098f96bec9cc",
+ "cellName": "index.ts",
+ "cellId": "fcb21d37-9994-4006-8fd4-098f96bec9cc",
+ "visible": true,
+ "parentCellId": "579630a3-44bc-46d8-8f70-1cf46e48cf29"
+ },
+ "ba5a34f3-b23f-4fda-b2ed-da992e47dfb9": {
+ "path": "ba5a34f3-b23f-4fda-b2ed-da992e47dfb9",
+ "cellName": "Flow: PostCSS Integration - Step 1: Configure PostCSS - postcss.config.js:L1-5",
+ "cellId": "ba5a34f3-b23f-4fda-b2ed-da992e47dfb9",
+ "visible": true,
+ "parentCellId": "2b07b8c2-5cdf-4a14-b401-6d47a1b6b28a"
+ },
+ "playgrounds/nextjs/postcss.config.js-simstep-c0ea92ee-3c0a-4dc5-b3ad-9e02d73420c1": {
+ "path": "playgrounds/nextjs/postcss.config.js-simstep-c0ea92ee-3c0a-4dc5-b3ad-9e02d73420c1",
+ "fileName": "postcss.config.js",
+ "wiki": "A developer integrates Tailwind CSS into their project by creating a `postcss.config.js` file and adding `@tailwindcss/postcss` to the list of PostCSS plugins. This configuration tells any PostCSS-based build tool (like Next.js, or PostCSS CLI) to process CSS files with Tailwind.",
+ "cellName": "Flow: PostCSS Integration - Step 1: Configure PostCSS - postcss.config.js:L1-5",
+ "cellId": "ba5a34f3-b23f-4fda-b2ed-da992e47dfb9",
+ "visible": true,
+ "startLine": 1,
+ "endLine": 5,
+ "parentCellId": "2b07b8c2-5cdf-4a14-b401-6d47a1b6b28a",
+ "parentPath": "playgrounds/nextjs/postcss.config.js"
+ },
+ "a8add52e-7ad4-4a10-90d6-aa4bbcc7199d": {
+ "path": "a8add52e-7ad4-4a10-90d6-aa4bbcc7199d",
+ "cellName": "Flow: PostCSS Integration - Step 3: Initialize Tailwind CSS Plugin - index.ts:L34-347",
+ "cellId": "a8add52e-7ad4-4a10-90d6-aa4bbcc7199d",
+ "visible": true,
+ "parentCellId": "fcb21d37-9994-4006-8fd4-098f96bec9cc"
+ },
+ "packages/@tailwindcss-postcss/src/index.ts-simstep-8aa13357-95a4-4cea-b4bd-b5b70d4f3de3": {
+ "path": "packages/@tailwindcss-postcss/src/index.ts-simstep-8aa13357-95a4-4cea-b4bd-b5b70d4f3de3",
+ "fileName": "index.ts",
+ "wiki": "PostCSS initializes the `@tailwindcss/postcss` plugin. The plugin sets up a shared context, including loading the Tailwind configuration (`tailwind.config.js`), and prepares to process the CSS by hooking into PostCSS's event system, primarily using the `Once` event which runs once per file.",
+ "cellName": "Flow: PostCSS Integration - Step 3: Initialize Tailwind CSS Plugin - index.ts:L34-347",
+ "cellId": "a8add52e-7ad4-4a10-90d6-aa4bbcc7199d",
+ "visible": true,
+ "startLine": 34,
+ "endLine": 347,
+ "parentCellId": "fcb21d37-9994-4006-8fd4-098f96bec9cc",
+ "parentPath": "packages/@tailwindcss-postcss/src/index.ts"
+ },
+ "e4000d03-510d-4ae5-90f8-fcc41664a401": {
+ "path": "e4000d03-510d-4ae5-90f8-fcc41664a401",
+ "cellName": "Flow: PostCSS Integration - Step 5: Scan Files and Generate CSS - index.ts:L129-202",
+ "cellId": "e4000d03-510d-4ae5-90f8-fcc41664a401",
+ "visible": true,
+ "parentCellId": "fcb21d37-9994-4006-8fd4-098f96bec9cc"
+ },
+ "packages/@tailwindcss-postcss/src/index.ts-simstep-6ac19244-330b-46a3-8ee1-3342c8edaf5b": {
+ "path": "packages/@tailwindcss-postcss/src/index.ts-simstep-6ac19244-330b-46a3-8ee1-3342c8edaf5b",
+ "fileName": "index.ts",
+ "wiki": "The plugin's core logic executes. It first scans all content files specified in `tailwind.config.js` to find all utility classes used. It then uses this list of classes (candidates) to compile the input CSS, replacing the `@tailwind` directives with the generated CSS rules. It also tracks all scanned files as dependencies for the build tool to enable caching and incremental rebuilds.",
+ "cellName": "Flow: PostCSS Integration - Step 5: Scan Files and Generate CSS - index.ts:L129-202",
+ "cellId": "e4000d03-510d-4ae5-90f8-fcc41664a401",
+ "visible": true,
+ "startLine": 129,
+ "endLine": 202,
+ "parentCellId": "fcb21d37-9994-4006-8fd4-098f96bec9cc",
+ "parentPath": "packages/@tailwindcss-postcss/src/index.ts"
+ },
+ "e765979a-1aa9-4d06-adde-fdadae2ec57b": {
+ "path": "e765979a-1aa9-4d06-adde-fdadae2ec57b",
+ "cellName": "Flow: PostCSS Integration - Step 7: Finalize Output - index.ts:L329-337",
+ "cellId": "e765979a-1aa9-4d06-adde-fdadae2ec57b",
+ "visible": true,
+ "parentCellId": "fcb21d37-9994-4006-8fd4-098f96bec9cc"
+ },
+ "packages/@tailwindcss-postcss/src/index.ts-simstep-0e41a1b5-e546-486b-ae62-d6861fdf7ce5": {
+ "path": "packages/@tailwindcss-postcss/src/index.ts-simstep-0e41a1b5-e546-486b-ae62-d6861fdf7ce5",
+ "fileName": "index.ts",
+ "wiki": "After the plugin has modified the AST, control is returned to the PostCSS runner. The runner then processes the output of any subsequent plugins and finally stringifies the final AST into a CSS string, which is written to the output file.",
+ "cellName": "Flow: PostCSS Integration - Step 7: Finalize Output - index.ts:L329-337",
+ "cellId": "e765979a-1aa9-4d06-adde-fdadae2ec57b",
+ "visible": true,
+ "startLine": 329,
+ "endLine": 337,
+ "parentCellId": "fcb21d37-9994-4006-8fd4-098f96bec9cc",
+ "parentPath": "packages/@tailwindcss-postcss/src/index.ts"
+ },
+ "56c49227-f8f8-4f43-85f6-21a320c15ab2": {
+ "path": "56c49227-f8f8-4f43-85f6-21a320c15ab2",
+ "cellName": "Flow: Vite Integration - Step 1: Configure Vite - vite.config.ts:L1-7",
+ "cellId": "56c49227-f8f8-4f43-85f6-21a320c15ab2",
+ "visible": true,
+ "parentCellId": "195406ec-0ef6-4ddc-80e8-6bd58afcb908"
+ },
+ "playgrounds/vite/vite.config.ts-simstep-31c30553-f46d-4083-9634-2581d6e0f040": {
+ "path": "playgrounds/vite/vite.config.ts-simstep-31c30553-f46d-4083-9634-2581d6e0f040",
+ "fileName": "vite.config.ts",
+ "wiki": "A developer adds the `@tailwindcss/vite` plugin to their `vite.config.ts` file. This is the entry point for integrating Tailwind CSS in a Vite project.",
+ "cellName": "Flow: Vite Integration - Step 1: Configure Vite - vite.config.ts:L1-7",
+ "cellId": "56c49227-f8f8-4f43-85f6-21a320c15ab2",
+ "visible": true,
+ "startLine": 1,
+ "endLine": 7,
+ "parentCellId": "195406ec-0ef6-4ddc-80e8-6bd58afcb908",
+ "parentPath": "playgrounds/vite/vite.config.ts"
+ },
+ "9a1fab25-726b-42cd-87da-76468f2e125a": {
+ "path": "9a1fab25-726b-42cd-87da-76468f2e125a",
+ "cellName": "Flow: Vite Integration - Step 3: Initialize Vite Plugins - index.ts:L55-130",
+ "cellId": "9a1fab25-726b-42cd-87da-76468f2e125a",
+ "visible": true,
+ "parentCellId": "11f84044-473f-4f66-a07b-e497d279a653"
+ },
+ "packages/@tailwindcss-vite/src/index.ts-simstep-847f2607-c677-4eaa-b73e-dd372d73ef70": {
+ "path": "packages/@tailwindcss-vite/src/index.ts-simstep-847f2607-c677-4eaa-b73e-dd372d73ef70",
+ "fileName": "index.ts",
+ "wiki": "The `tailwindcss` function returns an array of specialized Vite plugins. These plugins use different hooks (`configureServer`, `transform`) and apply modes (`serve`, `build`) to handle CSS generation efficiently for both development and production builds.",
+ "cellName": "Flow: Vite Integration - Step 3: Initialize Vite Plugins - index.ts:L55-130",
+ "cellId": "9a1fab25-726b-42cd-87da-76468f2e125a",
+ "visible": true,
+ "startLine": 55,
+ "endLine": 130,
+ "parentCellId": "11f84044-473f-4f66-a07b-e497d279a653",
+ "parentPath": "packages/@tailwindcss-vite/src/index.ts"
+ },
+ "f2f78a72-7d51-48d9-be4e-6eaeda5e6ad7": {
+ "path": "f2f78a72-7d51-48d9-be4e-6eaeda5e6ad7",
+ "cellName": "Flow: Vite Integration - Step 5: Transform and Generate CSS (Serve) - index.ts:L74-96",
+ "cellId": "f2f78a72-7d51-48d9-be4e-6eaeda5e6ad7",
+ "visible": true,
+ "parentCellId": "11f84044-473f-4f66-a07b-e497d279a653"
+ },
+ "packages/@tailwindcss-vite/src/index.ts-simstep-a660c7cc-56bb-4fac-af79-3d00679a5759": {
+ "path": "packages/@tailwindcss-vite/src/index.ts-simstep-a660c7cc-56bb-4fac-af79-3d00679a5759",
+ "fileName": "index.ts",
+ "wiki": "The `@tailwindcss/vite:generate:serve` plugin's `transform` hook is executed. It scans content files for class candidates, compiles the input CSS with `@tailwind` directives, and generates the final CSS. It also registers dependencies with Vite's module graph (`this.addWatchFile`) to trigger hot module replacement (HMR) when content files change.",
+ "cellName": "Flow: Vite Integration - Step 5: Transform and Generate CSS (Serve) - index.ts:L74-96",
+ "cellId": "f2f78a72-7d51-48d9-be4e-6eaeda5e6ad7",
+ "visible": true,
+ "startLine": 74,
+ "endLine": 96,
+ "parentCellId": "11f84044-473f-4f66-a07b-e497d279a653",
+ "parentPath": "packages/@tailwindcss-vite/src/index.ts"
+ },
+ "61b47a59-ece5-42e6-b4cd-909a39aff89a": {
+ "path": "61b47a59-ece5-42e6-b4cd-909a39aff89a",
+ "cellName": "Flow: Vite Integration - Step 7: Optimize CSS for Production (Build) - index.ts:L99-128",
+ "cellId": "61b47a59-ece5-42e6-b4cd-909a39aff89a",
+ "visible": true,
+ "parentCellId": "11f84044-473f-4f66-a07b-e497d279a653"
+ },
+ "packages/@tailwindcss-vite/src/index.ts-simstep-f1917cc3-57ba-4953-84c5-19442c893485": {
+ "path": "packages/@tailwindcss-vite/src/index.ts-simstep-f1917cc3-57ba-4953-84c5-19442c893485",
+ "fileName": "index.ts",
+ "wiki": "When running a production build (`vite build`), the `@tailwindcss/vite:generate:build` plugin is used instead. After generating the CSS, it performs an additional optimization step, which often includes minification using Lightning CSS to ensure the smallest possible asset size for production.",
+ "cellName": "Flow: Vite Integration - Step 7: Optimize CSS for Production (Build) - index.ts:L99-128",
+ "cellId": "61b47a59-ece5-42e6-b4cd-909a39aff89a",
+ "visible": true,
+ "startLine": 99,
+ "endLine": 128,
+ "parentCellId": "11f84044-473f-4f66-a07b-e497d279a653",
+ "parentPath": "packages/@tailwindcss-vite/src/index.ts"
+ },
+ "24eb4805-f561-46d2-aa86-8a93c38537be": {
+ "path": "24eb4805-f561-46d2-aa86-8a93c38537be",
+ "cellName": "Flow: PostCSS\nIntegration -\nStep 2:\nBuild Tool\nInvokes PostCSS",
+ "cellId": "24eb4805-f561-46d2-aa86-8a93c38537be",
+ "visible": true
+ },
+ "generated-edge-simstep-c803a596-1dd6-4b55-82d4-7c2f63776dbc-24eb4805-f561-46d2-aa86-8a93c38537be": {
+ "path": "generated-edge-simstep-c803a596-1dd6-4b55-82d4-7c2f63776dbc-24eb4805-f561-46d2-aa86-8a93c38537be",
+ "fileName": "postcss.config.js",
+ "cellName": "Flow: PostCSS Integration - Step 2: Build Tool Invokes PostCSS",
+ "cellId": "24eb4805-f561-46d2-aa86-8a93c38537be",
+ "visible": true,
+ "startLine": 77,
+ "endLine": 77,
+ "parentPath": "playgrounds/nextjs/postcss.config.js"
+ },
+ "2b658db9-435a-403b-83f4-dba3733356bb": {
+ "path": "2b658db9-435a-403b-83f4-dba3733356bb",
+ "cellName": "Flow: PostCSS\nIntegration -\nStep 4:\nCSS Content\nPassed to\nPlugin",
+ "cellId": "2b658db9-435a-403b-83f4-dba3733356bb",
+ "visible": true,
+ "parentCellId": "fcb21d37-9994-4006-8fd4-098f96bec9cc"
+ },
+ "generated-edge-simstep-68266603-6de1-4fbd-ba3b-13e7264baa45-2b658db9-435a-403b-83f4-dba3733356bb": {
+ "path": "generated-edge-simstep-68266603-6de1-4fbd-ba3b-13e7264baa45-2b658db9-435a-403b-83f4-dba3733356bb",
+ "fileName": "index.ts",
+ "cellName": "Flow: PostCSS Integration - Step 4: CSS Content Passed to Plugin",
+ "cellId": "2b658db9-435a-403b-83f4-dba3733356bb",
+ "visible": true,
+ "startLine": 88,
+ "endLine": 88,
+ "parentPath": "packages/@tailwindcss-postcss/src/index.ts"
+ },
+ "b0a551fe-ad7d-4b33-b076-a0c162971cb5": {
+ "path": "b0a551fe-ad7d-4b33-b076-a0c162971cb5",
+ "cellName": "Flow: PostCSS\nIntegration -\nStep 6:\nUpdate PostCSS\nAST",
+ "cellId": "b0a551fe-ad7d-4b33-b076-a0c162971cb5",
+ "visible": true,
+ "parentCellId": "fcb21d37-9994-4006-8fd4-098f96bec9cc"
+ },
+ "generated-edge-simstep-2774e022-2751-4c7b-bf9a-a59369a9cd65-b0a551fe-ad7d-4b33-b076-a0c162971cb5": {
+ "path": "generated-edge-simstep-2774e022-2751-4c7b-bf9a-a59369a9cd65-b0a551fe-ad7d-4b33-b076-a0c162971cb5",
+ "fileName": "index.ts",
+ "cellName": "Flow: PostCSS Integration - Step 6: Update PostCSS AST",
+ "cellId": "b0a551fe-ad7d-4b33-b076-a0c162971cb5",
+ "visible": true,
+ "startLine": 327,
+ "endLine": 327,
+ "parentPath": "packages/@tailwindcss-postcss/src/index.ts"
+ },
+ "793ead2a-8d4c-4c1f-b371-d271ba8da975": {
+ "path": "793ead2a-8d4c-4c1f-b371-d271ba8da975",
+ "cellName": "Flow: Vite\nIntegration -\nStep 2:\nVite Reads\nConfiguration",
+ "cellId": "793ead2a-8d4c-4c1f-b371-d271ba8da975",
+ "visible": true
+ },
+ "generated-edge-simstep-770b8f86-55a6-444d-b0d7-d84c60084c18-793ead2a-8d4c-4c1f-b371-d271ba8da975": {
+ "path": "generated-edge-simstep-770b8f86-55a6-444d-b0d7-d84c60084c18-793ead2a-8d4c-4c1f-b371-d271ba8da975",
+ "fileName": "vite.config.ts",
+ "cellName": "Flow: Vite Integration - Step 2: Vite Reads Configuration",
+ "cellId": "793ead2a-8d4c-4c1f-b371-d271ba8da975",
+ "visible": true,
+ "startLine": 18,
+ "endLine": 18,
+ "parentPath": "playgrounds/vite/vite.config.ts"
+ },
+ "7864f923-cfb8-4013-b451-6468e35755eb": {
+ "path": "7864f923-cfb8-4013-b451-6468e35755eb",
+ "cellName": "Flow: Vite\nIntegration -\nStep 4:\nCSS File\nRequest",
+ "cellId": "7864f923-cfb8-4013-b451-6468e35755eb",
+ "visible": true,
+ "parentCellId": "11f84044-473f-4f66-a07b-e497d279a653"
+ },
+ "generated-edge-simstep-cd978705-e081-41b1-93e9-96c29429b1af-7864f923-cfb8-4013-b451-6468e35755eb": {
+ "path": "generated-edge-simstep-cd978705-e081-41b1-93e9-96c29429b1af-7864f923-cfb8-4013-b451-6468e35755eb",
+ "fileName": "index.ts",
+ "cellName": "Flow: Vite Integration - Step 4: CSS File Request",
+ "cellId": "7864f923-cfb8-4013-b451-6468e35755eb",
+ "visible": true,
+ "startLine": 77,
+ "endLine": 80,
+ "parentPath": "packages/@tailwindcss-vite/src/index.ts"
+ },
+ "588712b6-c2d0-4b86-921d-611a3bb68406": {
+ "path": "588712b6-c2d0-4b86-921d-611a3bb68406",
+ "cellName": "Flow: Vite\nIntegration -\nStep 6:\nReturn Transformed\nCSS to\nVite",
+ "cellId": "588712b6-c2d0-4b86-921d-611a3bb68406",
+ "visible": true,
+ "parentCellId": "11f84044-473f-4f66-a07b-e497d279a653"
+ },
+ "generated-edge-simstep-cb451f00-d410-41b6-a3b9-d6edf1620e07-588712b6-c2d0-4b86-921d-611a3bb68406": {
+ "path": "generated-edge-simstep-cb451f00-d410-41b6-a3b9-d6edf1620e07-588712b6-c2d0-4b86-921d-611a3bb68406",
+ "fileName": "index.ts",
+ "cellName": "Flow: Vite Integration - Step 6: Return Transformed CSS to Vite",
+ "cellId": "588712b6-c2d0-4b86-921d-611a3bb68406",
+ "visible": true,
+ "startLine": 93,
+ "endLine": 93,
+ "parentPath": "packages/@tailwindcss-vite/src/index.ts"
+ },
+ "e390d827-7630-4c39-9772-3d2fb9a3819c": {
+ "path": "e390d827-7630-4c39-9772-3d2fb9a3819c",
+ "cellName": "fixtures",
+ "cellId": "e390d827-7630-4c39-9772-3d2fb9a3819c",
+ "visible": true,
+ "parentCellId": "579630a3-44bc-46d8-8f70-1cf46e48cf29"
+ },
+ "a1a07f94-78e2-4c9d-ae24-49ab5e598fe8": {
+ "path": "a1a07f94-78e2-4c9d-ae24-49ab5e598fe8",
+ "cellName": "plugin-api.ts",
+ "cellId": "a1a07f94-78e2-4c9d-ae24-49ab5e598fe8",
+ "visible": true,
+ "parentCellId": "30c8c2d0-c23e-4a0f-be8d-f2f3d609d920"
+ },
+ "a4a09831-2b8f-4103-8df6-a5a8bbd57548": {
+ "path": "a4a09831-2b8f-4103-8df6-a5a8bbd57548",
+ "cellName": "example-project",
+ "cellId": "a4a09831-2b8f-4103-8df6-a5a8bbd57548",
+ "visible": true,
+ "parentCellId": "e390d827-7630-4c39-9772-3d2fb9a3819c"
+ },
+ "28d77789-1578-4ba3-8bc8-6b6d38c2670b": {
+ "path": "28d77789-1578-4ba3-8bc8-6b6d38c2670b",
+ "cellName": "plugin.js",
+ "cellId": "28d77789-1578-4ba3-8bc8-6b6d38c2670b",
+ "visible": true,
+ "parentCellId": "a4a09831-2b8f-4103-8df6-a5a8bbd57548"
+ },
+ "003ca2a5-ca0c-49da-9d94-f0825bb1a840": {
+ "path": "003ca2a5-ca0c-49da-9d94-f0825bb1a840",
+ "cellName": "Parse CSS and Detect @plugin Directive - apply-compat-hooks.ts:L56-64",
+ "cellId": "003ca2a5-ca0c-49da-9d94-f0825bb1a840",
+ "visible": true,
+ "parentCellId": "61012578-ad7a-4829-984f-b33619a8b5c5"
+ },
+ "packages/tailwindcss/src/compat/apply-compat-hooks.ts-simstep-bba7f885-598c-48f4-bbe1-5035a3d78c49": {
+ "path": "packages/tailwindcss/src/compat/apply-compat-hooks.ts-simstep-bba7f885-598c-48f4-bbe1-5035a3d78c49",
+ "fileName": "apply-compat-hooks.ts",
+ "wiki": "The Tailwind CSS engine parses the input CSS file. It walks through the Abstract Syntax Tree (AST) and identifies at-rules. When it encounters an `@plugin` rule, it extracts the path to the plugin's JavaScript module.",
+ "cellName": "Parse CSS and Detect @plugin Directive - apply-compat-hooks.ts:L56-64",
+ "cellId": "003ca2a5-ca0c-49da-9d94-f0825bb1a840",
+ "visible": true,
+ "startLine": 56,
+ "endLine": 64,
+ "parentCellId": "61012578-ad7a-4829-984f-b33619a8b5c5",
+ "parentPath": "packages/tailwindcss/src/compat/apply-compat-hooks.ts"
+ },
+ "228fa9c6-524c-4485-ac04-30c0b38e7447": {
+ "path": "228fa9c6-524c-4485-ac04-30c0b38e7447",
+ "cellName": "Load Plugin Module - apply-compat-hooks.ts:L188-198",
+ "cellId": "228fa9c6-524c-4485-ac04-30c0b38e7447",
+ "visible": true,
+ "parentCellId": "61012578-ad7a-4829-984f-b33619a8b5c5"
+ },
+ "packages/tailwindcss/src/compat/apply-compat-hooks.ts-simstep-f85f0059-785e-45bf-952d-70f31d1ca531": {
+ "path": "packages/tailwindcss/src/compat/apply-compat-hooks.ts-simstep-f85f0059-785e-45bf-952d-70f31d1ca531",
+ "fileName": "apply-compat-hooks.ts",
+ "wiki": "The system dynamically loads the JavaScript module from the specified path. The module is expected to export a function created with Tailwind's `plugin()` helper.",
+ "cellName": "Load Plugin Module - apply-compat-hooks.ts:L188-198",
+ "cellId": "228fa9c6-524c-4485-ac04-30c0b38e7447",
+ "visible": true,
+ "startLine": 188,
+ "endLine": 198,
+ "parentCellId": "61012578-ad7a-4829-984f-b33619a8b5c5",
+ "parentPath": "packages/tailwindcss/src/compat/apply-compat-hooks.ts"
+ },
+ "4935dd39-2719-4fae-9e47-4904dc38887b": {
+ "path": "4935dd39-2719-4fae-9e47-4904dc38887b",
+ "cellName": "Resolve and Merge Plugin Configuration - resolve-config.ts:L172",
+ "cellId": "4935dd39-2719-4fae-9e47-4904dc38887b",
+ "visible": true,
+ "parentCellId": "3ba89ecd-cb8e-44ca-ac14-dadc04eee4cd"
+ },
+ "packages/tailwindcss/src/compat/config/resolve-config.ts-simstep-63d599b1-4e75-471b-9357-c6257451dbed": {
+ "path": "packages/tailwindcss/src/compat/config/resolve-config.ts-simstep-63d599b1-4e75-471b-9357-c6257451dbed",
+ "fileName": "resolve-config.ts",
+ "wiki": "The configuration resolver merges the plugin's configuration with the main Tailwind config. It also collects all plugin handler functions to be executed later.",
+ "cellName": "Resolve and Merge Plugin Configuration - resolve-config.ts:L172",
+ "cellId": "4935dd39-2719-4fae-9e47-4904dc38887b",
+ "visible": true,
+ "startLine": 172,
+ "endLine": 172,
+ "parentCellId": "3ba89ecd-cb8e-44ca-ac14-dadc04eee4cd",
+ "parentPath": "packages/tailwindcss/src/compat/config/resolve-config.ts"
+ },
+ "f654954d-60f3-4380-a598-cd77b2971ed0": {
+ "path": "f654954d-60f3-4380-a598-cd77b2971ed0",
+ "cellName": "Execute Plugin Handler - apply-compat-hooks.ts:L333",
+ "cellId": "f654954d-60f3-4380-a598-cd77b2971ed0",
+ "visible": true,
+ "parentCellId": "61012578-ad7a-4829-984f-b33619a8b5c5"
+ },
+ "packages/tailwindcss/src/compat/apply-compat-hooks.ts-simstep-8d3e5126-3fb6-46bf-9e8b-be5c79236566": {
+ "path": "packages/tailwindcss/src/compat/apply-compat-hooks.ts-simstep-8d3e5126-3fb6-46bf-9e8b-be5c79236566",
+ "fileName": "apply-compat-hooks.ts",
+ "wiki": "The system invokes the plugin's handler function, passing the newly created `PluginAPI` object as an argument. The plugin code now runs and calls the API functions to register its extensions.",
+ "cellName": "Execute Plugin Handler - apply-compat-hooks.ts:L333",
+ "cellId": "f654954d-60f3-4380-a598-cd77b2971ed0",
+ "visible": true,
+ "startLine": 333,
+ "endLine": 333,
+ "parentCellId": "61012578-ad7a-4829-984f-b33619a8b5c5",
+ "parentPath": "packages/tailwindcss/src/compat/apply-compat-hooks.ts"
+ },
+ "414ad46e-9582-4a4f-bdcc-d7b36f5618f1": {
+ "path": "414ad46e-9582-4a4f-bdcc-d7b36f5618f1",
+ "cellName": "Register New Utilities and Variants - plugin-api.ts:L115-182",
+ "cellId": "414ad46e-9582-4a4f-bdcc-d7b36f5618f1",
+ "visible": true,
+ "parentCellId": "a1a07f94-78e2-4c9d-ae24-49ab5e598fe8"
+ },
+ "packages/tailwindcss/src/compat/plugin-api.ts-simstep-15362ed0-6ffd-4177-a992-bfd6b46ad403": {
+ "path": "packages/tailwindcss/src/compat/plugin-api.ts-simstep-15362ed0-6ffd-4177-a992-bfd6b46ad403",
+ "fileName": "plugin-api.ts",
+ "wiki": "The API functions receive the data from the plugin and register the new utilities and variants within the internal design system. This makes them available for Tailwind to use during the CSS generation phase.",
+ "cellName": "Register New Utilities and Variants - plugin-api.ts:L115-182",
+ "cellId": "414ad46e-9582-4a4f-bdcc-d7b36f5618f1",
+ "visible": true,
+ "startLine": 115,
+ "endLine": 182,
+ "parentCellId": "a1a07f94-78e2-4c9d-ae24-49ab5e598fe8",
+ "parentPath": "packages/tailwindcss/src/compat/plugin-api.ts"
+ },
+ "434cb654-91a0-491a-ae3c-46f9f45756b8": {
+ "path": "434cb654-91a0-491a-ae3c-46f9f45756b8",
+ "cellName": "Transmit Plugin\nPath for\nLoading",
+ "cellId": "434cb654-91a0-491a-ae3c-46f9f45756b8",
+ "visible": true,
+ "parentCellId": "61012578-ad7a-4829-984f-b33619a8b5c5"
+ },
+ "generated-edge-simstep-d2776b89-8cc8-4f59-b22a-10b9ad4e433f-434cb654-91a0-491a-ae3c-46f9f45756b8": {
+ "path": "generated-edge-simstep-d2776b89-8cc8-4f59-b22a-10b9ad4e433f-434cb654-91a0-491a-ae3c-46f9f45756b8",
+ "fileName": "apply-compat-hooks.ts",
+ "cellName": "Transmit Plugin Path for Loading",
+ "cellId": "434cb654-91a0-491a-ae3c-46f9f45756b8",
+ "visible": true,
+ "startLine": 189,
+ "endLine": 189,
+ "parentPath": "packages/tailwindcss/src/compat/apply-compat-hooks.ts"
+ },
+ "269c1ff1-099a-4365-88bf-706673176424": {
+ "path": "269c1ff1-099a-4365-88bf-706673176424",
+ "cellName": "Pass Plugin\nHandler to\nConfig Resolver",
+ "cellId": "269c1ff1-099a-4365-88bf-706673176424",
+ "visible": true,
+ "parentCellId": "30c8c2d0-c23e-4a0f-be8d-f2f3d609d920"
+ },
+ "generated-edge-simstep-491d945f-8696-4e9c-9b83-292502f1704c-269c1ff1-099a-4365-88bf-706673176424": {
+ "path": "generated-edge-simstep-491d945f-8696-4e9c-9b83-292502f1704c-269c1ff1-099a-4365-88bf-706673176424",
+ "fileName": "apply-compat-hooks.ts",
+ "cellName": "Pass Plugin Handler to Config Resolver",
+ "cellId": "269c1ff1-099a-4365-88bf-706673176424",
+ "visible": true,
+ "startLine": 129,
+ "endLine": 129,
+ "parentPath": "packages/tailwindcss/src/compat/apply-compat-hooks.ts"
+ },
+ "7791ae55-1ffa-41bb-b04f-6203e8ae292f": {
+ "path": "7791ae55-1ffa-41bb-b04f-6203e8ae292f",
+ "cellName": "Prepare Plugin\nAPI for\nExecution",
+ "cellId": "7791ae55-1ffa-41bb-b04f-6203e8ae292f",
+ "visible": true,
+ "parentCellId": "30c8c2d0-c23e-4a0f-be8d-f2f3d609d920"
+ },
+ "generated-edge-simstep-6e38cfe1-f57a-4ebc-ab6f-8763d6133819-7791ae55-1ffa-41bb-b04f-6203e8ae292f": {
+ "path": "generated-edge-simstep-6e38cfe1-f57a-4ebc-ab6f-8763d6133819-7791ae55-1ffa-41bb-b04f-6203e8ae292f",
+ "fileName": "resolve-config.ts",
+ "cellName": "Prepare Plugin API for Execution",
+ "cellId": "7791ae55-1ffa-41bb-b04f-6203e8ae292f",
+ "visible": true,
+ "startLine": 325,
+ "endLine": 330,
+ "parentPath": "packages/tailwindcss/src/compat/config/resolve-config.ts"
+ },
+ "83b31836-414f-4fa4-a180-00684b0f8286": {
+ "path": "83b31836-414f-4fa4-a180-00684b0f8286",
+ "cellName": "Transmit New\nUtilities and\nVariants to\nAPI",
+ "cellId": "83b31836-414f-4fa4-a180-00684b0f8286",
+ "visible": true,
+ "parentCellId": "30c8c2d0-c23e-4a0f-be8d-f2f3d609d920"
+ },
+ "generated-edge-simstep-a31e3864-e0d7-4f6d-a9d0-1f044879ce36-83b31836-414f-4fa4-a180-00684b0f8286": {
+ "path": "generated-edge-simstep-a31e3864-e0d7-4f6d-a9d0-1f044879ce36-83b31836-414f-4fa4-a180-00684b0f8286",
+ "fileName": "apply-compat-hooks.ts",
+ "cellName": "Transmit New Utilities and Variants to API",
+ "cellId": "83b31836-414f-4fa4-a180-00684b0f8286",
+ "visible": true,
+ "startLine": 1,
+ "endLine": 4,
+ "parentPath": "packages/tailwindcss/src/compat/apply-compat-hooks.ts"
+ },
+ "2d2d5c49-dcd8-49b2-83da-b52f0f2f7fab": {
+ "path": "2d2d5c49-dcd8-49b2-83da-b52f0f2f7fab",
+ "cellName": "main.rs",
+ "cellId": "2d2d5c49-dcd8-49b2-83da-b52f0f2f7fab",
+ "visible": true,
+ "parentCellId": "6ab2ff5a-6aab-4726-9d64-7368429e7a76"
+ },
+ "81e0fe1a-06e9-49f5-b8ee-71d5246c8539": {
+ "path": "81e0fe1a-06e9-49f5-b8ee-71d5246c8539",
+ "cellName": "extractor",
+ "cellId": "81e0fe1a-06e9-49f5-b8ee-71d5246c8539",
+ "visible": true,
+ "parentCellId": "6ab2ff5a-6aab-4726-9d64-7368429e7a76"
+ },
+ "a77fa17c-460f-4ba2-a498-e159030060c7": {
+ "path": "a77fa17c-460f-4ba2-a498-e159030060c7",
+ "cellName": "utility_machine.rs",
+ "cellId": "a77fa17c-460f-4ba2-a498-e159030060c7",
+ "visible": true,
+ "parentCellId": "81e0fe1a-06e9-49f5-b8ee-71d5246c8539"
+ },
+ "6af31246-07dc-48bb-a34b-f2d5c80288aa": {
+ "path": "6af31246-07dc-48bb-a34b-f2d5c80288aa",
+ "cellName": "named_utility_machine.rs",
+ "cellId": "6af31246-07dc-48bb-a34b-f2d5c80288aa",
+ "visible": true,
+ "parentCellId": "81e0fe1a-06e9-49f5-b8ee-71d5246c8539"
+ },
+ "4f41bf0d-8384-4e71-bc2c-9f0e0339f723": {
+ "path": "4f41bf0d-8384-4e71-bc2c-9f0e0339f723",
+ "cellName": "[Flow 1: Named Utility with Arbitrary Value] Candidate Identification - main.rs:L48-50",
+ "cellId": "4f41bf0d-8384-4e71-bc2c-9f0e0339f723",
+ "visible": true,
+ "parentCellId": "2d2d5c49-dcd8-49b2-83da-b52f0f2f7fab"
+ },
+ "crates/oxide/src/main.rs-simstep-2c6a58c2-d3cd-4991-89f9-07f78e5f0a76": {
+ "path": "crates/oxide/src/main.rs-simstep-2c6a58c2-d3cd-4991-89f9-07f78e5f0a76",
+ "fileName": "main.rs",
+ "wiki": "The high-performance extractor, written in Rust, scans source files (e.g., HTML, JS) to find potential utility classes. It uses a series of state machines to efficiently identify strings that conform to Tailwind's class syntax, including those with arbitrary values.",
+ "cellName": "[Flow 1: Named Utility with Arbitrary Value] Candidate Identification - main.rs:L48-50",
+ "cellId": "4f41bf0d-8384-4e71-bc2c-9f0e0339f723",
+ "visible": true,
+ "startLine": 48,
+ "endLine": 50,
+ "parentCellId": "2d2d5c49-dcd8-49b2-83da-b52f0f2f7fab",
+ "parentPath": "crates/oxide/src/main.rs"
+ },
+ "472d0313-0159-4d94-98d5-54748570d4f8": {
+ "path": "472d0313-0159-4d94-98d5-54748570d4f8",
+ "cellName": "[Flow 1: Named Utility with Arbitrary Value] Dispatching to Named Utility Parser - utility_machine.rs:L15-19",
+ "cellId": "472d0313-0159-4d94-98d5-54748570d4f8",
+ "visible": true,
+ "parentCellId": "a77fa17c-460f-4ba2-a498-e159030060c7"
+ },
+ "crates/oxide/src/extractor/utility_machine.rs-simstep-bf62f504-9a6a-4026-b2e0-408d8f6515fd": {
+ "path": "crates/oxide/src/extractor/utility_machine.rs-simstep-bf62f504-9a6a-4026-b2e0-408d8f6515fd",
+ "fileName": "utility_machine.rs",
+ "wiki": "The `UtilityMachine` acts as a dispatcher. It examines the start of the candidate string. Since `w-[100px]` starts with a letter, it's identified as a named utility and the task is delegated to the `NamedUtilityMachine`.",
+ "cellName": "[Flow 1: Named Utility with Arbitrary Value] Dispatching to Named Utility Parser - utility_machine.rs:L15-19",
+ "cellId": "472d0313-0159-4d94-98d5-54748570d4f8",
+ "visible": true,
+ "startLine": 15,
+ "endLine": 19,
+ "parentCellId": "a77fa17c-460f-4ba2-a498-e159030060c7",
+ "parentPath": "crates/oxide/src/extractor/utility_machine.rs"
+ },
+ "fc707279-942f-4c36-9f9d-4bf40c925b6b": {
+ "path": "fc707279-942f-4c36-9f9d-4bf40c925b6b",
+ "cellName": "[Flow 1: Named Utility with Arbitrary Value] Parsing the Arbitrary Value - named_utility_machine.rs:L159-164",
+ "cellId": "fc707279-942f-4c36-9f9d-4bf40c925b6b",
+ "visible": true,
+ "parentCellId": "6af31246-07dc-48bb-a34b-f2d5c80288aa"
+ },
+ "crates/oxide/src/extractor/named_utility_machine.rs-simstep-8647727d-bf05-4ebb-909d-b3a4f14afc49": {
+ "path": "crates/oxide/src/extractor/named_utility_machine.rs-simstep-8647727d-bf05-4ebb-909d-b3a4f14afc49",
+ "fileName": "named_utility_machine.rs",
+ "wiki": "The `ArbitraryValueMachine` consumes the input from the opening `[` to the closing `]`, correctly handling any nested brackets (e.g., in `calc()`). It validates the content and, upon finding the matching closing bracket, signals completion.",
+ "cellName": "[Flow 1: Named Utility with Arbitrary Value] Parsing the Arbitrary Value - named_utility_machine.rs:L159-164",
+ "cellId": "fc707279-942f-4c36-9f9d-4bf40c925b6b",
+ "visible": true,
+ "startLine": 159,
+ "endLine": 164,
+ "parentCellId": "6af31246-07dc-48bb-a34b-f2d5c80288aa",
+ "parentPath": "crates/oxide/src/extractor/named_utility_machine.rs"
+ },
+ "40a97b17-fdf4-41ea-b3c6-d4ef9d04dc9d": {
+ "path": "40a97b17-fdf4-41ea-b3c6-d4ef9d04dc9d",
+ "cellName": "[Flow 2: Arbitrary Property] Candidate Identification - main.rs:L48-50",
+ "cellId": "40a97b17-fdf4-41ea-b3c6-d4ef9d04dc9d",
+ "visible": true,
+ "parentCellId": "2d2d5c49-dcd8-49b2-83da-b52f0f2f7fab"
+ },
+ "crates/oxide/src/main.rs-simstep-03cba560-0826-4cf8-8711-6179a7eb8788": {
+ "path": "crates/oxide/src/main.rs-simstep-03cba560-0826-4cf8-8711-6179a7eb8788",
+ "fileName": "main.rs",
+ "wiki": "The high-performance extractor, written in Rust, scans source files to find potential utility classes. It identifies strings that look like Tailwind classes, including arbitrary properties like `[mask:url(...)]`.",
+ "cellName": "[Flow 2: Arbitrary Property] Candidate Identification - main.rs:L48-50",
+ "cellId": "40a97b17-fdf4-41ea-b3c6-d4ef9d04dc9d",
+ "visible": true,
+ "startLine": 48,
+ "endLine": 50,
+ "parentCellId": "2d2d5c49-dcd8-49b2-83da-b52f0f2f7fab",
+ "parentPath": "crates/oxide/src/main.rs"
+ },
+ "44c24163-1fdf-42f0-899c-e799a3f77cd3": {
+ "path": "44c24163-1fdf-42f0-899c-e799a3f77cd3",
+ "cellName": "[Flow 2: Arbitrary Property] Dispatching to Arbitrary Property Parser - utility_machine.rs:L76-83",
+ "cellId": "44c24163-1fdf-42f0-899c-e799a3f77cd3",
+ "visible": true,
+ "parentCellId": "a77fa17c-460f-4ba2-a498-e159030060c7"
+ },
+ "crates/oxide/src/extractor/utility_machine.rs-simstep-f10ece63-581a-4070-a21e-75ec0d3aa8fc": {
+ "path": "crates/oxide/src/extractor/utility_machine.rs-simstep-f10ece63-581a-4070-a21e-75ec0d3aa8fc",
+ "fileName": "utility_machine.rs",
+ "wiki": "The `UtilityMachine` inspects the candidate string. Because `[mask:url(image.png)]` starts with an opening square bracket `[`, it is identified as an arbitrary property, and the task is delegated to the `ArbitraryPropertyMachine`.",
+ "cellName": "[Flow 2: Arbitrary Property] Dispatching to Arbitrary Property Parser - utility_machine.rs:L76-83",
+ "cellId": "44c24163-1fdf-42f0-899c-e799a3f77cd3",
+ "visible": true,
+ "startLine": 76,
+ "endLine": 83,
+ "parentCellId": "a77fa17c-460f-4ba2-a498-e159030060c7",
+ "parentPath": "crates/oxide/src/extractor/utility_machine.rs"
+ },
+ "9c8af2d1-2339-49c1-8ad9-8f3cd3586c85": {
+ "path": "9c8af2d1-2339-49c1-8ad9-8f3cd3586c85",
+ "cellName": "[Flow 2: Arbitrary Property] Parsing the Arbitrary Property - utility_machine.rs:L15-19",
+ "cellId": "9c8af2d1-2339-49c1-8ad9-8f3cd3586c85",
+ "visible": true,
+ "parentCellId": "a77fa17c-460f-4ba2-a498-e159030060c7"
+ },
+ "crates/oxide/src/extractor/utility_machine.rs-simstep-d4c22b52-6478-4320-a872-e2b7e794fe68": {
+ "path": "crates/oxide/src/extractor/utility_machine.rs-simstep-d4c22b52-6478-4320-a872-e2b7e794fe68",
+ "fileName": "utility_machine.rs",
+ "wiki": "The `ArbitraryPropertyMachine` parses the entire structure, identifying the CSS property (`mask`) and its value (`url(image.png)`), ensuring the syntax is correct before signaling completion.",
+ "cellName": "[Flow 2: Arbitrary Property] Parsing the Arbitrary Property - utility_machine.rs:L15-19",
+ "cellId": "9c8af2d1-2339-49c1-8ad9-8f3cd3586c85",
+ "visible": true,
+ "startLine": 15,
+ "endLine": 19,
+ "parentCellId": "a77fa17c-460f-4ba2-a498-e159030060c7",
+ "parentPath": "crates/oxide/src/extractor/utility_machine.rs"
+ },
+ "b291634d-3f95-4c4b-9840-cf6501d00551": {
+ "path": "b291634d-3f95-4c4b-9840-cf6501d00551",
+ "cellName": "[Flow 1:\nNamed Utility\nwith Arbitrary\nValue] Candidate\nTransmission for\nParsing",
+ "cellId": "b291634d-3f95-4c4b-9840-cf6501d00551",
+ "visible": true,
+ "parentCellId": "6ab2ff5a-6aab-4726-9d64-7368429e7a76"
+ },
+ "generated-edge-simstep-6d448667-774a-41cc-8133-3d585557a540-b291634d-3f95-4c4b-9840-cf6501d00551": {
+ "path": "generated-edge-simstep-6d448667-774a-41cc-8133-3d585557a540-b291634d-3f95-4c4b-9840-cf6501d00551",
+ "fileName": "main.rs",
+ "cellName": "[Flow 1: Named Utility with Arbitrary Value] Candidate Transmission for Parsing",
+ "cellId": "b291634d-3f95-4c4b-9840-cf6501d00551",
+ "visible": true,
+ "startLine": 24,
+ "endLine": 26,
+ "parentPath": "crates/oxide/src/main.rs"
+ },
+ "80fef34d-fa5b-4bc0-ae6b-56e1ba797ff6": {
+ "path": "80fef34d-fa5b-4bc0-ae6b-56e1ba797ff6",
+ "cellName": "[Flow 1:\nNamed Utility\nwith Arbitrary\nValue] Delegating\nto Arbitrary\nValue Parser",
+ "cellId": "80fef34d-fa5b-4bc0-ae6b-56e1ba797ff6",
+ "visible": true,
+ "parentCellId": "81e0fe1a-06e9-49f5-b8ee-71d5246c8539"
+ },
+ "generated-edge-simstep-de0f8d8d-b441-43d9-a031-d7ee0ff63817-80fef34d-fa5b-4bc0-ae6b-56e1ba797ff6": {
+ "path": "generated-edge-simstep-de0f8d8d-b441-43d9-a031-d7ee0ff63817-80fef34d-fa5b-4bc0-ae6b-56e1ba797ff6",
+ "fileName": "utility_machine.rs",
+ "cellName": "[Flow 1: Named Utility with Arbitrary Value] Delegating to Arbitrary Value Parser",
+ "cellId": "80fef34d-fa5b-4bc0-ae6b-56e1ba797ff6",
+ "visible": true,
+ "startLine": 161,
+ "endLine": 161,
+ "parentPath": "crates/oxide/src/extractor/utility_machine.rs"
+ },
+ "416fbe58-0110-44bc-a421-1a002303d6c2": {
+ "path": "416fbe58-0110-44bc-a421-1a002303d6c2",
+ "cellName": "[Flow 1:\nNamed Utility\nwith Arbitrary\nValue] Returning\nFull Candidate",
+ "cellId": "416fbe58-0110-44bc-a421-1a002303d6c2",
+ "visible": true,
+ "parentCellId": "6ab2ff5a-6aab-4726-9d64-7368429e7a76"
+ },
+ "generated-edge-simstep-79f40ae3-f086-4f90-8968-14c785bf35c9-416fbe58-0110-44bc-a421-1a002303d6c2": {
+ "path": "generated-edge-simstep-79f40ae3-f086-4f90-8968-14c785bf35c9-416fbe58-0110-44bc-a421-1a002303d6c2",
+ "fileName": "named_utility_machine.rs",
+ "cellName": "[Flow 1: Named Utility with Arbitrary Value] Returning Full Candidate",
+ "cellId": "416fbe58-0110-44bc-a421-1a002303d6c2",
+ "visible": true,
+ "startLine": 162,
+ "endLine": 162,
+ "parentPath": "crates/oxide/src/extractor/named_utility_machine.rs"
+ },
+ "09230f36-fc8a-4d72-aa87-6507e2a022d7": {
+ "path": "09230f36-fc8a-4d72-aa87-6507e2a022d7",
+ "cellName": "[Flow 2:\nArbitrary Property]\nCandidate Transmission\nfor Parsing",
+ "cellId": "09230f36-fc8a-4d72-aa87-6507e2a022d7",
+ "visible": true,
+ "parentCellId": "6ab2ff5a-6aab-4726-9d64-7368429e7a76"
+ },
+ "generated-edge-simstep-af09b176-bdfd-4355-9404-3a43d29c5d33-09230f36-fc8a-4d72-aa87-6507e2a022d7": {
+ "path": "generated-edge-simstep-af09b176-bdfd-4355-9404-3a43d29c5d33-09230f36-fc8a-4d72-aa87-6507e2a022d7",
+ "fileName": "main.rs",
+ "cellName": "[Flow 2: Arbitrary Property] Candidate Transmission for Parsing",
+ "cellId": "09230f36-fc8a-4d72-aa87-6507e2a022d7",
+ "visible": true,
+ "startLine": 24,
+ "endLine": 26,
+ "parentPath": "crates/oxide/src/main.rs"
+ },
+ "4b981a5d-91b7-4299-a84c-d909e0bc2790": {
+ "path": "4b981a5d-91b7-4299-a84c-d909e0bc2790",
+ "cellName": "[Flow 2:\nArbitrary Property]\nDelegating to\n`ArbitraryPropertyMachine`",
+ "cellId": "4b981a5d-91b7-4299-a84c-d909e0bc2790",
+ "visible": true,
+ "parentCellId": "a77fa17c-460f-4ba2-a498-e159030060c7"
+ },
+ "generated-edge-simstep-9e30212a-9fb1-4f67-a44d-a149c8a8a570-4b981a5d-91b7-4299-a84c-d909e0bc2790": {
+ "path": "generated-edge-simstep-9e30212a-9fb1-4f67-a44d-a149c8a8a570-4b981a5d-91b7-4299-a84c-d909e0bc2790",
+ "fileName": "utility_machine.rs",
+ "cellName": "[Flow 2: Arbitrary Property] Delegating to `ArbitraryPropertyMachine`",
+ "cellId": "4b981a5d-91b7-4299-a84c-d909e0bc2790",
+ "visible": true,
+ "startLine": 77,
+ "endLine": 77,
+ "parentPath": "crates/oxide/src/extractor/utility_machine.rs"
+ },
+ "38cee91e-f342-4fea-b4a4-b84ba2d910d4": {
+ "path": "38cee91e-f342-4fea-b4a4-b84ba2d910d4",
+ "cellName": "css-parser.test.ts",
+ "cellId": "38cee91e-f342-4fea-b4a4-b84ba2d910d4",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "96485fa7-4834-4429-ad88-ac10916ff8f6": {
+ "path": "96485fa7-4834-4429-ad88-ac10916ff8f6",
+ "cellName": "apply.ts",
+ "cellId": "96485fa7-4834-4429-ad88-ac10916ff8f6",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "fff5b81c-6f22-4caa-903e-5454c42fa6e1": {
+ "path": "fff5b81c-6f22-4caa-903e-5454c42fa6e1",
+ "cellName": "ast.bench.ts",
+ "cellId": "fff5b81c-6f22-4caa-903e-5454c42fa6e1",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "2d86d61e-2014-48e5-a434-d6beade9b810": {
+ "path": "2d86d61e-2014-48e5-a434-d6beade9b810",
+ "cellName": "Parse CSS Input - css-parser.test.ts:L755-763",
+ "cellId": "2d86d61e-2014-48e5-a434-d6beade9b810",
+ "visible": true,
+ "parentCellId": "38cee91e-f342-4fea-b4a4-b84ba2d910d4"
+ },
+ "packages/tailwindcss/src/css-parser.test.ts-simstep-0eb15c43-6535-4dfd-bb33-4482340935ae": {
+ "path": "packages/tailwindcss/src/css-parser.test.ts-simstep-0eb15c43-6535-4dfd-bb33-4482340935ae",
+ "fileName": "css-parser.test.ts",
+ "wiki": "The Tailwind CSS engine starts by parsing the input CSS file. It reads the custom CSS rules and converts them into an Abstract Syntax Tree (AST). This structured representation allows Tailwind to understand and manipulate the CSS, identifying directives like `@apply` and functions like `theme()`.",
+ "cellName": "Parse CSS Input - css-parser.test.ts:L755-763",
+ "cellId": "2d86d61e-2014-48e5-a434-d6beade9b810",
+ "visible": true,
+ "startLine": 755,
+ "endLine": 763,
+ "parentCellId": "38cee91e-f342-4fea-b4a4-b84ba2d910d4",
+ "parentPath": "packages/tailwindcss/src/css-parser.test.ts"
+ },
+ "612e5877-615a-428c-8dd8-d523cb649325": {
+ "path": "612e5877-615a-428c-8dd8-d523cb649325",
+ "cellName": "Resolve theme() Functions - index.ts:L674",
+ "cellId": "612e5877-615a-428c-8dd8-d523cb649325",
+ "visible": true,
+ "parentCellId": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347"
+ },
+ "packages/tailwindcss/src/index.ts-simstep-2328c343-084d-4465-aa48-14a08a41c4ae": {
+ "path": "packages/tailwindcss/src/index.ts-simstep-2328c343-084d-4465-aa48-14a08a41c4ae",
+ "fileName": "index.ts",
+ "wiki": "The engine walks the AST and finds all instances of the `theme()` function. Each function call is resolved by looking up the specified path (e.g., 'colors.blue.500') in the design system's theme configuration. The `theme()` function is replaced with a CSS `var()` function that references the corresponding theme variable, including a fallback value.",
+ "cellName": "Resolve theme() Functions - index.ts:L674",
+ "cellId": "612e5877-615a-428c-8dd8-d523cb649325",
+ "visible": true,
+ "startLine": 674,
+ "endLine": 674,
+ "parentCellId": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347",
+ "parentPath": "packages/tailwindcss/src/index.ts"
+ },
+ "f1932e5a-8499-4ccf-88be-0566eb54567d": {
+ "path": "f1932e5a-8499-4ccf-88be-0566eb54567d",
+ "cellName": "Substitute @apply Directives - apply.ts:L5-39",
+ "cellId": "f1932e5a-8499-4ccf-88be-0566eb54567d",
+ "visible": true,
+ "parentCellId": "96485fa7-4834-4429-ad88-ac10916ff8f6"
+ },
+ "packages/tailwindcss/src/apply.ts-simstep-ee3a753a-f104-4033-ac7b-466c7d0ebd42": {
+ "path": "packages/tailwindcss/src/apply.ts-simstep-ee3a753a-f104-4033-ac7b-466c7d0ebd42",
+ "fileName": "apply.ts",
+ "wiki": "The engine processes `@apply` directives. It parses the list of utility classes, looks up the corresponding CSS rules for each class in the design system, and replaces the `@apply` directive with the raw CSS declarations. This effectively inlines the utility styles into the custom class.",
+ "cellName": "Substitute @apply Directives - apply.ts:L5-39",
+ "cellId": "f1932e5a-8499-4ccf-88be-0566eb54567d",
+ "visible": true,
+ "startLine": 5,
+ "endLine": 39,
+ "parentCellId": "96485fa7-4834-4429-ad88-ac10916ff8f6",
+ "parentPath": "packages/tailwindcss/src/apply.ts"
+ },
+ "433d52fd-76f6-44b3-9634-9d1c1b97b8f5": {
+ "path": "433d52fd-76f6-44b3-9634-9d1c1b97b8f5",
+ "cellName": "Generate Final CSS - ast.bench.ts:L21-24",
+ "cellId": "433d52fd-76f6-44b3-9634-9d1c1b97b8f5",
+ "visible": true,
+ "parentCellId": "fff5b81c-6f22-4caa-903e-5454c42fa6e1"
+ },
+ "packages/tailwindcss/src/ast.bench.ts-simstep-f5348025-a9a1-4beb-836d-066db79336ce": {
+ "path": "packages/tailwindcss/src/ast.bench.ts-simstep-f5348025-a9a1-4beb-836d-066db79336ce",
+ "fileName": "ast.bench.ts",
+ "wiki": "The final AST is serialized back into a CSS string. The resulting CSS contains standard CSS rules that browsers can understand, with all Tailwind-specific syntax compiled away. This output is ready to be included in the final stylesheet.",
+ "cellName": "Generate Final CSS - ast.bench.ts:L21-24",
+ "cellId": "433d52fd-76f6-44b3-9634-9d1c1b97b8f5",
+ "visible": true,
+ "startLine": 21,
+ "endLine": 24,
+ "parentCellId": "fff5b81c-6f22-4caa-903e-5454c42fa6e1",
+ "parentPath": "packages/tailwindcss/src/ast.bench.ts"
+ },
+ "6210865c-e504-46b2-a3a8-f428c024d737": {
+ "path": "6210865c-e504-46b2-a3a8-f428c024d737",
+ "cellName": "Pass AST\nfor Transformations",
+ "cellId": "6210865c-e504-46b2-a3a8-f428c024d737",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "generated-edge-simstep-3f54b0c2-b2df-4c78-8b4f-01d3868c74fd-6210865c-e504-46b2-a3a8-f428c024d737": {
+ "path": "generated-edge-simstep-3f54b0c2-b2df-4c78-8b4f-01d3868c74fd-6210865c-e504-46b2-a3a8-f428c024d737",
+ "fileName": "css-parser.test.ts",
+ "cellName": "Pass AST for Transformations",
+ "cellId": "6210865c-e504-46b2-a3a8-f428c024d737",
+ "visible": true,
+ "startLine": 672,
+ "endLine": 675,
+ "parentPath": "packages/tailwindcss/src/css-parser.test.ts"
+ },
+ "63dc8986-1769-45c8-8a4b-bc6f5a7ee9b4": {
+ "path": "63dc8986-1769-45c8-8a4b-bc6f5a7ee9b4",
+ "cellName": "Pass Modified\nAST for\n@apply Processing",
+ "cellId": "63dc8986-1769-45c8-8a4b-bc6f5a7ee9b4",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "generated-edge-simstep-24aef2ff-e1cd-483d-aad3-1c8684f5ca54-63dc8986-1769-45c8-8a4b-bc6f5a7ee9b4": {
+ "path": "generated-edge-simstep-24aef2ff-e1cd-483d-aad3-1c8684f5ca54-63dc8986-1769-45c8-8a4b-bc6f5a7ee9b4",
+ "fileName": "index.ts",
+ "cellName": "Pass Modified AST for @apply Processing",
+ "cellId": "63dc8986-1769-45c8-8a4b-bc6f5a7ee9b4",
+ "visible": true,
+ "startLine": 674,
+ "endLine": 675,
+ "parentPath": "packages/tailwindcss/src/index.ts"
+ },
+ "6fb30581-60f8-4314-b0f1-efdeac97744f": {
+ "path": "6fb30581-60f8-4314-b0f1-efdeac97744f",
+ "cellName": "Pass Final\nAST to\nCSS Generator",
+ "cellId": "6fb30581-60f8-4314-b0f1-efdeac97744f",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "generated-edge-simstep-17346dec-5508-4621-a03a-041b9334ef56-6fb30581-60f8-4314-b0f1-efdeac97744f": {
+ "path": "generated-edge-simstep-17346dec-5508-4621-a03a-041b9334ef56-6fb30581-60f8-4314-b0f1-efdeac97744f",
+ "fileName": "apply.ts",
+ "cellName": "Pass Final AST to CSS Generator",
+ "cellId": "6fb30581-60f8-4314-b0f1-efdeac97744f",
+ "visible": true,
+ "startLine": 285,
+ "endLine": 285,
+ "parentPath": "packages/tailwindcss/src/apply.ts"
+ },
+ "eba901e8-9643-438a-96bc-0dcde82a7c20": {
+ "path": "eba901e8-9643-438a-96bc-0dcde82a7c20",
+ "cellName": "integrations",
+ "cellId": "eba901e8-9643-438a-96bc-0dcde82a7c20",
+ "visible": true
+ },
+ "6cba388c-c9bb-4bf9-99b0-bb7d8d9a7957": {
+ "path": "6cba388c-c9bb-4bf9-99b0-bb7d8d9a7957",
+ "cellName": "pnpm-lock.yaml",
+ "cellId": "6cba388c-c9bb-4bf9-99b0-bb7d8d9a7957",
+ "visible": true
+ },
+ "84b5e2ac-fddb-4e13-8165-4d84176fe6f7": {
+ "path": "84b5e2ac-fddb-4e13-8165-4d84176fe6f7",
+ "cellName": "@tailwindcss-cli",
+ "cellId": "84b5e2ac-fddb-4e13-8165-4d84176fe6f7",
+ "visible": true,
+ "parentCellId": "8cf7f1e0-3fe6-46a3-b961-356a05cf5c23"
+ },
+ "8b8d7829-1345-4a9f-888e-179f388aa019": {
+ "path": "8b8d7829-1345-4a9f-888e-179f388aa019",
+ "cellName": "ignore",
+ "cellId": "8b8d7829-1345-4a9f-888e-179f388aa019",
+ "visible": true,
+ "parentCellId": "69cd5b59-55ce-4dca-be52-218e92d88ee7"
+ },
+ "36f30b02-b1e0-4fbb-9e63-6b20cb749220": {
+ "path": "36f30b02-b1e0-4fbb-9e63-6b20cb749220",
+ "cellName": "cli",
+ "cellId": "36f30b02-b1e0-4fbb-9e63-6b20cb749220",
+ "visible": true,
+ "parentCellId": "eba901e8-9643-438a-96bc-0dcde82a7c20"
+ },
+ "966ed1d6-6e20-4090-bb80-639075e583ed": {
+ "path": "966ed1d6-6e20-4090-bb80-639075e583ed",
+ "cellName": "src",
+ "cellId": "966ed1d6-6e20-4090-bb80-639075e583ed",
+ "visible": true,
+ "parentCellId": "84b5e2ac-fddb-4e13-8165-4d84176fe6f7"
+ },
+ "629e315e-a831-419d-9497-3095c8682a2c": {
+ "path": "629e315e-a831-419d-9497-3095c8682a2c",
+ "cellName": "src",
+ "cellId": "629e315e-a831-419d-9497-3095c8682a2c",
+ "visible": true,
+ "parentCellId": "8b8d7829-1345-4a9f-888e-179f388aa019"
+ },
+ "a8a73047-0292-4204-ae1b-f737ffd7e186": {
+ "path": "a8a73047-0292-4204-ae1b-f737ffd7e186",
+ "cellName": "index.test.ts",
+ "cellId": "a8a73047-0292-4204-ae1b-f737ffd7e186",
+ "visible": true,
+ "parentCellId": "36f30b02-b1e0-4fbb-9e63-6b20cb749220"
+ },
+ "7418384f-4087-444d-98f3-f15e8c6dee4c": {
+ "path": "7418384f-4087-444d-98f3-f15e8c6dee4c",
+ "cellName": "index.ts",
+ "cellId": "7418384f-4087-444d-98f3-f15e8c6dee4c",
+ "visible": true,
+ "parentCellId": "966ed1d6-6e20-4090-bb80-639075e583ed"
+ },
+ "1244f936-3470-4cec-a183-82050790decb": {
+ "path": "1244f936-3470-4cec-a183-82050790decb",
+ "cellName": "walk.rs",
+ "cellId": "1244f936-3470-4cec-a183-82050790decb",
+ "visible": true,
+ "parentCellId": "629e315e-a831-419d-9497-3095c8682a2c"
+ },
+ "ce22e949-cfba-4bd5-aca8-b2550b40c5f8": {
+ "path": "ce22e949-cfba-4bd5-aca8-b2550b40c5f8",
+ "cellName": "CLI: Start CLI Execution - index.ts:L11-17",
+ "cellId": "ce22e949-cfba-4bd5-aca8-b2550b40c5f8",
+ "visible": true,
+ "parentCellId": "7418384f-4087-444d-98f3-f15e8c6dee4c"
+ },
+ "packages/@tailwindcss-cli/src/index.ts-simstep-fa981cdc-06e1-400e-aaa5-91cdb7f9e856": {
+ "path": "packages/@tailwindcss-cli/src/index.ts-simstep-fa981cdc-06e1-400e-aaa5-91cdb7f9e856",
+ "fileName": "index.ts",
+ "wiki": "A user runs the Tailwind CSS CLI with arguments for input, output, and watch mode (e.g., `tailwindcss -i input.css -o output.css --watch`). The main script at `packages/@tailwindcss-cli/src/index.ts` serves as the entry point, responsible for parsing these command-line arguments.",
+ "cellName": "CLI: Start CLI Execution - index.ts:L11-17",
+ "cellId": "ce22e949-cfba-4bd5-aca8-b2550b40c5f8",
+ "visible": true,
+ "startLine": 11,
+ "endLine": 17,
+ "parentCellId": "7418384f-4087-444d-98f3-f15e8c6dee4c",
+ "parentPath": "packages/@tailwindcss-cli/src/index.ts"
+ },
+ "32ce5d1a-ff8c-4b34-8fc3-91470258a973": {
+ "path": "32ce5d1a-ff8c-4b34-8fc3-91470258a973",
+ "cellName": "Build: Setup Compiler for Initial Build - index.ts:L824-843",
+ "cellId": "32ce5d1a-ff8c-4b34-8fc3-91470258a973",
+ "visible": true,
+ "parentCellId": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347"
+ },
+ "packages/tailwindcss/src/index.ts-simstep-6e16fb9e-1fea-4158-8326-353b2ad48b5e": {
+ "path": "packages/tailwindcss/src/index.ts-simstep-6e16fb9e-1fea-4158-8326-353b2ad48b5e",
+ "fileName": "index.ts",
+ "wiki": "The build handler invokes the core `compile` function from the `tailwindcss` package. This function reads the input CSS file content, parses it into an Abstract Syntax Tree (AST), and sets up the design system and compilation context for generating CSS.",
+ "cellName": "Build: Setup Compiler for Initial Build - index.ts:L824-843",
+ "cellId": "32ce5d1a-ff8c-4b34-8fc3-91470258a973",
+ "visible": true,
+ "startLine": 824,
+ "endLine": 843,
+ "parentCellId": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347",
+ "parentPath": "packages/tailwindcss/src/index.ts"
+ },
+ "4c9420c8-ece0-49f6-b67e-e14498394096": {
+ "path": "4c9420c8-ece0-49f6-b67e-e14498394096",
+ "cellName": "Scanner: Traverse Directories and Extract Classes - walk.rs:L537-546",
+ "cellId": "4c9420c8-ece0-49f6-b67e-e14498394096",
+ "visible": true,
+ "parentCellId": "1244f936-3470-4cec-a183-82050790decb"
+ },
+ "crates/ignore/src/walk.rs-simstep-13a986da-a534-4196-b808-d8de4f9a0a8a": {
+ "path": "crates/ignore/src/walk.rs-simstep-13a986da-a534-4196-b808-d8de4f9a0a8a",
+ "fileName": "walk.rs",
+ "wiki": "The scanner uses `WalkBuilder` from the `ignore` crate to efficiently traverse the file system, respecting rules from files like `.gitignore`. For each matched content file, it scans the content and extracts a list of potential Tailwind CSS class candidates.",
+ "cellName": "Scanner: Traverse Directories and Extract Classes - walk.rs:L537-546",
+ "cellId": "4c9420c8-ece0-49f6-b67e-e14498394096",
+ "visible": true,
+ "startLine": 537,
+ "endLine": 546,
+ "parentCellId": "1244f936-3470-4cec-a183-82050790decb",
+ "parentPath": "crates/ignore/src/walk.rs"
+ },
+ "c066f1d3-dad7-4966-a0a9-bd83e510dc78": {
+ "path": "c066f1d3-dad7-4966-a0a9-bd83e510dc78",
+ "cellName": "Compiler: Generate CSS from Candidates - index.ts:L747-755",
+ "cellId": "c066f1d3-dad7-4966-a0a9-bd83e510dc78",
+ "visible": true,
+ "parentCellId": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347"
+ },
+ "packages/tailwindcss/src/index.ts-simstep-0da50755-36e5-481e-9ab4-3d0ec52133ba": {
+ "path": "packages/tailwindcss/src/index.ts-simstep-0da50755-36e5-481e-9ab4-3d0ec52133ba",
+ "fileName": "index.ts",
+ "wiki": "The compiler's `build` method takes the list of candidates, resolves them against the design system and utilities, and generates the final CSS string containing all necessary rules.",
+ "cellName": "Compiler: Generate CSS from Candidates - index.ts:L747-755",
+ "cellId": "c066f1d3-dad7-4966-a0a9-bd83e510dc78",
+ "visible": true,
+ "startLine": 747,
+ "endLine": 755,
+ "parentCellId": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347",
+ "parentPath": "packages/tailwindcss/src/index.ts"
+ },
+ "044494ec-c43c-4350-b8db-0c269d1b3b2b": {
+ "path": "044494ec-c43c-4350-b8db-0c269d1b3b2b",
+ "cellName": "CLI: Write Output and Start Watcher - index.test.ts:L298-306",
+ "cellId": "044494ec-c43c-4350-b8db-0c269d1b3b2b",
+ "visible": true,
+ "parentCellId": "a8a73047-0292-4204-ae1b-f737ffd7e186"
+ },
+ "integrations/cli/index.test.ts-simstep-e6753a9e-15a6-4ac3-8323-44b208eff2a9": {
+ "path": "integrations/cli/index.test.ts-simstep-e6753a9e-15a6-4ac3-8323-44b208eff2a9",
+ "fileName": "index.test.ts",
+ "wiki": "The CLI handler writes the generated CSS to the specified output file. Since the `--watch` flag was used, it then initializes a file system watcher (using `@parcel/watcher`) to monitor all content files and CSS dependencies for changes.",
+ "cellName": "CLI: Write Output and Start Watcher - index.test.ts:L298-306",
+ "cellId": "044494ec-c43c-4350-b8db-0c269d1b3b2b",
+ "visible": true,
+ "startLine": 298,
+ "endLine": 306,
+ "parentCellId": "a8a73047-0292-4204-ae1b-f737ffd7e186",
+ "parentPath": "integrations/cli/index.test.ts"
+ },
+ "def0383c-7001-4728-a66f-35e369246e9b": {
+ "path": "def0383c-7001-4728-a66f-35e369246e9b",
+ "cellName": "CLI: Trigger Incremental Rebuild - index.test.ts:L298-306",
+ "cellId": "def0383c-7001-4728-a66f-35e369246e9b",
+ "visible": true,
+ "parentCellId": "a8a73047-0292-4204-ae1b-f737ffd7e186"
+ },
+ "integrations/cli/index.test.ts-simstep-7d1f3c46-2e32-4199-8d44-2ee319345f57": {
+ "path": "integrations/cli/index.test.ts-simstep-7d1f3c46-2e32-4199-8d44-2ee319345f57",
+ "fileName": "index.test.ts",
+ "wiki": "The CLI's event handler receives the file change event and triggers an incremental rebuild. It re-scans the necessary files to update its list of utility class candidates.",
+ "cellName": "CLI: Trigger Incremental Rebuild - index.test.ts:L298-306",
+ "cellId": "def0383c-7001-4728-a66f-35e369246e9b",
+ "visible": true,
+ "startLine": 298,
+ "endLine": 306,
+ "parentCellId": "a8a73047-0292-4204-ae1b-f737ffd7e186",
+ "parentPath": "integrations/cli/index.test.ts"
+ },
+ "642ba4d6-5732-430d-a489-e69bae067bf8": {
+ "path": "642ba4d6-5732-430d-a489-e69bae067bf8",
+ "cellName": "Compiler: Regenerate CSS - index.ts:L747-755",
+ "cellId": "642ba4d6-5732-430d-a489-e69bae067bf8",
+ "visible": true,
+ "parentCellId": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347"
+ },
+ "packages/tailwindcss/src/index.ts-simstep-2053de67-31dc-4f8c-88cc-232e376872e9": {
+ "path": "packages/tailwindcss/src/index.ts-simstep-2053de67-31dc-4f8c-88cc-232e376872e9",
+ "fileName": "index.ts",
+ "wiki": "The compiler processes the updated list of candidates, generating a new CSS string that includes rules for any newly added classes (like `mt-8`).",
+ "cellName": "Compiler: Regenerate CSS - index.ts:L747-755",
+ "cellId": "642ba4d6-5732-430d-a489-e69bae067bf8",
+ "visible": true,
+ "startLine": 747,
+ "endLine": 755,
+ "parentCellId": "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347",
+ "parentPath": "packages/tailwindcss/src/index.ts"
+ },
+ "62cea20d-3fce-4730-a177-ce56751d0ac4": {
+ "path": "62cea20d-3fce-4730-a177-ce56751d0ac4",
+ "cellName": "CLI: Overwrite Output File and Wait - index.test.ts:L298-306",
+ "cellId": "62cea20d-3fce-4730-a177-ce56751d0ac4",
+ "visible": true,
+ "parentCellId": "a8a73047-0292-4204-ae1b-f737ffd7e186"
+ },
+ "integrations/cli/index.test.ts-simstep-20480b42-f302-4806-bc81-b904a6cb5d62": {
+ "path": "integrations/cli/index.test.ts-simstep-20480b42-f302-4806-bc81-b904a6cb5d62",
+ "fileName": "index.test.ts",
+ "wiki": "The CLI handler overwrites the output file with the updated CSS content. The process then returns to a waiting state, listening for subsequent file changes.",
+ "cellName": "CLI: Overwrite Output File and Wait - index.test.ts:L298-306",
+ "cellId": "62cea20d-3fce-4730-a177-ce56751d0ac4",
+ "visible": true,
+ "startLine": 298,
+ "endLine": 306,
+ "parentCellId": "a8a73047-0292-4204-ae1b-f737ffd7e186",
+ "parentPath": "integrations/cli/index.test.ts"
+ },
+ "e217e9a0-1864-4fb7-8ba3-3f359797fd6c": {
+ "path": "e217e9a0-1864-4fb7-8ba3-3f359797fd6c",
+ "cellName": "CLI: Pass\nParsed Arguments\nto Build\nHandler",
+ "cellId": "e217e9a0-1864-4fb7-8ba3-3f359797fd6c",
+ "visible": true,
+ "parentCellId": "8cf7f1e0-3fe6-46a3-b961-356a05cf5c23"
+ },
+ "generated-edge-simstep-a91cd2ac-17eb-4d88-afd4-18df2bf19159-e217e9a0-1864-4fb7-8ba3-3f359797fd6c": {
+ "path": "generated-edge-simstep-a91cd2ac-17eb-4d88-afd4-18df2bf19159-e217e9a0-1864-4fb7-8ba3-3f359797fd6c",
+ "fileName": "index.ts",
+ "cellName": "CLI: Pass Parsed Arguments to Build Handler",
+ "cellId": "e217e9a0-1864-4fb7-8ba3-3f359797fd6c",
+ "visible": true,
+ "startLine": 48,
+ "endLine": 48,
+ "parentPath": "packages/@tailwindcss-cli/src/index.ts"
+ },
+ "290e80b5-a44f-4568-9ac9-8fdd8676baea": {
+ "path": "290e80b5-a44f-4568-9ac9-8fdd8676baea",
+ "cellName": "Build: Request\nContent File\nScan",
+ "cellId": "290e80b5-a44f-4568-9ac9-8fdd8676baea",
+ "visible": true
+ },
+ "generated-edge-simstep-70683ff5-fdf7-4d33-bb07-b7cf7733278f-290e80b5-a44f-4568-9ac9-8fdd8676baea": {
+ "path": "generated-edge-simstep-70683ff5-fdf7-4d33-bb07-b7cf7733278f-290e80b5-a44f-4568-9ac9-8fdd8676baea",
+ "fileName": "index.ts",
+ "cellName": "Build: Request Content File Scan",
+ "cellId": "290e80b5-a44f-4568-9ac9-8fdd8676baea",
+ "visible": true,
+ "startLine": 644,
+ "endLine": 651,
+ "parentPath": "packages/tailwindcss/src/index.ts"
+ },
+ "89bdc94c-6450-4658-9b0d-aa0c274959b3": {
+ "path": "89bdc94c-6450-4658-9b0d-aa0c274959b3",
+ "cellName": "Scanner: Return\nClass Candidates",
+ "cellId": "89bdc94c-6450-4658-9b0d-aa0c274959b3",
+ "visible": true
+ },
+ "generated-edge-simstep-1dc55af9-80f5-4fe9-9d6a-11f103fefea0-89bdc94c-6450-4658-9b0d-aa0c274959b3": {
+ "path": "generated-edge-simstep-1dc55af9-80f5-4fe9-9d6a-11f103fefea0-89bdc94c-6450-4658-9b0d-aa0c274959b3",
+ "fileName": "walk.rs",
+ "cellName": "Scanner: Return Class Candidates",
+ "cellId": "89bdc94c-6450-4658-9b0d-aa0c274959b3",
+ "visible": true,
+ "startLine": 747,
+ "endLine": 747,
+ "parentPath": "crates/ignore/src/walk.rs"
+ },
+ "e203c8d1-3b36-4586-a850-4cc923b3218e": {
+ "path": "e203c8d1-3b36-4586-a850-4cc923b3218e",
+ "cellName": "Compiler: Provide\nGenerated CSS\nfor Output",
+ "cellId": "e203c8d1-3b36-4586-a850-4cc923b3218e",
+ "visible": true
+ },
+ "generated-edge-simstep-4d57d59d-e65b-4b85-964d-d80e5d3be373-e203c8d1-3b36-4586-a850-4cc923b3218e": {
+ "path": "generated-edge-simstep-4d57d59d-e65b-4b85-964d-d80e5d3be373-e203c8d1-3b36-4586-a850-4cc923b3218e",
+ "fileName": "index.ts",
+ "cellName": "Compiler: Provide Generated CSS for Output",
+ "cellId": "e203c8d1-3b36-4586-a850-4cc923b3218e",
+ "visible": true,
+ "startLine": 24,
+ "endLine": 95,
+ "parentPath": "packages/tailwindcss/src/index.ts"
+ },
+ "7ca7617c-1daf-49dd-9b25-2a613f5af8e0": {
+ "path": "7ca7617c-1daf-49dd-9b25-2a613f5af8e0",
+ "cellName": "Watcher: Detect\nand Emit\nFile Change\nEvent",
+ "cellId": "7ca7617c-1daf-49dd-9b25-2a613f5af8e0",
+ "visible": true,
+ "parentCellId": "a8a73047-0292-4204-ae1b-f737ffd7e186"
+ },
+ "generated-edge-simstep-8fa8985c-1028-43e0-8392-ef60baa2105c-7ca7617c-1daf-49dd-9b25-2a613f5af8e0": {
+ "path": "generated-edge-simstep-8fa8985c-1028-43e0-8392-ef60baa2105c-7ca7617c-1daf-49dd-9b25-2a613f5af8e0",
+ "fileName": "index.test.ts",
+ "cellName": "Watcher: Detect and Emit File Change Event",
+ "cellId": "7ca7617c-1daf-49dd-9b25-2a613f5af8e0",
+ "visible": true,
+ "startLine": 210,
+ "endLine": 218,
+ "parentPath": "integrations/cli/index.test.ts"
+ },
+ "c154d024-5aaa-465a-84bf-31261cfbae3b": {
+ "path": "c154d024-5aaa-465a-84bf-31261cfbae3b",
+ "cellName": "Build: Pass\nUpdated Candidates\nto Compiler",
+ "cellId": "c154d024-5aaa-465a-84bf-31261cfbae3b",
+ "visible": true
+ },
+ "generated-edge-simstep-a00534cf-b62f-4cec-8ccb-baec18d421d8-c154d024-5aaa-465a-84bf-31261cfbae3b": {
+ "path": "generated-edge-simstep-a00534cf-b62f-4cec-8ccb-baec18d421d8-c154d024-5aaa-465a-84bf-31261cfbae3b",
+ "fileName": "index.test.ts",
+ "cellName": "Build: Pass Updated Candidates to Compiler",
+ "cellId": "c154d024-5aaa-465a-84bf-31261cfbae3b",
+ "visible": true,
+ "startLine": 747,
+ "endLine": 747,
+ "parentPath": "integrations/cli/index.test.ts"
+ },
+ "98b96734-7f00-4974-9637-bc7e9cbdff7e": {
+ "path": "98b96734-7f00-4974-9637-bc7e9cbdff7e",
+ "cellName": "Compiler: Provide\nUpdated CSS\nfor Output",
+ "cellId": "98b96734-7f00-4974-9637-bc7e9cbdff7e",
+ "visible": true
+ },
+ "generated-edge-simstep-738566df-3531-465b-bcb3-9ca71c481ace-98b96734-7f00-4974-9637-bc7e9cbdff7e": {
+ "path": "generated-edge-simstep-738566df-3531-465b-bcb3-9ca71c481ace-98b96734-7f00-4974-9637-bc7e9cbdff7e",
+ "fileName": "index.ts",
+ "cellName": "Compiler: Provide Updated CSS for Output",
+ "cellId": "98b96734-7f00-4974-9637-bc7e9cbdff7e",
+ "visible": true,
+ "startLine": 298,
+ "endLine": 306,
+ "parentPath": "packages/tailwindcss/src/index.ts"
+ },
+ "6e701650-96db-43c1-903b-624571aab002": {
+ "path": "6e701650-96db-43c1-903b-624571aab002",
+ "cellName": "@tailwindcss-upgrade",
+ "cellId": "6e701650-96db-43c1-903b-624571aab002",
+ "visible": true,
+ "parentCellId": "8cf7f1e0-3fe6-46a3-b961-356a05cf5c23"
+ },
+ "36a082db-3d3b-4e94-b9cd-eb1498ba1791": {
+ "path": "36a082db-3d3b-4e94-b9cd-eb1498ba1791",
+ "cellName": "src",
+ "cellId": "36a082db-3d3b-4e94-b9cd-eb1498ba1791",
+ "visible": true,
+ "parentCellId": "6e701650-96db-43c1-903b-624571aab002"
+ },
+ "db83c168-0406-448d-85af-5e0d98377086": {
+ "path": "db83c168-0406-448d-85af-5e0d98377086",
+ "cellName": "index.ts",
+ "cellId": "db83c168-0406-448d-85af-5e0d98377086",
+ "visible": true,
+ "parentCellId": "36a082db-3d3b-4e94-b9cd-eb1498ba1791"
+ },
+ "f67b4f04-8c97-4b42-b087-d308c12af7ab": {
+ "path": "f67b4f04-8c97-4b42-b087-d308c12af7ab",
+ "cellName": "codemods",
+ "cellId": "f67b4f04-8c97-4b42-b087-d308c12af7ab",
+ "visible": true,
+ "parentCellId": "36a082db-3d3b-4e94-b9cd-eb1498ba1791"
+ },
+ "1521f797-a86c-42d5-9569-e8509b1a9b1c": {
+ "path": "1521f797-a86c-42d5-9569-e8509b1a9b1c",
+ "cellName": "config",
+ "cellId": "1521f797-a86c-42d5-9569-e8509b1a9b1c",
+ "visible": true,
+ "parentCellId": "f67b4f04-8c97-4b42-b087-d308c12af7ab"
+ },
+ "cfff54dd-c38e-499b-9ba6-416f253ce44c": {
+ "path": "cfff54dd-c38e-499b-9ba6-416f253ce44c",
+ "cellName": "css",
+ "cellId": "cfff54dd-c38e-499b-9ba6-416f253ce44c",
+ "visible": true,
+ "parentCellId": "f67b4f04-8c97-4b42-b087-d308c12af7ab"
+ },
+ "7a100cf0-eb22-4095-9d1d-29b05d40ba36": {
+ "path": "7a100cf0-eb22-4095-9d1d-29b05d40ba36",
+ "cellName": "template",
+ "cellId": "7a100cf0-eb22-4095-9d1d-29b05d40ba36",
+ "visible": true,
+ "parentCellId": "f67b4f04-8c97-4b42-b087-d308c12af7ab"
+ },
+ "df5b0085-8384-4821-ab95-f85e82bb9f9e": {
+ "path": "df5b0085-8384-4821-ab95-f85e82bb9f9e",
+ "cellName": "migrate-js-config.ts",
+ "cellId": "df5b0085-8384-4821-ab95-f85e82bb9f9e",
+ "visible": true,
+ "parentCellId": "1521f797-a86c-42d5-9569-e8509b1a9b1c"
+ },
+ "36d99a6e-17e3-4cac-bf94-9e913af6e836": {
+ "path": "36d99a6e-17e3-4cac-bf94-9e913af6e836",
+ "cellName": "migrate-postcss.ts",
+ "cellId": "36d99a6e-17e3-4cac-bf94-9e913af6e836",
+ "visible": true,
+ "parentCellId": "1521f797-a86c-42d5-9569-e8509b1a9b1c"
+ },
+ "831b0964-3ec2-4c29-8701-21f672966d76": {
+ "path": "831b0964-3ec2-4c29-8701-21f672966d76",
+ "cellName": "migrate.ts",
+ "cellId": "831b0964-3ec2-4c29-8701-21f672966d76",
+ "visible": true,
+ "parentCellId": "cfff54dd-c38e-499b-9ba6-416f253ce44c"
+ },
+ "6e3f56ab-6733-408c-a555-a1d334cd6114": {
+ "path": "6e3f56ab-6733-408c-a555-a1d334cd6114",
+ "cellName": "migrate.ts",
+ "cellId": "6e3f56ab-6733-408c-a555-a1d334cd6114",
+ "visible": true,
+ "parentCellId": "7a100cf0-eb22-4095-9d1d-29b05d40ba36"
+ },
+ "7f7ba991-3b7e-4dae-8dfc-40e36d069f27": {
+ "path": "7f7ba991-3b7e-4dae-8dfc-40e36d069f27",
+ "cellName": "Start Upgrade & Discover Files - index.ts:L118-132",
+ "cellId": "7f7ba991-3b7e-4dae-8dfc-40e36d069f27",
+ "visible": true,
+ "parentCellId": "db83c168-0406-448d-85af-5e0d98377086"
+ },
+ "packages/@tailwindcss-upgrade/src/index.ts-simstep-ce816b1a-1bf4-4eb6-94b0-027562d885d1": {
+ "path": "packages/@tailwindcss-upgrade/src/index.ts-simstep-ce816b1a-1bf4-4eb6-94b0-027562d885d1",
+ "fileName": "index.ts",
+ "wiki": "The user runs the `@tailwindcss/upgrade` CLI command. The main `run` function is executed, which parses arguments, discovers all stylesheets (`.css` files), analyzes them for Tailwind directives, and links them to any relevant `tailwind.config.js` files.",
+ "cellName": "Start Upgrade & Discover Files - index.ts:L118-132",
+ "cellId": "7f7ba991-3b7e-4dae-8dfc-40e36d069f27",
+ "visible": true,
+ "startLine": 118,
+ "endLine": 132,
+ "parentCellId": "db83c168-0406-448d-85af-5e0d98377086",
+ "parentPath": "packages/@tailwindcss-upgrade/src/index.ts"
+ },
+ "3b4d3048-762b-4580-a286-1d88980975f4": {
+ "path": "3b4d3048-762b-4580-a286-1d88980975f4",
+ "cellName": "Migrate JS Config to CSS Format - migrate-js-config.ts:L42-107",
+ "cellId": "3b4d3048-762b-4580-a286-1d88980975f4",
+ "visible": true,
+ "parentCellId": "df5b0085-8384-4821-ab95-f85e82bb9f9e"
+ },
+ "packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts-simstep-93199260-e2ea-489d-8592-77a7f0899362": {
+ "path": "packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts-simstep-93199260-e2ea-489d-8592-77a7f0899362",
+ "fileName": "migrate-js-config.ts",
+ "wiki": "For each project configuration, `migrateJsConfig` reads the `tailwind.config.js` file and converts its static values (like `theme`, `content`, `darkMode`) into the new CSS-based configuration format used in Tailwind CSS v4. This is a core part of the v3 to v4 migration.",
+ "cellName": "Migrate JS Config to CSS Format - migrate-js-config.ts:L42-107",
+ "cellId": "3b4d3048-762b-4580-a286-1d88980975f4",
+ "visible": true,
+ "startLine": 42,
+ "endLine": 107,
+ "parentCellId": "df5b0085-8384-4821-ab95-f85e82bb9f9e",
+ "parentPath": "packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts"
+ },
+ "98b7b7d2-1f96-462e-a79c-6832c9fa94f2": {
+ "path": "98b7b7d2-1f96-462e-a79c-6832c9fa94f2",
+ "cellName": "Apply Codemods to CSS Files - migrate.ts:L47-58",
+ "cellId": "98b7b7d2-1f96-462e-a79c-6832c9fa94f2",
+ "visible": true,
+ "parentCellId": "831b0964-3ec2-4c29-8701-21f672966d76"
+ },
+ "packages/@tailwindcss-upgrade/src/codemods/css/migrate.ts-simstep-e92a32ae-c3cc-45c5-b6a2-c33fd48f023c": {
+ "path": "packages/@tailwindcss-upgrade/src/codemods/css/migrate.ts-simstep-e92a32ae-c3cc-45c5-b6a2-c33fd48f023c",
+ "fileName": "migrate.ts",
+ "wiki": "The `migrateContents` function processes each CSS file using a PostCSS pipeline. It applies a series of codemods that transform CSS at-rules like `@tailwind`, `@apply`, `@layer`, and `theme()` functions to their v4 equivalents. The migrated JS config is also injected as an `@theme` block.",
+ "cellName": "Apply Codemods to CSS Files - migrate.ts:L47-58",
+ "cellId": "98b7b7d2-1f96-462e-a79c-6832c9fa94f2",
+ "visible": true,
+ "startLine": 47,
+ "endLine": 58,
+ "parentCellId": "831b0964-3ec2-4c29-8701-21f672966d76",
+ "parentPath": "packages/@tailwindcss-upgrade/src/codemods/css/migrate.ts"
+ },
+ "e3f5bdd8-ee3b-4437-b215-ec0703b10055": {
+ "path": "e3f5bdd8-ee3b-4437-b215-ec0703b10055",
+ "cellName": "Migrate Classes in Template Files - migrate.ts:L108-129",
+ "cellId": "e3f5bdd8-ee3b-4437-b215-ec0703b10055",
+ "visible": true,
+ "parentCellId": "6e3f56ab-6733-408c-a555-a1d334cd6114"
+ },
+ "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts-simstep-1c3ec338-fdc9-4775-9293-8227945ffe56": {
+ "path": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts-simstep-1c3ec338-fdc9-4775-9293-8227945ffe56",
+ "fileName": "migrate.ts",
+ "wiki": "The `migrateContents` function orchestrates the migration of template files. It reads each file, uses `extractRawCandidates` to find all potential class strings, and then calls `migrateCandidate` for each one to apply the necessary transformations.",
+ "cellName": "Migrate Classes in Template Files - migrate.ts:L108-129",
+ "cellId": "e3f5bdd8-ee3b-4437-b215-ec0703b10055",
+ "visible": true,
+ "startLine": 108,
+ "endLine": 129,
+ "parentCellId": "6e3f56ab-6733-408c-a555-a1d334cd6114",
+ "parentPath": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts"
+ },
+ "d1855f5d-6e48-4f82-9fde-bd6f075fca39": {
+ "path": "d1855f5d-6e48-4f82-9fde-bd6f075fca39",
+ "cellName": "Apply Codemods to Class Candidate - migrate.ts:L68-78",
+ "cellId": "d1855f5d-6e48-4f82-9fde-bd6f075fca39",
+ "visible": true,
+ "parentCellId": "6e3f56ab-6733-408c-a555-a1d334cd6114"
+ },
+ "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts-simstep-8485b8c0-dfc3-4e62-bf40-025a709f2559": {
+ "path": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts-simstep-8485b8c0-dfc3-4e62-bf40-025a709f2559",
+ "fileName": "migrate.ts",
+ "wiki": "The raw class string is processed by a series of migration functions defined in `DEFAULT_MIGRATIONS`. Each function is a specific codemod targeting a particular breaking change, such as renaming deprecated utilities (`shadow` -> `shadow-sm`), modernizing arbitrary values, or reordering variants.",
+ "cellName": "Apply Codemods to Class Candidate - migrate.ts:L68-78",
+ "cellId": "d1855f5d-6e48-4f82-9fde-bd6f075fca39",
+ "visible": true,
+ "startLine": 68,
+ "endLine": 78,
+ "parentCellId": "6e3f56ab-6733-408c-a555-a1d334cd6114",
+ "parentPath": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts"
+ },
+ "1ef57531-209f-4f6f-a81e-79df134b93f3": {
+ "path": "1ef57531-209f-4f6f-a81e-79df134b93f3",
+ "cellName": "Aggregate and Write Template Changes - migrate.ts:L131-141",
+ "cellId": "1ef57531-209f-4f6f-a81e-79df134b93f3",
+ "visible": true,
+ "parentCellId": "6e3f56ab-6733-408c-a555-a1d334cd6114"
+ },
+ "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts-simstep-2f421e36-42fd-460c-a31d-aafb4fe73702": {
+ "path": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts-simstep-2f421e36-42fd-460c-a31d-aafb4fe73702",
+ "fileName": "migrate.ts",
+ "wiki": "After all class candidates in a file have been processed, `migrateContents` uses `spliceChangesIntoString` to construct the new file content with all class names updated. The main `migrate` function then writes this new content back to the file on disk.",
+ "cellName": "Aggregate and Write Template Changes - migrate.ts:L131-141",
+ "cellId": "1ef57531-209f-4f6f-a81e-79df134b93f3",
+ "visible": true,
+ "startLine": 131,
+ "endLine": 141,
+ "parentCellId": "6e3f56ab-6733-408c-a555-a1d334cd6114",
+ "parentPath": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts"
+ },
+ "4a6b2b84-1a12-4616-9c3c-f290fd4fbe75": {
+ "path": "4a6b2b84-1a12-4616-9c3c-f290fd4fbe75",
+ "cellName": "Migrate PostCSS Configuration - migrate-postcss.ts:L19-137",
+ "cellId": "4a6b2b84-1a12-4616-9c3c-f290fd4fbe75",
+ "visible": true,
+ "parentCellId": "36d99a6e-17e3-4cac-bf94-9e913af6e836"
+ },
+ "packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts-simstep-00af9177-f9ac-4995-8158-df8fb42d1d65": {
+ "path": "packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts-simstep-00af9177-f9ac-4995-8158-df8fb42d1d65",
+ "fileName": "migrate-postcss.ts",
+ "wiki": "The `migratePostCSSConfig` function attempts to simplify the user's `postcss.config.js` file by removing now-unnecessary plugins like `autoprefixer` (which is built into Tailwind CSS v4) and ensuring `tailwindcss` is correctly configured.",
+ "cellName": "Migrate PostCSS Configuration - migrate-postcss.ts:L19-137",
+ "cellId": "4a6b2b84-1a12-4616-9c3c-f290fd4fbe75",
+ "visible": true,
+ "startLine": 19,
+ "endLine": 137,
+ "parentCellId": "36d99a6e-17e3-4cac-bf94-9e913af6e836",
+ "parentPath": "packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts"
+ },
+ "b41098b9-4fd3-4aa6-b994-bc0890fcb1f3": {
+ "path": "b41098b9-4fd3-4aa6-b994-bc0890fcb1f3",
+ "cellName": "JS Config\nPath to\nMigrator",
+ "cellId": "b41098b9-4fd3-4aa6-b994-bc0890fcb1f3",
+ "visible": true,
+ "parentCellId": "36a082db-3d3b-4e94-b9cd-eb1498ba1791"
+ },
+ "generated-edge-simstep-bbd429dc-f5fc-47d5-b55e-638177453e6e-b41098b9-4fd3-4aa6-b994-bc0890fcb1f3": {
+ "path": "generated-edge-simstep-bbd429dc-f5fc-47d5-b55e-638177453e6e-b41098b9-4fd3-4aa6-b994-bc0890fcb1f3",
+ "fileName": "index.ts",
+ "cellName": "JS Config Path to Migrator",
+ "cellId": "b41098b9-4fd3-4aa6-b994-bc0890fcb1f3",
+ "visible": true,
+ "startLine": 158,
+ "endLine": 162,
+ "parentPath": "packages/@tailwindcss-upgrade/src/index.ts"
+ },
+ "2aec4fd3-67b4-4b90-ae7f-2a1907c1cdf4": {
+ "path": "2aec4fd3-67b4-4b90-ae7f-2a1907c1cdf4",
+ "cellName": "Migrated Config\nto CSS\nMigrator",
+ "cellId": "2aec4fd3-67b4-4b90-ae7f-2a1907c1cdf4",
+ "visible": true,
+ "parentCellId": "f67b4f04-8c97-4b42-b087-d308c12af7ab"
+ },
+ "generated-edge-simstep-010015a1-3199-4b55-9673-1bcb48054d7e-2aec4fd3-67b4-4b90-ae7f-2a1907c1cdf4": {
+ "path": "generated-edge-simstep-010015a1-3199-4b55-9673-1bcb48054d7e-2aec4fd3-67b4-4b90-ae7f-2a1907c1cdf4",
+ "fileName": "migrate-js-config.ts",
+ "cellName": "Migrated Config to CSS Migrator",
+ "cellId": "2aec4fd3-67b4-4b90-ae7f-2a1907c1cdf4",
+ "visible": true,
+ "startLine": 195,
+ "endLine": 203,
+ "parentPath": "packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts"
+ },
+ "dbe65b41-4594-49d2-9023-421e4450573a": {
+ "path": "dbe65b41-4594-49d2-9023-421e4450573a",
+ "cellName": "Design System\nto Template\nMigrator",
+ "cellId": "dbe65b41-4594-49d2-9023-421e4450573a",
+ "visible": true,
+ "parentCellId": "f67b4f04-8c97-4b42-b087-d308c12af7ab"
+ },
+ "generated-edge-simstep-7699f08f-a139-4b00-9f60-0d8641b9f7bb-dbe65b41-4594-49d2-9023-421e4450573a": {
+ "path": "generated-edge-simstep-7699f08f-a139-4b00-9f60-0d8641b9f7bb-dbe65b41-4594-49d2-9023-421e4450573a",
+ "fileName": "migrate.ts",
+ "cellName": "Design System to Template Migrator",
+ "cellId": "dbe65b41-4594-49d2-9023-421e4450573a",
+ "visible": true,
+ "startLine": 322,
+ "endLine": 324,
+ "parentPath": "packages/@tailwindcss-upgrade/src/codemods/css/migrate.ts"
+ },
+ "2fa5cfc9-3058-4669-985f-04ba57133aed": {
+ "path": "2fa5cfc9-3058-4669-985f-04ba57133aed",
+ "cellName": "Class Candidate\nto Codemod\nPipeline",
+ "cellId": "2fa5cfc9-3058-4669-985f-04ba57133aed",
+ "visible": true,
+ "parentCellId": "6e3f56ab-6733-408c-a555-a1d334cd6114"
+ },
+ "generated-edge-simstep-ce221095-bbe2-44b5-b6f1-81af161e0f8f-2fa5cfc9-3058-4669-985f-04ba57133aed": {
+ "path": "generated-edge-simstep-ce221095-bbe2-44b5-b6f1-81af161e0f8f-2fa5cfc9-3058-4669-985f-04ba57133aed",
+ "fileName": "migrate.ts",
+ "cellName": "Class Candidate to Codemod Pipeline",
+ "cellId": "2fa5cfc9-3058-4669-985f-04ba57133aed",
+ "visible": true,
+ "startLine": 114,
+ "endLine": 118,
+ "parentPath": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts"
+ },
+ "5a81e8f9-9927-44ca-be4a-a31d1e8b57df": {
+ "path": "5a81e8f9-9927-44ca-be4a-a31d1e8b57df",
+ "cellName": "Return Migrated\nClass String",
+ "cellId": "5a81e8f9-9927-44ca-be4a-a31d1e8b57df",
+ "visible": true,
+ "parentCellId": "6e3f56ab-6733-408c-a555-a1d334cd6114"
+ },
+ "generated-edge-simstep-af73a671-2ed1-46ce-bbcb-645845ba138d-5a81e8f9-9927-44ca-be4a-a31d1e8b57df": {
+ "path": "generated-edge-simstep-af73a671-2ed1-46ce-bbcb-645845ba138d-5a81e8f9-9927-44ca-be4a-a31d1e8b57df",
+ "fileName": "migrate.ts",
+ "cellName": "Return Migrated Class String",
+ "cellId": "5a81e8f9-9927-44ca-be4a-a31d1e8b57df",
+ "visible": true,
+ "startLine": 120,
+ "endLine": 120,
+ "parentPath": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts"
+ },
+ "05c27640-2884-4e43-ac57-c55263c8fd74": {
+ "path": "05c27640-2884-4e43-ac57-c55263c8fd74",
+ "cellName": "Project Path\nto PostCSS\nConfig Migrator",
+ "cellId": "05c27640-2884-4e43-ac57-c55263c8fd74",
+ "visible": true,
+ "parentCellId": "f67b4f04-8c97-4b42-b087-d308c12af7ab"
+ },
+ "generated-edge-simstep-21a42a18-b8ba-4517-bc5a-d06d98f29238-05c27640-2884-4e43-ac57-c55263c8fd74": {
+ "path": "generated-edge-simstep-21a42a18-b8ba-4517-bc5a-d06d98f29238-05c27640-2884-4e43-ac57-c55263c8fd74",
+ "fileName": "migrate.ts",
+ "cellName": "Project Path to PostCSS Config Migrator",
+ "cellId": "05c27640-2884-4e43-ac57-c55263c8fd74",
+ "visible": true,
+ "startLine": 347,
+ "endLine": 347,
+ "parentPath": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts"
+ },
+ "a8b162d6-7069-4dc9-ba56-58204ecbde74": {
+ "path": "a8b162d6-7069-4dc9-ba56-58204ecbde74",
+ "cellName": "design-system.ts",
+ "cellId": "a8b162d6-7069-4dc9-ba56-58204ecbde74",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "870260c4-12e9-42a3-beee-8b68c09815cb": {
+ "path": "870260c4-12e9-42a3-beee-8b68c09815cb",
+ "cellName": "intellisense.ts",
+ "cellId": "870260c4-12e9-42a3-beee-8b68c09815cb",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "2bc2b4b6-60cb-4b51-b8ea-e5df9c051b52": {
+ "path": "2bc2b4b6-60cb-4b51-b8ea-e5df9c051b52",
+ "cellName": "intellisense.test.ts",
+ "cellId": "2bc2b4b6-60cb-4b51-b8ea-e5df9c051b52",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "d96ab9b6-3140-4a06-a5d3-d7b0a8f4470c": {
+ "path": "d96ab9b6-3140-4a06-a5d3-d7b0a8f4470c",
+ "cellName": "Get Class List: Initialize Design System - design-system.ts:L56",
+ "cellId": "d96ab9b6-3140-4a06-a5d3-d7b0a8f4470c",
+ "visible": true,
+ "parentCellId": "a8b162d6-7069-4dc9-ba56-58204ecbde74"
+ },
+ "packages/tailwindcss/src/design-system.ts-simstep-b76339cb-6f5e-4223-b3b2-3d113c2f6884": {
+ "path": "packages/tailwindcss/src/design-system.ts-simstep-b76339cb-6f5e-4223-b3b2-3d113c2f6884",
+ "fileName": "design-system.ts",
+ "wiki": "The process begins by calling `buildDesignSystem` with a `Theme` object. This function constructs and returns a `DesignSystem` instance, which encapsulates the entire resolved configuration, including utilities, variants, and theme values, and serves as the primary API for IntelliSense features.",
+ "cellName": "Get Class List: Initialize Design System - design-system.ts:L56",
+ "cellId": "d96ab9b6-3140-4a06-a5d3-d7b0a8f4470c",
+ "visible": true,
+ "startLine": 56,
+ "endLine": 56,
+ "parentCellId": "a8b162d6-7069-4dc9-ba56-58204ecbde74",
+ "parentPath": "packages/tailwindcss/src/design-system.ts"
+ },
+ "09fa041e-40a1-4e54-b6ad-88f06850b4a2": {
+ "path": "09fa041e-40a1-4e54-b6ad-88f06850b4a2",
+ "cellName": "Get Class List: Request Class List - design-system.ts:L130-132",
+ "cellId": "09fa041e-40a1-4e54-b6ad-88f06850b4a2",
+ "visible": true,
+ "parentCellId": "a8b162d6-7069-4dc9-ba56-58204ecbde74"
+ },
+ "packages/tailwindcss/src/design-system.ts-simstep-f61b8e3a-0145-4b35-8b3f-a2a46ed8c241": {
+ "path": "packages/tailwindcss/src/design-system.ts-simstep-f61b8e3a-0145-4b35-8b3f-a2a46ed8c241",
+ "fileName": "design-system.ts",
+ "wiki": "The IntelliSense consumer calls the `design.getClassList()` method on the `DesignSystem` instance to retrieve all available utility classes for autocompletion.",
+ "cellName": "Get Class List: Request Class List - design-system.ts:L130-132",
+ "cellId": "09fa041e-40a1-4e54-b6ad-88f06850b4a2",
+ "visible": true,
+ "startLine": 130,
+ "endLine": 132,
+ "parentCellId": "a8b162d6-7069-4dc9-ba56-58204ecbde74",
+ "parentPath": "packages/tailwindcss/src/design-system.ts"
+ },
+ "bb7691b3-06be-4eab-a225-b07cd75d8f09": {
+ "path": "bb7691b3-06be-4eab-a225-b07cd75d8f09",
+ "cellName": "Get Class List: Generate Class List - intellisense.ts:L21",
+ "cellId": "bb7691b3-06be-4eab-a225-b07cd75d8f09",
+ "visible": true,
+ "parentCellId": "870260c4-12e9-42a3-beee-8b68c09815cb"
+ },
+ "packages/tailwindcss/src/intellisense.ts-simstep-e1e4b09a-cf43-4cbf-8b71-21be9b586242": {
+ "path": "packages/tailwindcss/src/intellisense.ts-simstep-e1e4b09a-cf43-4cbf-8b71-21be9b586242",
+ "fileName": "intellisense.ts",
+ "wiki": "The `getClassList` function in `intellisense.ts` iterates through all registered core and plugin utilities within the `DesignSystem`. It collects each class name and its associated metadata, such as available modifiers for opacity or other values, to build a comprehensive list.",
+ "cellName": "Get Class List: Generate Class List - intellisense.ts:L21",
+ "cellId": "bb7691b3-06be-4eab-a225-b07cd75d8f09",
+ "visible": true,
+ "startLine": 21,
+ "endLine": 21,
+ "parentCellId": "870260c4-12e9-42a3-beee-8b68c09815cb",
+ "parentPath": "packages/tailwindcss/src/intellisense.ts"
+ },
+ "ab2c3196-f75b-429c-b3e9-4f7434fa3980": {
+ "path": "ab2c3196-f75b-429c-b3e9-4f7434fa3980",
+ "cellName": "Get Class List: Consume Class List - intellisense.test.ts:L32-37",
+ "cellId": "ab2c3196-f75b-429c-b3e9-4f7434fa3980",
+ "visible": true,
+ "parentCellId": "2bc2b4b6-60cb-4b51-b8ea-e5df9c051b52"
+ },
+ "packages/tailwindcss/src/intellisense.test.ts-simstep-641ad633-7a5c-4b15-9c46-2bf634c3f800": {
+ "path": "packages/tailwindcss/src/intellisense.test.ts-simstep-641ad633-7a5c-4b15-9c46-2bf634c3f800",
+ "fileName": "intellisense.test.ts",
+ "wiki": "The editor extension (e.g., VS Code IntelliSense) receives the final list of classes and uses this data to populate autocompletion suggestions, provide hover information, and perform linting in the user's code.",
+ "cellName": "Get Class List: Consume Class List - intellisense.test.ts:L32-37",
+ "cellId": "ab2c3196-f75b-429c-b3e9-4f7434fa3980",
+ "visible": true,
+ "startLine": 32,
+ "endLine": 37,
+ "parentCellId": "2bc2b4b6-60cb-4b51-b8ea-e5df9c051b52",
+ "parentPath": "packages/tailwindcss/src/intellisense.test.ts"
+ },
+ "b4e1385a-7ae4-44cf-94cd-9acffd6e7062": {
+ "path": "b4e1385a-7ae4-44cf-94cd-9acffd6e7062",
+ "cellName": "Get Variants: Initialize Design System - design-system.ts:L56",
+ "cellId": "b4e1385a-7ae4-44cf-94cd-9acffd6e7062",
+ "visible": true,
+ "parentCellId": "a8b162d6-7069-4dc9-ba56-58204ecbde74"
+ },
+ "packages/tailwindcss/src/design-system.ts-simstep-8c5cee0f-aec6-465f-9f4a-031dc540b2c6": {
+ "path": "packages/tailwindcss/src/design-system.ts-simstep-8c5cee0f-aec6-465f-9f4a-031dc540b2c6",
+ "fileName": "design-system.ts",
+ "wiki": "Similar to retrieving classes, the process for variants starts by calling `buildDesignSystem` to create a `DesignSystem` instance containing all resolved configuration.",
+ "cellName": "Get Variants: Initialize Design System - design-system.ts:L56",
+ "cellId": "b4e1385a-7ae4-44cf-94cd-9acffd6e7062",
+ "visible": true,
+ "startLine": 56,
+ "endLine": 56,
+ "parentCellId": "a8b162d6-7069-4dc9-ba56-58204ecbde74",
+ "parentPath": "packages/tailwindcss/src/design-system.ts"
+ },
+ "b6a85e2e-a180-42fe-b9d4-0a5427814c0d": {
+ "path": "b6a85e2e-a180-42fe-b9d4-0a5427814c0d",
+ "cellName": "Get Variants: Request Variants List - design-system.ts:L133-135",
+ "cellId": "b6a85e2e-a180-42fe-b9d4-0a5427814c0d",
+ "visible": true,
+ "parentCellId": "a8b162d6-7069-4dc9-ba56-58204ecbde74"
+ },
+ "packages/tailwindcss/src/design-system.ts-simstep-3f0e83f8-1c9d-4ae3-8d11-b05d77cc861b": {
+ "path": "packages/tailwindcss/src/design-system.ts-simstep-3f0e83f8-1c9d-4ae3-8d11-b05d77cc861b",
+ "fileName": "design-system.ts",
+ "wiki": "The IntelliSense consumer calls the `design.getVariants()` method to get a list of all supported variants like `hover:`, `focus:`, `md:`, and `group-hover:`.",
+ "cellName": "Get Variants: Request Variants List - design-system.ts:L133-135",
+ "cellId": "b6a85e2e-a180-42fe-b9d4-0a5427814c0d",
+ "visible": true,
+ "startLine": 133,
+ "endLine": 135,
+ "parentCellId": "a8b162d6-7069-4dc9-ba56-58204ecbde74",
+ "parentPath": "packages/tailwindcss/src/design-system.ts"
+ },
+ "3b6a349e-cbc3-4899-a066-a62ec62d4853": {
+ "path": "3b6a349e-cbc3-4899-a066-a62ec62d4853",
+ "cellName": "Get Variants: Generate Variant List - intellisense.ts:L152",
+ "cellId": "3b6a349e-cbc3-4899-a066-a62ec62d4853",
+ "visible": true,
+ "parentCellId": "870260c4-12e9-42a3-beee-8b68c09815cb"
+ },
+ "packages/tailwindcss/src/intellisense.ts-simstep-7d7867c1-64a1-42e4-badc-45932fe924a4": {
+ "path": "packages/tailwindcss/src/intellisense.ts-simstep-7d7867c1-64a1-42e4-badc-45932fe924a4",
+ "fileName": "intellisense.ts",
+ "wiki": "The `getVariants` function in `intellisense.ts` iterates through all registered variants in the `DesignSystem`'s variant map, building a structured list of their metadata.",
+ "cellName": "Get Variants: Generate Variant List - intellisense.ts:L152",
+ "cellId": "3b6a349e-cbc3-4899-a066-a62ec62d4853",
+ "visible": true,
+ "startLine": 152,
+ "endLine": 152,
+ "parentCellId": "870260c4-12e9-42a3-beee-8b68c09815cb",
+ "parentPath": "packages/tailwindcss/src/intellisense.ts"
+ },
+ "a007dd2c-297f-4137-9540-4fae52995497": {
+ "path": "a007dd2c-297f-4137-9540-4fae52995497",
+ "cellName": "Get Variants: Consume Variant List - intellisense.test.ts:L69-72",
+ "cellId": "a007dd2c-297f-4137-9540-4fae52995497",
+ "visible": true,
+ "parentCellId": "2bc2b4b6-60cb-4b51-b8ea-e5df9c051b52"
+ },
+ "packages/tailwindcss/src/intellisense.test.ts-simstep-b2a40d88-b7bb-46b8-98f1-2f3a4376318c": {
+ "path": "packages/tailwindcss/src/intellisense.test.ts-simstep-b2a40d88-b7bb-46b8-98f1-2f3a4376318c",
+ "fileName": "intellisense.test.ts",
+ "wiki": "The editor extension receives the list of variants and uses it to provide autocompletion for variant prefixes (e.g., suggesting `hover:` after a user types a class name) and for linting variant combinations.",
+ "cellName": "Get Variants: Consume Variant List - intellisense.test.ts:L69-72",
+ "cellId": "a007dd2c-297f-4137-9540-4fae52995497",
+ "visible": true,
+ "startLine": 69,
+ "endLine": 72,
+ "parentCellId": "2bc2b4b6-60cb-4b51-b8ea-e5df9c051b52",
+ "parentPath": "packages/tailwindcss/src/intellisense.test.ts"
+ },
+ "0eb329a2-2703-45ae-8263-5a899009b75e": {
+ "path": "0eb329a2-2703-45ae-8263-5a899009b75e",
+ "cellName": "Get Class\nList: Design\nSystem Created",
+ "cellId": "0eb329a2-2703-45ae-8263-5a899009b75e",
+ "visible": true,
+ "parentCellId": "a8b162d6-7069-4dc9-ba56-58204ecbde74"
+ },
+ "generated-edge-simstep-58cb367b-ecb0-414f-a5c9-15c90dd770b3-0eb329a2-2703-45ae-8263-5a899009b75e": {
+ "path": "generated-edge-simstep-58cb367b-ecb0-414f-a5c9-15c90dd770b3-0eb329a2-2703-45ae-8263-5a899009b75e",
+ "fileName": "design-system.ts",
+ "cellName": "Get Class List: Design System Created",
+ "cellId": "0eb329a2-2703-45ae-8263-5a899009b75e",
+ "visible": true,
+ "startLine": 56,
+ "endLine": 56,
+ "parentPath": "packages/tailwindcss/src/design-system.ts"
+ },
+ "d56ef92b-572f-4ee8-8d5f-ae2aa71f311f": {
+ "path": "d56ef92b-572f-4ee8-8d5f-ae2aa71f311f",
+ "cellName": "Get Class\nList: Forward\nto Implementation",
+ "cellId": "d56ef92b-572f-4ee8-8d5f-ae2aa71f311f",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "generated-edge-simstep-262fd025-90a6-4ea9-a30b-4f7bfbb0a8ea-d56ef92b-572f-4ee8-8d5f-ae2aa71f311f": {
+ "path": "generated-edge-simstep-262fd025-90a6-4ea9-a30b-4f7bfbb0a8ea-d56ef92b-572f-4ee8-8d5f-ae2aa71f311f",
+ "fileName": "design-system.ts",
+ "cellName": "Get Class List: Forward to Implementation",
+ "cellId": "d56ef92b-572f-4ee8-8d5f-ae2aa71f311f",
+ "visible": true,
+ "startLine": 131,
+ "endLine": 131,
+ "parentPath": "packages/tailwindcss/src/design-system.ts"
+ },
+ "49d51e6c-37b2-40b7-af90-1c8b16e7a2a5": {
+ "path": "49d51e6c-37b2-40b7-af90-1c8b16e7a2a5",
+ "cellName": "Get Class\nList: Transmit\nClass List",
+ "cellId": "49d51e6c-37b2-40b7-af90-1c8b16e7a2a5",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "generated-edge-simstep-f92f5909-1fc0-4dc1-8eb9-a7cdea91ba9a-49d51e6c-37b2-40b7-af90-1c8b16e7a2a5": {
+ "path": "generated-edge-simstep-f92f5909-1fc0-4dc1-8eb9-a7cdea91ba9a-49d51e6c-37b2-40b7-af90-1c8b16e7a2a5",
+ "fileName": "intellisense.ts",
+ "cellName": "Get Class List: Transmit Class List",
+ "cellId": "49d51e6c-37b2-40b7-af90-1c8b16e7a2a5",
+ "visible": true,
+ "startLine": 21,
+ "endLine": 21,
+ "parentPath": "packages/tailwindcss/src/intellisense.ts"
+ },
+ "c00960f4-a1d9-45c8-b9f0-00a132e14666": {
+ "path": "c00960f4-a1d9-45c8-b9f0-00a132e14666",
+ "cellName": "Get Variants:\nDesign System\nCreated",
+ "cellId": "c00960f4-a1d9-45c8-b9f0-00a132e14666",
+ "visible": true,
+ "parentCellId": "a8b162d6-7069-4dc9-ba56-58204ecbde74"
+ },
+ "generated-edge-simstep-07fd61bb-48c0-495c-a317-ea097b571bd5-c00960f4-a1d9-45c8-b9f0-00a132e14666": {
+ "path": "generated-edge-simstep-07fd61bb-48c0-495c-a317-ea097b571bd5-c00960f4-a1d9-45c8-b9f0-00a132e14666",
+ "fileName": "design-system.ts",
+ "cellName": "Get Variants: Design System Created",
+ "cellId": "c00960f4-a1d9-45c8-b9f0-00a132e14666",
+ "visible": true,
+ "startLine": 56,
+ "endLine": 56,
+ "parentPath": "packages/tailwindcss/src/design-system.ts"
+ },
+ "a8c537f9-aaa7-4de9-8a90-52e2c38d17e9": {
+ "path": "a8c537f9-aaa7-4de9-8a90-52e2c38d17e9",
+ "cellName": "Get Variants:\nForward to\nImplementation",
+ "cellId": "a8c537f9-aaa7-4de9-8a90-52e2c38d17e9",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "generated-edge-simstep-014acbff-7550-4529-aa39-03f009c7d771-a8c537f9-aaa7-4de9-8a90-52e2c38d17e9": {
+ "path": "generated-edge-simstep-014acbff-7550-4529-aa39-03f009c7d771-a8c537f9-aaa7-4de9-8a90-52e2c38d17e9",
+ "fileName": "design-system.ts",
+ "cellName": "Get Variants: Forward to Implementation",
+ "cellId": "a8c537f9-aaa7-4de9-8a90-52e2c38d17e9",
+ "visible": true,
+ "startLine": 134,
+ "endLine": 134,
+ "parentPath": "packages/tailwindcss/src/design-system.ts"
+ },
+ "88e49d7e-8559-4b7b-b848-92ea0254bac1": {
+ "path": "88e49d7e-8559-4b7b-b848-92ea0254bac1",
+ "cellName": "Get Variants:\nTransmit Variant\nList",
+ "cellId": "88e49d7e-8559-4b7b-b848-92ea0254bac1",
+ "visible": true,
+ "parentCellId": "1dd81203-e3d1-43c3-b060-0dcf2af49609"
+ },
+ "generated-edge-simstep-bb6050b3-1acb-45b7-a0b9-072d67a12dc5-88e49d7e-8559-4b7b-b848-92ea0254bac1": {
+ "path": "generated-edge-simstep-bb6050b3-1acb-45b7-a0b9-072d67a12dc5-88e49d7e-8559-4b7b-b848-92ea0254bac1",
+ "fileName": "intellisense.ts",
+ "cellName": "Get Variants: Transmit Variant List",
+ "cellId": "88e49d7e-8559-4b7b-b848-92ea0254bac1",
+ "visible": true,
+ "startLine": 152,
+ "endLine": 152,
+ "parentPath": "packages/tailwindcss/src/intellisense.ts"
+ }
+ },
+ "simulations": {
+ "Just-In-Time Compilation of CSS Utilities from Template Files": {
+ "name": "Just-In-Time Compilation of CSS Utilities from Template Files",
+ "simSteps": [
+ {
+ "simStepId": "070c05f0-e90a-4524-80b9-d646718c498b",
+ "diagramNodeId": "373f836b-c272-4cff-952b-31881d7bbe0d",
+ "simStepLabel": "Vite Plugin Triggered",
+ "simStepDescription": "Vite's build process discovers a CSS file (`index.css`) that is a potential Tailwind CSS entry point and calls the `transform` hook of the `@tailwindcss/vite` plugin. A `Root` instance is created to manage the compilation for this CSS file.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-vite/src/index.ts",
+ "startLine": "100",
+ "endLine": "102",
+ "relevantVariables": [
+ "transform"
+ ]
+ },
+ "inputDataExample": "{\"id\": \"/Users/dev/project/src/index.css\", \"src\": \"@tailwind utilities;\"}",
+ "outputDataExample": "{\"root\": {\"id\": \"/Users/dev/project/src/index.css\", \"base\": \"/Users/dev/project\"}}"
+ },
+ {
+ "simStepId": "4fd1f069-9598-4f24-b477-59c9df6ee696",
+ "diagramNodeId": "3b5a12d0-480e-4dd5-8fc6-16c807a68584",
+ "simStepLabel": "CSS Content Passed to Compiler",
+ "simStepDescription": "The CSS file content is passed from the Vite plugin to the core `@tailwindcss/node` compile function to begin parsing and setting up the compilation environment.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-vite/src/index.ts",
+ "startLine": "241",
+ "endLine": "248",
+ "relevantVariables": [
+ "compile"
+ ]
+ },
+ "inputDataExample": "{\"css\": \"@tailwind utilities;\\n@source './src/**/*.html';\", \"options\": {\"base\": \"/Users/dev/project\"}}",
+ "outputDataExample": "{\"css\": \"@tailwind utilities;\\n@source './src/**/*.html';\", \"options\": {\"base\": \"/Users/dev/project\"}}"
+ },
+ {
+ "simStepId": "86a5c51c-3902-4461-a34c-5ba93101aa5b",
+ "diagramNodeId": "2243483a-2947-4317-b128-96245ab9b8d2",
+ "simStepLabel": "Parse CSS & Build Design System",
+ "simStepDescription": "The core `compile` function parses the CSS, processes directives like `@theme` and `@source`, resolves any `@import` statements, and builds the 'Design System' (the internal representation of the theme and utilities). It also extracts the source file patterns for the scanner.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/index.ts",
+ "startLine": "837",
+ "endLine": "843",
+ "relevantVariables": [
+ "compile",
+ "parseCss"
+ ]
+ },
+ "inputDataExample": "{\"css\": \"@tailwind utilities;\\n@theme { --color-red-500: #ef4444; }\\n@source './src/**/*.html';\", \"options\": {\"base\": \"/Users/dev/project\"}}",
+ "outputDataExample": "{\"designSystem\": {\"theme\": {\"--color-red-500\": \"#ef4444\"}}, \"sources\": [{\"base\": \"/Users/dev/project\", \"pattern\": \"./src/**/*.html\", \"negated\": false}]}"
+ },
+ {
+ "simStepId": "921f8e69-5718-42dd-adec-453c0a22ed51",
+ "diagramNodeId": "73e5e4e3-e760-40af-b927-f92f8a10979c",
+ "simStepLabel": "Source Patterns to Scanner",
+ "simStepDescription": "The source file patterns (globs) discovered during compiler setup are passed to initialize the Rust-based file scanner, `@tailwindcss/oxide`.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-vite/src/index.ts",
+ "startLine": "273",
+ "endLine": "273",
+ "relevantVariables": [
+ "Scanner",
+ "sources"
+ ]
+ },
+ "inputDataExample": "{\"sources\": [{\"base\": \"/Users/dev/project\", \"pattern\": \"**/*\", \"negated\": false}, {\"base\": \"/Users/dev/project\", \"pattern\": \"./src/**/*.html\", \"negated\": false}]}",
+ "outputDataExample": "{\"sources\": [{\"base\": \"/Users/dev/project\", \"pattern\": \"**/*\", \"negated\": false}, {\"base\": \"/Users/dev/project\", \"pattern\": \"./src/**/*.html\", \"negated\": false}]}"
+ },
+ {
+ "simStepId": "eda16679-649a-455b-8094-c9fb4a3423c6",
+ "diagramNodeId": "c373f9ca-351d-4a67-af50-2570e9e52d92",
+ "simStepLabel": "Scanner Initialization (Rust/N-API)",
+ "simStepDescription": "The N-API bridge in `@tailwindcss/oxide` receives the source patterns and instantiates the `tailwindcss_oxide::Scanner` struct in Rust, preparing it for file system traversal.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "crates/node/src/lib.rs",
+ "startLine": "111",
+ "endLine": "119",
+ "relevantVariables": [
+ "Scanner::new"
+ ]
+ },
+ "inputDataExample": "{\"opts\": {\"sources\": [{\"base\": \"/Users/dev/project\", \"pattern\": \"./src/**/*.html\", \"negated\": false}]}}",
+ "outputDataExample": "{\"scanner\": \"Instance of tailwindcss_oxide::Scanner\"}"
+ },
+ {
+ "simStepId": "31568cde-0ab0-463d-819f-b5896e0fc7e1",
+ "diagramNodeId": "a7739e5a-ccee-4948-90c4-c0cf2c018953",
+ "simStepLabel": "Scan Command Invoked",
+ "simStepDescription": "The JavaScript code calls the `scan()` method on the Scanner instance, triggering the file system walk and content extraction processes within the Rust engine.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-vite/src/index.ts",
+ "startLine": "299",
+ "endLine": "301",
+ "relevantVariables": [
+ "this.scanner.scan"
+ ]
+ },
+ "inputDataExample": "{}",
+ "outputDataExample": "{}"
+ },
+ {
+ "simStepId": "50225845-94e9-487b-90e5-f3342bacb723",
+ "diagramNodeId": "355b0995-e0fe-4ea0-bae3-b033754c4a1a",
+ "simStepLabel": "Walking the File System",
+ "simStepDescription": "The Rust scanner uses the `ignore` crate's `WalkBuilder` to recursively find all files matching the source patterns. It respects `.gitignore` rules and custom ignore patterns to create an accurate list of files to process.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "crates/oxide/src/scanner/mod.rs",
+ "startLine": "644",
+ "endLine": "646",
+ "relevantVariables": [
+ "create_walker",
+ "WalkBuilder"
+ ]
+ },
+ "inputDataExample": "{\"roots\": [\"/Users/dev/project\"], \"source_patterns\": [\"./src/**/*.html\"], \"ignore_rules\": [\".git/\", \"node_modules/\"]}",
+ "outputDataExample": "{\"filesToScan\": [\"/Users/dev/project/src/index.html\", \"/Users/dev/project/src/components/button.html\"]}"
+ },
+ {
+ "simStepId": "56f1281c-75cc-4ac1-95a2-c070478b7ae1",
+ "diagramNodeId": "2d460f8a-13b6-412e-b653-df6cc79aa069",
+ "simStepLabel": "File Content Passed to Extractor",
+ "simStepDescription": "For each file found during the walk, its content is read from disk and passed to the candidate extractor for parsing.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "crates/oxide/src/scanner/mod.rs",
+ "startLine": "194",
+ "endLine": "195",
+ "relevantVariables": [
+ "self.fs.read",
+ "content"
+ ]
+ },
+ "inputDataExample": "{\"filePath\": \"/Users/dev/project/src/index.html\", \"content\": \"Hello
\"}",
+ "outputDataExample": "{\"filePath\": \"/Users/dev/project/src/index.html\", \"content\": \"Hello
\"}"
+ },
+ {
+ "simStepId": "03b0fc2f-dfc1-4f49-b8af-c4a1d3c49f65",
+ "diagramNodeId": "e6e37d78-d762-46b6-bbf0-b9e7a989a08f",
+ "simStepLabel": "Extracting Candidates from Content",
+ "simStepDescription": "The Rust `Extractor` uses a state machine to process the file content byte by byte, identifying sequences that are potential Tailwind CSS utility classes. This process is highly optimized for speed and handles various contexts like strings, comments, and different template syntaxes.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "crates/oxide/src/scanner/mod.rs",
+ "startLine": "197",
+ "endLine": "197",
+ "relevantVariables": [
+ "self.extractor.extract_from_slice"
+ ]
+ },
+ "inputDataExample": "{\"content\": \"Hello
\", \"extension\": \"html\"}",
+ "outputDataExample": "{\"candidates\": [\"bg-red-500\", \"md:w-1/2\"]}"
+ },
+ {
+ "simStepId": "845cc912-18ef-4747-9db9-0a25b1573c1f",
+ "diagramNodeId": "13664c11-6236-4d78-8ccc-52e321e27492",
+ "simStepLabel": "Candidates Returned to JavaScript",
+ "simStepDescription": "The aggregated and unique set of candidate strings is returned from the Rust scanner back to the JavaScript environment via the N-API bridge.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "crates/node/src/lib.rs",
+ "startLine": "121",
+ "endLine": "123",
+ "relevantVariables": [
+ "Scanner::scan"
+ ]
+ },
+ "inputDataExample": "{\"candidates\": [\"bg-red-500\", \"md:w-1/2\", \"underline\", \"flex\"]}",
+ "outputDataExample": "{\"candidates\": [\"bg-red-500\", \"md:w-1/2\", \"underline\", \"flex\"]}"
+ },
+ {
+ "simStepId": "0919e474-6ea8-4106-81e5-6bed6d2cc022",
+ "diagramNodeId": "72766964-f322-4bb1-b8f2-96c8db4a2fe7",
+ "simStepLabel": "Compiling Candidates to CSS AST",
+ "simStepDescription": "The Vite plugin calls `compiler.build(candidates)`. This triggers the core JavaScript compilation logic, which parses each candidate, looks up the corresponding utility in the design system, applies variants, and generates an abstract syntax tree (AST) of CSS rules.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compile.ts",
+ "startLine": "16",
+ "endLine": "23",
+ "relevantVariables": [
+ "compileCandidates"
+ ]
+ },
+ "inputDataExample": "{\"rawCandidates\": [\"bg-red-500\", \"md:w-1/2\"]}",
+ "outputDataExample": "{\"astNodes\": [{\"type\": \"style-rule\", \"selector\": \".bg-red-500\", \"nodes\":[...]}, {\"type\": \"at-rule\", \"name\": \"media\", \"params\": \"(width >= 768px)\", \"nodes\":[...]}]}"
+ },
+ {
+ "simStepId": "40ba90e1-bf86-44ed-90a7-909c74c31968",
+ "diagramNodeId": "21958e82-9c3c-4cf0-b2da-769f72bdc2be",
+ "simStepLabel": "CSS AST to Stringifier",
+ "simStepDescription": "The generated and sorted CSS AST is passed to the final rendering step to be converted into a CSS string.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/index.ts",
+ "startLine": "851",
+ "endLine": "866",
+ "relevantVariables": [
+ "build",
+ "toCss"
+ ]
+ },
+ "inputDataExample": "{\"ast\": [{\"type\": \"style-rule\", \"selector\": \".bg-red-500\", \"nodes\": [{\"type\": \"decl\", \"prop\": \"background-color\", \"value\": \"#ef4444\"}]}]}",
+ "outputDataExample": "{\"ast\": [{\"type\": \"style-rule\", \"selector\": \".bg-red-500\", \"nodes\": [{\"type\": \"decl\", \"prop\": \"background-color\", \"value\": \"#ef4444\"}]}]}"
+ },
+ {
+ "simStepId": "ff576a5f-0492-417d-8d25-6fd864a80989",
+ "diagramNodeId": "3e96bd1c-d473-4381-80c3-eca8f05896ce",
+ "simStepLabel": "Generating Final CSS String",
+ "simStepDescription": "The `build()` method takes the generated AST, optimizes it by merging adjacent rules where possible, and converts the entire tree into a final CSS string, complete with source maps if enabled.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/index.ts",
+ "startLine": "860",
+ "endLine": "860",
+ "relevantVariables": [
+ "toCss"
+ ]
+ },
+ "inputDataExample": "{\"ast\": [{\"type\": \"style-rule\", \"selector\": \".bg-red-500\", \"nodes\":[...]}, {\"type\": \"at-rule\", \"name\": \"media\", \"params\": \"(width >= 768px)\", \"nodes\":[...]}]}",
+ "outputDataExample": "{\"css\": \".bg-red-500 { background-color: #ef4444 } @media (width >= 768px) { .md\\\\:w-1\\\\/2 { width: 50% } }\"}"
+ },
+ {
+ "simStepId": "276bcabc-ad09-4160-a3ac-8fa73f844387",
+ "diagramNodeId": "0ffc7c9e-b11c-4332-b31c-312b410547d8",
+ "simStepLabel": "Final CSS Returned to Build Tool",
+ "simStepDescription": "The final compiled CSS string is returned from the Tailwind plugin's `transform` hook back to the build tool (Vite).",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-vite/src/index.ts",
+ "startLine": "116",
+ "endLine": "119",
+ "relevantVariables": [
+ "root.generate",
+ "result"
+ ]
+ },
+ "inputDataExample": "{\"code\": \".bg-red-500 { background-color: #ef4444; } ...\"}",
+ "outputDataExample": "{\"code\": \".bg-red-500 { background-color: #ef4444; } ...\"}"
+ },
+ {
+ "simStepId": "0f0bf488-9de2-4511-9ea7-0db1864eb44c",
+ "diagramNodeId": "e3e6f752-4c4f-411a-905f-61a8953bdfb4",
+ "simStepLabel": "Build Tool Finalizes Output",
+ "simStepDescription": "The build tool (Vite) receives the transformed CSS. It performs its final steps, such as minification and bundling with other CSS files, before writing the final asset to the output directory or serving it in development mode.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-vite/src/index.ts",
+ "startLine": "123",
+ "endLine": "130",
+ "relevantVariables": [
+ "optimize",
+ "minify"
+ ]
+ },
+ "inputDataExample": "{\"code\": \".bg-red-500 { background-color: #ef4444; } ...\"}",
+ "outputDataExample": "{\"file\": \"dist/assets/index.css\", \"content\": \".bg-red-500{background-color:#ef4444}@media (min-width:768px){.md\\\\:w-1\\\\/2{width:50%}}\"}"
+ }
+ ],
+ "description": "- This is the core feature of Tailwind CSS, providing immense business value by optimizing performance and developer experience
- - It scans source files (HTML, JS, JSX, etc
- ) to discover which utility classes are being used
- - On-demand, it generates only the necessary CSS, resulting in highly optimized, small production builds
- - In development, a watch mode provides near-instant feedback by recompiling only what's needed as files change
- - This process is powered by a high-performance Rust-based engine for scanning and class extraction
",
+ "simulationNodesAndEdges": {
+ "373f836b-c272-4cff-952b-31881d7bbe0d": {
+ "simStepIds": [
+ "070c05f0-e90a-4524-80b9-d646718c498b"
+ ]
+ },
+ "2243483a-2947-4317-b128-96245ab9b8d2": {
+ "simStepIds": [
+ "86a5c51c-3902-4461-a34c-5ba93101aa5b"
+ ]
+ },
+ "c373f9ca-351d-4a67-af50-2570e9e52d92": {
+ "simStepIds": [
+ "eda16679-649a-455b-8094-c9fb4a3423c6"
+ ]
+ },
+ "355b0995-e0fe-4ea0-bae3-b033754c4a1a": {
+ "simStepIds": [
+ "50225845-94e9-487b-90e5-f3342bacb723"
+ ]
+ },
+ "e6e37d78-d762-46b6-bbf0-b9e7a989a08f": {
+ "simStepIds": [
+ "03b0fc2f-dfc1-4f49-b8af-c4a1d3c49f65"
+ ]
+ },
+ "72766964-f322-4bb1-b8f2-96c8db4a2fe7": {
+ "simStepIds": [
+ "0919e474-6ea8-4106-81e5-6bed6d2cc022"
+ ]
+ },
+ "3e96bd1c-d473-4381-80c3-eca8f05896ce": {
+ "simStepIds": [
+ "ff576a5f-0492-417d-8d25-6fd864a80989"
+ ]
+ },
+ "e3e6f752-4c4f-411a-905f-61a8953bdfb4": {
+ "simStepIds": [
+ "0f0bf488-9de2-4511-9ea7-0db1864eb44c"
+ ]
+ },
+ "3b5a12d0-480e-4dd5-8fc6-16c807a68584": {
+ "simStepIds": [
+ "4fd1f069-9598-4f24-b477-59c9df6ee696"
+ ]
+ },
+ "73e5e4e3-e760-40af-b927-f92f8a10979c": {
+ "simStepIds": [
+ "921f8e69-5718-42dd-adec-453c0a22ed51"
+ ]
+ },
+ "a7739e5a-ccee-4948-90c4-c0cf2c018953": {
+ "simStepIds": [
+ "31568cde-0ab0-463d-819f-b5896e0fc7e1"
+ ]
+ },
+ "2d460f8a-13b6-412e-b653-df6cc79aa069": {
+ "simStepIds": [
+ "56f1281c-75cc-4ac1-95a2-c070478b7ae1"
+ ]
+ },
+ "13664c11-6236-4d78-8ccc-52e321e27492": {
+ "simStepIds": [
+ "845cc912-18ef-4747-9db9-0a25b1573c1f"
+ ]
+ },
+ "21958e82-9c3c-4cf0-b2da-769f72bdc2be": {
+ "simStepIds": [
+ "40ba90e1-bf86-44ed-90a7-909c74c31968"
+ ]
+ },
+ "0ffc7c9e-b11c-4332-b31c-312b410547d8": {
+ "simStepIds": [
+ "276bcabc-ad09-4160-a3ac-8fa73f844387"
+ ]
+ }
+ },
+ "isAIGenerated": true,
+ "keywords": "Scanner, compile, build",
+ "generationPrompt": "Just-In-Time Compilation of CSS Utilities from Template Files",
+ "generationKeywords": "Scanner, compile, build"
+ },
+ "Customizing the Design System via Configuration": {
+ "name": "Customizing the Design System via Configuration",
+ "simSteps": [
+ {
+ "simStepId": "f3bd330a-032f-4154-be70-0b6b7f43feda",
+ "diagramNodeId": "d496aee2-d3ca-45fe-9014-347b0c49d664",
+ "simStepLabel": "Parse CSS and Process `@theme` Rules",
+ "simStepDescription": "The build process begins by parsing the input CSS. When an `@theme` at-rule is found, the engine extracts all the CSS custom properties and `@keyframes` defined within it. These values are the first layer of customization.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/index.ts",
+ "startLine": "538",
+ "endLine": "592",
+ "relevantVariables": [
+ "parseCss",
+ "node",
+ "theme",
+ "parseThemeOptions",
+ "theme.add",
+ "theme.addKeyframes"
+ ]
+ },
+ "inputDataExample": "{\"cssContent\": \"@theme { --color-brand-blue: #007bff; --spacing-22: 5.5rem; } @tailwind utilities;\"}",
+ "outputDataExample": "{\"parsedThemeValues\": {\"--color-brand-blue\": {\"value\": \"#007bff\", \"options\": 0}, \"--spacing-22\": {\"value\": \"5.5rem\", \"options\": 0}}}"
+ },
+ {
+ "simStepId": "9b8e2e68-fb14-4434-a07d-4b7526a7df5d",
+ "diagramNodeId": "c84cfc48-369e-4d1d-846c-9487f3d46057",
+ "simStepLabel": "Populate Theme Object from CSS",
+ "simStepDescription": "The custom properties parsed from the `@theme` blocks are added to the central `Theme` object. This object begins to form the design system's source of truth for all styling values.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/index.ts",
+ "startLine": "569",
+ "endLine": "569",
+ "relevantVariables": [
+ "theme.add"
+ ]
+ },
+ "inputDataExample": "{\"property\": \"--color-brand-blue\", \"value\": \"#007bff\", \"options\": 0}",
+ "outputDataExample": "{\"property\": \"--color-brand-blue\", \"value\": \"#007bff\", \"options\": 0}"
+ },
+ {
+ "simStepId": "adb9b981-59c4-48ba-9903-8ff051d2479b",
+ "diagramNodeId": "77b16a01-56a2-44cb-8df3-db2c02adceb7",
+ "simStepLabel": "Resolve JavaScript Configuration",
+ "simStepDescription": "The engine loads the `tailwind.config.js` file, along with any specified presets. It recursively merges the `theme` and `theme.extend` objects from these sources to create a single, fully resolved configuration object.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compat/config/resolve-config.ts",
+ "startLine": "42",
+ "endLine": "50",
+ "relevantVariables": [
+ "resolveConfig",
+ "files",
+ "design"
+ ]
+ },
+ "inputDataExample": "{\"userConfig\": {\"theme\": {\"extend\": {\"colors\": {\"brand-red\": \"#dc3545\"}, \"spacing\": {\"21\": \"5.25rem\"}}}}, \"tailwindDefaultConfig\": {\"theme\": {\"colors\": {\"red\": {\"500\": \"#ef4444\"}}, \"spacing\": {\"1\": \"0.25rem\"}}}}",
+ "outputDataExample": "{\"resolvedConfig\": {\"theme\": {\"colors\": {\"red\": {\"500\": \"#ef4444\"}, \"brand-red\": \"#dc3545\"}, \"spacing\": {\"1\": \"0.25rem\", \"21\": \"5.25rem\"}}}}"
+ },
+ {
+ "simStepId": "46783681-b8f0-40a3-963e-f7c3f266dd6c",
+ "diagramNodeId": "1ef2725f-414c-4956-81cf-d83cc7b4fa5d",
+ "simStepLabel": "Transfer Resolved JS Config",
+ "simStepDescription": "The fully resolved configuration object is passed to the next stage, where its values will be translated into CSS custom properties and merged into the main Theme object.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compat/apply-compat-hooks.ts",
+ "startLine": "280",
+ "endLine": "281",
+ "relevantVariables": [
+ "resolveConfig",
+ "applyConfigToTheme",
+ "resolvedUserConfig"
+ ]
+ },
+ "inputDataExample": "{\"resolvedConfig\": {\"theme\": {\"colors\": {\"red\": {\"500\": \"#ef4444\"}, \"brand-red\": \"#dc3545\"}, \"spacing\": {\"1\": \"0.25rem\", \"21\": \"5.25rem\"}}}}",
+ "outputDataExample": "{\"resolvedConfig\": {\"theme\": {\"colors\": {\"red\": {\"500\": \"#ef4444\"}, \"brand-red\": \"#dc3545\"}, \"spacing\": {\"1\": \"0.25rem\", \"21\": \"5.25rem\"}}}}"
+ },
+ {
+ "simStepId": "4444211c-72da-4515-a507-e555b0954069",
+ "diagramNodeId": "8dd53534-ac78-4604-b647-35a223654911",
+ "simStepLabel": "Apply JS Config to Theme and Merge",
+ "simStepDescription": "The system iterates over the resolved JS config. It converts JavaScript-style theme keys (e.g., `colors.brand-red`) into CSS custom property names (e.g., `--color-brand-red`) and adds them to the same `Theme` object. During this step, precedence rules are enforced: values from a standard `@theme` rule override values from the JS config, which in turn override values from `@theme default`.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compat/apply-config-to-theme.ts",
+ "startLine": "33",
+ "endLine": "119",
+ "relevantVariables": [
+ "applyConfigToTheme",
+ "keyPathToCssProperty",
+ "theme.add"
+ ]
+ },
+ "inputDataExample": "{\"resolvedConfig\": {\"theme\": {\"colors\": {\"brand-red\": \"#dc3545\"}, \"spacing\": {\"21\": \"5.25rem\"}}}}",
+ "outputDataExample": "{\"finalThemeState\": {\"--color-brand-blue\": {\"value\": \"#007bff\", \"options\": 0}, \"--color-brand-red\": {\"value\": \"#dc3545\", \"options\": 2}}}"
+ },
+ {
+ "simStepId": "65b152f0-aff8-4975-996b-d046e44265d9",
+ "diagramNodeId": "3b7ab692-5d29-4cb8-8ed7-84bef3f5886f",
+ "simStepLabel": "Finalized Theme for Generation",
+ "simStepDescription": "The final, merged `Theme` object, containing values from all sources (`@theme`, JS config, defaults), is now ready within the `DesignSystem` instance. This finalized theme is used for generating all CSS utilities.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/index.ts",
+ "startLine": "777",
+ "endLine": "777",
+ "relevantVariables": [
+ "compileCandidates",
+ "designSystem"
+ ]
+ },
+ "inputDataExample": "{\"designSystem\": {\"theme\": {\"values\": [[\"--color-brand-blue\", \"#007bff\"], [\"--spacing-22\", \"5.5rem\"], [\"--color-brand-red\", \"#dc3545\"]]}}}",
+ "outputDataExample": "{\"designSystem\": {\"theme\": {\"values\": [[\"--color-brand-blue\", \"#007bff\"], [\"--spacing-22\", \"5.5rem\"], [\"--color-brand-red\", \"#dc3545\"]]}}}"
+ },
+ {
+ "simStepId": "f289837c-4a0a-4f3e-897d-84aa2e21fd3e",
+ "diagramNodeId": "b0c1e709-112b-4444-8a6c-4ff5f6c2fe12",
+ "simStepLabel": "Generate CSS Utilities",
+ "simStepDescription": "Using the fully configured `DesignSystem`, the engine processes utility classes found in your content files (e.g., `bg-brand-blue`, `m-22`). It looks up the corresponding theme value for each class and generates the final CSS rules.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compile.ts",
+ "startLine": "20",
+ "endLine": "213",
+ "relevantVariables": [
+ "compileCandidates",
+ "designSystem",
+ "astNodes"
+ ]
+ },
+ "inputDataExample": "{\"candidates\": [\"bg-brand-blue\", \"m-22\", \"text-brand-red\"], \"designSystem\": \"{...}\"}",
+ "outputDataExample": "{\"generatedCss\": \".bg-brand-blue { background-color: #007bff; }\\n.m-22 { margin: 5.5rem; }\\n.text-brand-red { color: #dc3545; }\"}"
+ }
+ ],
+ "description": "- Tailwind's adaptability is a primary driver of its adoption, allowing teams to build UIs that conform to their unique brand and design system
- - Users can customize every aspect of the design system, including colors, spacing, fonts, and breakpoints
- - Customization is primarily done through a
tailwind - config
- js file, which allows for extending or completely overriding the default theme
- - The framework also supports defining theme values directly within CSS using the
@theme at-rule, offering flexibility for different project setups
",
+ "simulationNodesAndEdges": {
+ "d496aee2-d3ca-45fe-9014-347b0c49d664": {
+ "simStepIds": [
+ "f3bd330a-032f-4154-be70-0b6b7f43feda"
+ ]
+ },
+ "77b16a01-56a2-44cb-8df3-db2c02adceb7": {
+ "simStepIds": [
+ "adb9b981-59c4-48ba-9903-8ff051d2479b"
+ ]
+ },
+ "8dd53534-ac78-4604-b647-35a223654911": {
+ "simStepIds": [
+ "4444211c-72da-4515-a507-e555b0954069"
+ ]
+ },
+ "b0c1e709-112b-4444-8a6c-4ff5f6c2fe12": {
+ "simStepIds": [
+ "f289837c-4a0a-4f3e-897d-84aa2e21fd3e"
+ ]
+ },
+ "c84cfc48-369e-4d1d-846c-9487f3d46057": {
+ "simStepIds": [
+ "9b8e2e68-fb14-4434-a07d-4b7526a7df5d"
+ ]
+ },
+ "1ef2725f-414c-4956-81cf-d83cc7b4fa5d": {
+ "simStepIds": [
+ "46783681-b8f0-40a3-963e-f7c3f266dd6c"
+ ]
+ },
+ "3b7ab692-5d29-4cb8-8ed7-84bef3f5886f": {
+ "simStepIds": [
+ "65b152f0-aff8-4975-996b-d046e44265d9"
+ ]
+ }
+ },
+ "isAIGenerated": true,
+ "keywords": "resolveConfig, @theme, design-system",
+ "generationPrompt": "Customizing the Design System via Configuration",
+ "generationKeywords": "resolveConfig, @theme, design-system"
+ },
+ "Applying Styles Conditionally with Responsive and State Variants": {
+ "name": "Applying Styles Conditionally with Responsive and State Variants",
+ "simSteps": [
+ {
+ "simStepId": "eaa78521-2d8b-4bff-ade7-099ab10fb0dd",
+ "diagramNodeId": "9819606a-f6b6-4001-aacf-1127d3666915",
+ "simStepLabel": "Flow: Variant Application - Initial Compilation",
+ "simStepDescription": "The Tailwind CSS engine starts the compilation process by receiving a set of raw class strings extracted from source files. This example will trace the class `md:hover:underline`.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compile.ts",
+ "startLine": "23",
+ "endLine": "27",
+ "relevantVariables": [
+ "compileCandidates"
+ ]
+ },
+ "inputDataExample": "{\"rawCandidates\": [\"md:hover:underline\", \"flex\", \"p-4\"]}",
+ "outputDataExample": "{\"astNodes\": [/* List of generated CSS AST nodes */], \"css\": \".md\\\\:hover\\\\:underline:hover { ... }\"}"
+ },
+ {
+ "simStepId": "673ad478-e89b-4d0c-836e-3b4aad72b2d7",
+ "diagramNodeId": "08bb973f-591d-4502-9fca-68d1a097fb08",
+ "simStepLabel": "Data Flow: Pass Candidate String for Parsing",
+ "simStepDescription": "The raw string `md:hover:underline` is passed from the compiler to the candidate parser to be deconstructed into its constituent parts (variants and the base utility).",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compile.ts",
+ "startLine": "32",
+ "endLine": "32",
+ "relevantVariables": [
+ "rawCandidate"
+ ]
+ },
+ "inputDataExample": "{\"rawCandidate\": \"md:hover:underline\"}",
+ "outputDataExample": "{\"rawCandidate\": \"md:hover:underline\"}"
+ },
+ {
+ "simStepId": "82d5255c-7c07-47a4-8df5-70710261d128",
+ "diagramNodeId": "cb0109bf-3e83-44de-9f04-4d995ca3b47f",
+ "simStepLabel": "Node: Parse Candidate String",
+ "simStepDescription": "The `parseCandidate` function deconstructs the class string. It splits the string by the separator `:` into variants (`md`, `hover`) and a base utility (`underline`). It internally calls `parseVariant` for each variant part to create a structured `Candidate` object.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/candidate.ts",
+ "startLine": "222",
+ "endLine": "225",
+ "relevantVariables": [
+ "parseCandidate",
+ "rawVariants",
+ "segment"
+ ]
+ },
+ "inputDataExample": "{\"input\": \"md:hover:underline\"}",
+ "outputDataExample": "{\"kind\":\"static\",\"root\":\"underline\",\"variants\":[{\"kind\":\"static\",\"root\":\"md\"},{\"kind\":\"static\",\"root\":\"hover\"}],\"important\":false,\"raw\":\"md:hover:underline\"}"
+ },
+ {
+ "simStepId": "a9ef6393-31b2-4559-a1cb-8c4d2f7078fa",
+ "diagramNodeId": "006b92f3-9cf3-4d28-8a5f-6a1916d9d43c",
+ "simStepLabel": "Data Flow: Pass Parsed Candidate for Rule Generation",
+ "simStepDescription": "The structured `Candidate` object, now containing the separated variants and the base utility, is passed back to the compiler to generate CSS rules.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compile.ts",
+ "startLine": "40",
+ "endLine": "40",
+ "relevantVariables": [
+ "candidate"
+ ]
+ },
+ "inputDataExample": "{\"kind\":\"static\",\"root\":\"underline\",\"variants\":[{\"kind\":\"static\",\"root\":\"md\"},{\"kind\":\"static\",\"root\":\"hover\"}],\"important\":false,\"raw\":\"md:hover:underline\"}",
+ "outputDataExample": "{\"kind\":\"static\",\"root\":\"underline\",\"variants\":[{\"kind\":\"static\",\"root\":\"md\"},{\"kind\":\"static\",\"root\":\"hover\"}],\"important\":false,\"raw\":\"md:hover:underline\"}"
+ },
+ {
+ "simStepId": "a122af75-88a8-4058-bc30-b8c4f39509fe",
+ "diagramNodeId": "7cbdc91e-47bc-4673-80f2-ecbac3f762c7",
+ "simStepLabel": "Node: Generate Base Utility Rule",
+ "simStepDescription": "The compiler looks up the base utility (`underline`) in the design system's utility collection and generates the base Abstract Syntax Tree (AST) for its CSS rule.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compile.ts",
+ "startLine": "146",
+ "endLine": "152",
+ "relevantVariables": [
+ "generateRulesForCandidate",
+ "utility.apply"
+ ]
+ },
+ "inputDataExample": "{\"candidate\": {\"root\": \"underline\", ...}}",
+ "outputDataExample": "{\"rules\": [{\"node\": {\"kind\":\"rule\",\"selector\":\"&\",\"nodes\":[{\"kind\":\"declaration\",\"property\":\"text-decoration-line\",\"value\":\"underline\"}]}, \"propertySort\": ...}]}"
+ },
+ {
+ "simStepId": "8d9c8785-0c68-432d-9472-03a26d9bfb75",
+ "diagramNodeId": "77ad0426-7373-4168-be2b-34a1bce4a89a",
+ "simStepLabel": "Data Flow: Pass AST and Variants for Application",
+ "simStepDescription": "The base CSS rule AST and the list of parsed `Variant` objects are passed to the `applyVariant` function to be combined.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compile.ts",
+ "startLine": "166",
+ "endLine": "166",
+ "relevantVariables": [
+ "variant"
+ ]
+ },
+ "inputDataExample": "{\"node\": {\"kind\":\"rule\",\"selector\":\"&\", ...}, \"variants\": [{\"kind\":\"static\",\"root\":\"md\"},{\"kind\":\"static\",\"root\":\"hover\"}]}",
+ "outputDataExample": "{\"node\": {\"kind\":\"rule\",\"selector\":\"&\", ...}, \"variants\": [{\"kind\":\"static\",\"root\":\"md\"},{\"kind\":\"static\",\"root\":\"hover\"}]}"
+ },
+ {
+ "simStepId": "2b6cc5b2-2c96-49e5-8f98-e7f98efea128",
+ "diagramNodeId": "af5bb6af-b0ac-4f02-acc9-eedb55fe519d",
+ "simStepLabel": "Node: Apply Variants to Rule",
+ "simStepDescription": "The variants are applied sequentially to the base AST. The `variants.compare` function first sorts them (e.g., responsive `md` before state `hover`). Then, `applyVariant` is called for each. The `hover` variant wraps the rule in a `:hover` pseudo-class, and the `md` variant wraps the result in a media query, progressively modifying the AST.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compile.ts",
+ "startLine": "183",
+ "endLine": "188",
+ "relevantVariables": [
+ "applyVariant",
+ "variants"
+ ]
+ },
+ "inputDataExample": "{\"node\": {\"kind\":\"rule\",\"selector\":\"&\", ...}, \"variants\": [{\"kind\":\"static\",\"root\":\"md\"},{\"kind\":\"static\",\"root\":\"hover\"}]}",
+ "outputDataExample": "{\"node\": {\"kind\":\"at-rule\",\"name\":\"@media\",\"params\":\"(width >= 768px)\",\"nodes\":[{\"kind\":\"rule\",\"selector\":\"&:hover\", ...}]}}"
+ },
+ {
+ "simStepId": "9ce76e94-b5fe-44e1-a8c3-88fe41777f35",
+ "diagramNodeId": "0362a778-b1d3-4161-8a92-4cb3f23cfe4a",
+ "simStepLabel": "Data Flow: Pass Final AST for CSS Generation",
+ "simStepDescription": "The final, fully transformed AST, which now includes the logic from all applied variants, is passed to the final stage of the compilation pipeline.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compile.ts",
+ "startLine": "82",
+ "endLine": "82",
+ "relevantVariables": [
+ "astNodes"
+ ]
+ },
+ "inputDataExample": "{\"node\": {\"kind\":\"at-rule\",\"name\":\"@media\",\"params\":\"(width >= 768px)\",\"nodes\":[{\"kind\":\"rule\",\"selector\":\"&:hover\", ...}]}}",
+ "outputDataExample": "{\"node\": {\"kind\":\"at-rule\",\"name\":\"@media\",\"params\":\"(width >= 768px)\",\"nodes\":[{\"kind\":\"rule\",\"selector\":\"&:hover\", ...}]}}"
+ },
+ {
+ "simStepId": "1f173972-2fe5-42c2-b8ea-f6992ab624e2",
+ "diagramNodeId": "fdfbc500-48c7-46dc-9441-abcd42344e4c",
+ "simStepLabel": "Node: Sort and Generate Final CSS",
+ "simStepDescription": "The compiler sorts the generated AST node against all other generated nodes based on variant and property order. Finally, it stringifies the entire sorted AST tree into the final CSS output.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compile.ts",
+ "startLine": "95",
+ "endLine": "100",
+ "relevantVariables": [
+ "astNodes.sort",
+ "nodeSorting",
+ "aSorting.variants",
+ "zSorting.variants"
+ ]
+ },
+ "inputDataExample": "{\"astNodes\": [/* ...many ast nodes... */]}",
+ "outputDataExample": "{\"css\": \"@media (width >= 768px) { @media (hover: hover) { .md\\\\:hover\\\\:underline:hover { text-decoration-line: underline; } } }\"}"
+ },
+ {
+ "simStepId": "07d6d4fa-896e-4cd5-84aa-685001282e98",
+ "diagramNodeId": "30d2bf97-9dc9-4900-82dc-0008dbcb3d47",
+ "simStepLabel": "Flow: Custom Variant Definition - Parse CSS",
+ "simStepDescription": "In a separate flow, the engine parses the user's CSS file and detects custom variant definitions, such as `@custom-variant`. This happens before source files are scanned for classes. This example traces `@custom-variant hocus (&:hover, &:focus);`.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/index.ts",
+ "startLine": "350",
+ "endLine": "352",
+ "relevantVariables": [
+ "walk",
+ "node.name === '@custom-variant'"
+ ]
+ },
+ "inputDataExample": "{\"cssContent\": \"@custom-variant hocus (&:hover, &:focus);\"}",
+ "outputDataExample": "{\"variantName\": \"hocus\", \"variantSelector\": \"(&:hover, &:focus)\"}"
+ },
+ {
+ "simStepId": "c975cd6e-1ad8-4209-b8e9-dd15672c8027",
+ "diagramNodeId": "90a6ac8c-db96-4cfb-aab8-4550cdc73d36",
+ "simStepLabel": "Data Flow: Pass Variant Definition for Registration",
+ "simStepDescription": "The parsed details of the custom variant (its name and definition) are passed to the variant registration system.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/index.ts",
+ "startLine": "360",
+ "endLine": "360",
+ "relevantVariables": [
+ "name",
+ "selector"
+ ]
+ },
+ "inputDataExample": "{\"name\": \"hocus\", \"selector\": \"(&:hover, &:focus)\"}",
+ "outputDataExample": "{\"name\": \"hocus\", \"selector\": \"(&:hover, &:focus)\"}"
+ },
+ {
+ "simStepId": "62f1d35b-b450-4d02-9124-8d11383e0b52",
+ "diagramNodeId": "b18fca3e-8529-4b7f-8061-c8385ef13e3b",
+ "simStepLabel": "Node: Register Custom Variant",
+ "simStepDescription": "The engine registers the new 'hocus' variant. It creates a corresponding `applyFn` based on the provided selectors `(&:hover, &:focus)` and stores it in the `designSystem.variants` collection. This makes the `hocus:` variant available for use, just like built-in variants.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/variants.ts",
+ "startLine": "360",
+ "endLine": "368",
+ "relevantVariables": [
+ "variants.static",
+ "compoundsForSelectors"
+ ]
+ },
+ "inputDataExample": "{\"name\": \"hocus\", \"selector\": \"(&:hover, &:focus)\"}",
+ "outputDataExample": "{\"variants\": {\"hocus\": {\"kind\": \"static\", \"applyFn\": \"function(...)\"}}}"
+ }
+ ],
+ "description": "- Variants are the mechanism that makes Tailwind a powerful tool for building complex, real-world user interfaces, not just static pages
- - Enables responsive design through breakpoint prefixes like
sm:, md:, and lg:, which apply styles at specific screen sizes - - Supports pseudo-class variants for different states, such as
hover:, focus:, disabled:, and group-hover: - - Includes built-in support for dark mode (
dark:) and other system preferences like reduced motion (motion-reduce:) - - Users can create their own custom variants using CSS
@variant rules or through the plugin system
",
+ "simulationNodesAndEdges": {
+ "9819606a-f6b6-4001-aacf-1127d3666915": {
+ "simStepIds": [
+ "eaa78521-2d8b-4bff-ade7-099ab10fb0dd"
+ ]
+ },
+ "cb0109bf-3e83-44de-9f04-4d995ca3b47f": {
+ "simStepIds": [
+ "82d5255c-7c07-47a4-8df5-70710261d128"
+ ]
+ },
+ "7cbdc91e-47bc-4673-80f2-ecbac3f762c7": {
+ "simStepIds": [
+ "a122af75-88a8-4058-bc30-b8c4f39509fe"
+ ]
+ },
+ "af5bb6af-b0ac-4f02-acc9-eedb55fe519d": {
+ "simStepIds": [
+ "2b6cc5b2-2c96-49e5-8f98-e7f98efea128"
+ ]
+ },
+ "fdfbc500-48c7-46dc-9441-abcd42344e4c": {
+ "simStepIds": [
+ "1f173972-2fe5-42c2-b8ea-f6992ab624e2"
+ ]
+ },
+ "30d2bf97-9dc9-4900-82dc-0008dbcb3d47": {
+ "simStepIds": [
+ "07d6d4fa-896e-4cd5-84aa-685001282e98"
+ ]
+ },
+ "b18fca3e-8529-4b7f-8061-c8385ef13e3b": {
+ "simStepIds": [
+ "62f1d35b-b450-4d02-9124-8d11383e0b52"
+ ]
+ },
+ "08bb973f-591d-4502-9fca-68d1a097fb08": {
+ "simStepIds": [
+ "673ad478-e89b-4d0c-836e-3b4aad72b2d7"
+ ]
+ },
+ "006b92f3-9cf3-4d28-8a5f-6a1916d9d43c": {
+ "simStepIds": [
+ "a9ef6393-31b2-4559-a1cb-8c4d2f7078fa"
+ ]
+ },
+ "77ad0426-7373-4168-be2b-34a1bce4a89a": {
+ "simStepIds": [
+ "8d9c8785-0c68-432d-9472-03a26d9bfb75"
+ ]
+ },
+ "0362a778-b1d3-4161-8a92-4cb3f23cfe4a": {
+ "simStepIds": [
+ "9ce76e94-b5fe-44e1-a8c3-88fe41777f35"
+ ]
+ },
+ "90a6ac8c-db96-4cfb-aab8-4550cdc73d36": {
+ "simStepIds": [
+ "c975cd6e-1ad8-4209-b8e9-dd15672c8027"
+ ]
+ }
+ },
+ "isAIGenerated": true,
+ "keywords": "variants, applyVariant, @variant",
+ "generationPrompt": "Applying Styles Conditionally with Responsive and State Variants",
+ "generationKeywords": "variants, applyVariant, @variant"
+ },
+ "Seamless Integration with Modern Build Tools": {
+ "name": "Seamless Integration with Modern Build Tools",
+ "simSteps": [
+ {
+ "simStepId": "c0ea92ee-3c0a-4dc5-b3ad-9e02d73420c1",
+ "diagramNodeId": "ba5a34f3-b23f-4fda-b2ed-da992e47dfb9",
+ "simStepLabel": "Flow: PostCSS Integration - Step 1: Configure PostCSS",
+ "simStepDescription": "A developer integrates Tailwind CSS into their project by creating a `postcss.config.js` file and adding `@tailwindcss/postcss` to the list of PostCSS plugins. This configuration tells any PostCSS-based build tool (like Next.js, or PostCSS CLI) to process CSS files with Tailwind.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "playgrounds/nextjs/postcss.config.js",
+ "startLine": "1",
+ "endLine": "5",
+ "relevantVariables": [
+ "module.exports",
+ "plugins",
+ "@tailwindcss/postcss"
+ ]
+ },
+ "inputDataExample": "{}",
+ "outputDataExample": "{\n \"plugins\": {\n \"@tailwindcss/postcss\": {}\n }\n}"
+ },
+ {
+ "simStepId": "c803a596-1dd6-4b55-82d4-7c2f63776dbc",
+ "diagramNodeId": "24eb4805-f561-46d2-aa86-8a93c38537be",
+ "simStepLabel": "Flow: PostCSS Integration - Step 2: Build Tool Invokes PostCSS",
+ "simStepDescription": "The build tool (e.g., Webpack via `postcss-loader`, Next.js, Vite) reads `postcss.config.js` and invokes the PostCSS runner, passing the configuration and the CSS file to be processed.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-postcss/src/index.ts",
+ "startLine": "77",
+ "endLine": "77",
+ "relevantVariables": [
+ "postcssPlugin"
+ ]
+ },
+ "inputDataExample": "{\n \"configPath\": \"./postcss.config.js\",\n \"cssPath\": \"./src/input.css\"\n}",
+ "outputDataExample": "{\n \"configPath\": \"./postcss.config.js\",\n \"cssPath\": \"./src/input.css\"\n}"
+ },
+ {
+ "simStepId": "8aa13357-95a4-4cea-b4bd-b5b70d4f3de3",
+ "diagramNodeId": "a8add52e-7ad4-4a10-90d6-aa4bbcc7199d",
+ "simStepLabel": "Flow: PostCSS Integration - Step 3: Initialize Tailwind CSS Plugin",
+ "simStepDescription": "PostCSS initializes the `@tailwindcss/postcss` plugin. The plugin sets up a shared context, including loading the Tailwind configuration (`tailwind.config.js`), and prepares to process the CSS by hooking into PostCSS's event system, primarily using the `Once` event which runs once per file.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-postcss/src/index.ts",
+ "startLine": "34",
+ "endLine": "347",
+ "relevantVariables": [
+ "module.exports",
+ "postcssPlugin",
+ "Once"
+ ]
+ },
+ "inputDataExample": "{\n \"postcss_root_node\": {\n \"type\": \"root\",\n \"nodes\": [\n {\n \"type\": \"atrule\",\n \"name\": \"tailwind\",\n \"params\": \"base\"\n }\n ]\n }\n}",
+ "outputDataExample": "{\n \"tailwind_context\": {\n \"config\": {\n \"content\": [\"./src/**/*.{html,js}\"]\n },\n \"scanned_classes\": null\n }\n}"
+ },
+ {
+ "simStepId": "68266603-6de1-4fbd-ba3b-13e7264baa45",
+ "diagramNodeId": "2b658db9-435a-403b-83f4-dba3733356bb",
+ "simStepLabel": "Flow: PostCSS Integration - Step 4: CSS Content Passed to Plugin",
+ "simStepDescription": "The content of the CSS file, along with its path, is passed to the plugin's `Once` function for processing. This content typically contains `@tailwind` directives.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-postcss/src/index.ts",
+ "startLine": "88",
+ "endLine": "88",
+ "relevantVariables": [
+ "Once(root, { result })"
+ ]
+ },
+ "inputDataExample": "{\n \"css\": \"@tailwind base;\\n@tailwind components;\\n@tailwind utilities;\",\n \"filePath\": \"/path/to/project/src/input.css\"\n}",
+ "outputDataExample": "{\n \"css\": \"@tailwind base;\\n@tailwind components;\\n@tailwind utilities;\",\n \"filePath\": \"/path/to/project/src/input.css\"\n}"
+ },
+ {
+ "simStepId": "6ac19244-330b-46a3-8ee1-3342c8edaf5b",
+ "diagramNodeId": "e4000d03-510d-4ae5-90f8-fcc41664a401",
+ "simStepLabel": "Flow: PostCSS Integration - Step 5: Scan Files and Generate CSS",
+ "simStepDescription": "The plugin's core logic executes. It first scans all content files specified in `tailwind.config.js` to find all utility classes used. It then uses this list of classes (candidates) to compile the input CSS, replacing the `@tailwind` directives with the generated CSS rules. It also tracks all scanned files as dependencies for the build tool to enable caching and incremental rebuilds.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-postcss/src/index.ts",
+ "startLine": "129",
+ "endLine": "202",
+ "relevantVariables": [
+ "context.getClasses()",
+ "context.generate(css, ...)",
+ "result.messages.push({ type: 'dependency', ... })"
+ ]
+ },
+ "inputDataExample": "{\n \"css_input\": \"@tailwind utilities;\",\n \"content_files\": [\"./src/index.html\"],\n \"html_content\": \"\"\n}",
+ "outputDataExample": "{\n \"generated_css\": \".font-bold { font-weight: 700; }\\n.text-red-500 { color: red; }\",\n \"dependencies\": [\"/path/to/project/tailwind.config.js\", \"/path/to/project/src/index.html\"]\n}"
+ },
+ {
+ "simStepId": "2774e022-2751-4c7b-bf9a-a59369a9cd65",
+ "diagramNodeId": "b0a551fe-ad7d-4b33-b076-a0c162971cb5",
+ "simStepLabel": "Flow: PostCSS Integration - Step 6: Update PostCSS AST",
+ "simStepDescription": "The generated CSS is parsed into a new PostCSS Abstract Syntax Tree (AST), which is then used to replace the original `@tailwind` at-rules in the AST being processed.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-postcss/src/index.ts",
+ "startLine": "327",
+ "endLine": "327",
+ "relevantVariables": [
+ "root.replaceWith(newRoot)"
+ ]
+ },
+ "inputDataExample": "{\n \"generated_ast\": {\n \"type\": \"root\",\n \"nodes\": [\n {\n \"type\": \"rule\",\n \"selector\": \".font-bold\"\n }\n ]\n }\n}",
+ "outputDataExample": "{\n \"generated_ast\": {\n \"type\": \"root\",\n \"nodes\": [\n {\n \"type\": \"rule\",\n \"selector\": \".font-bold\"\n }\n ]\n }\n}"
+ },
+ {
+ "simStepId": "0e41a1b5-e546-486b-ae62-d6861fdf7ce5",
+ "diagramNodeId": "e765979a-1aa9-4d06-adde-fdadae2ec57b",
+ "simStepLabel": "Flow: PostCSS Integration - Step 7: Finalize Output",
+ "simStepDescription": "After the plugin has modified the AST, control is returned to the PostCSS runner. The runner then processes the output of any subsequent plugins and finally stringifies the final AST into a CSS string, which is written to the output file.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-postcss/src/index.ts",
+ "startLine": "329",
+ "endLine": "337",
+ "relevantVariables": [
+ "root.raws.indent"
+ ]
+ },
+ "inputDataExample": "{\n \"final_ast\": {\n \"type\": \"root\",\n \"nodes\": [\n {\n \"type\": \"rule\",\n \"selector\": \".font-bold\"\n }\n ]\n }\n}",
+ "outputDataExample": "{\n \"output_css\": \".font-bold { font-weight: 700; }\"\n}"
+ },
+ {
+ "simStepId": "31c30553-f46d-4083-9634-2581d6e0f040",
+ "diagramNodeId": "56c49227-f8f8-4f43-85f6-21a320c15ab2",
+ "simStepLabel": "Flow: Vite Integration - Step 1: Configure Vite",
+ "simStepDescription": "A developer adds the `@tailwindcss/vite` plugin to their `vite.config.ts` file. This is the entry point for integrating Tailwind CSS in a Vite project.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "playgrounds/vite/vite.config.ts",
+ "startLine": "1",
+ "endLine": "7",
+ "relevantVariables": [
+ "defineConfig",
+ "tailwindcss"
+ ]
+ },
+ "inputDataExample": "{}",
+ "outputDataExample": "{\n \"plugins\": [\"react()\", \"tailwindcss()\"]\n}"
+ },
+ {
+ "simStepId": "770b8f86-55a6-444d-b0d7-d84c60084c18",
+ "diagramNodeId": "793ead2a-8d4c-4c1f-b371-d271ba8da975",
+ "simStepLabel": "Flow: Vite Integration - Step 2: Vite Reads Configuration",
+ "simStepDescription": "Vite starts up, reads the `vite.config.ts` file, and executes the `tailwindcss()` plugin function to get the actual Vite plugin objects.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-vite/src/index.ts",
+ "startLine": "18",
+ "endLine": "18",
+ "relevantVariables": [
+ "tailwindcss(opts = {})"
+ ]
+ },
+ "inputDataExample": "{\n \"configPath\": \"./vite.config.ts\"\n}",
+ "outputDataExample": "{\n \"configPath\": \"./vite.config.ts\"\n}"
+ },
+ {
+ "simStepId": "847f2607-c677-4eaa-b73e-dd372d73ef70",
+ "diagramNodeId": "9a1fab25-726b-42cd-87da-76468f2e125a",
+ "simStepLabel": "Flow: Vite Integration - Step 3: Initialize Vite Plugins",
+ "simStepDescription": "The `tailwindcss` function returns an array of specialized Vite plugins. These plugins use different hooks (`configureServer`, `transform`) and apply modes (`serve`, `build`) to handle CSS generation efficiently for both development and production builds.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-vite/src/index.ts",
+ "startLine": "55",
+ "endLine": "130",
+ "relevantVariables": [
+ "tailwindcss",
+ "'@tailwindcss/vite:scan'",
+ "'@tailwindcss/vite:generate:serve'",
+ "'@tailwindcss/vite:generate:build'"
+ ]
+ },
+ "inputDataExample": "{\n \"options\": {}\n}",
+ "outputDataExample": "{\n \"plugins\": [\n {\n \"name\": \"@tailwindcss/vite:scan\",\n \"enforce\": \"pre\"\n },\n {\n \"name\": \"@tailwindcss/vite:generate:serve\",\n \"apply\": \"serve\"\n },\n {\n \"name\": \"@tailwindcss/vite:generate:build\",\n \"apply\": \"build\"\n }\n ]\n}"
+ },
+ {
+ "simStepId": "cd978705-e081-41b1-93e9-96c29429b1af",
+ "diagramNodeId": "7864f923-cfb8-4013-b451-6468e35755eb",
+ "simStepLabel": "Flow: Vite Integration - Step 4: CSS File Request",
+ "simStepDescription": "During development, when the browser requests a CSS file that is a Tailwind entry point (e.g., `index.css`), Vite's development server intercepts the request and passes the file content through its transform pipeline.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-vite/src/index.ts",
+ "startLine": "77",
+ "endLine": "80",
+ "relevantVariables": [
+ "transform(src, id, options)"
+ ]
+ },
+ "inputDataExample": "{\n \"request_url\": \"/src/index.css\"\n}",
+ "outputDataExample": "{\n \"request_url\": \"/src/index.css\"\n}"
+ },
+ {
+ "simStepId": "a660c7cc-56bb-4fac-af79-3d00679a5759",
+ "diagramNodeId": "f2f78a72-7d51-48d9-be4e-6eaeda5e6ad7",
+ "simStepLabel": "Flow: Vite Integration - Step 5: Transform and Generate CSS (Serve)",
+ "simStepDescription": "The `@tailwindcss/vite:generate:serve` plugin's `transform` hook is executed. It scans content files for class candidates, compiles the input CSS with `@tailwind` directives, and generates the final CSS. It also registers dependencies with Vite's module graph (`this.addWatchFile`) to trigger hot module replacement (HMR) when content files change.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-vite/src/index.ts",
+ "startLine": "74",
+ "endLine": "96",
+ "relevantVariables": [
+ "'@tailwindcss/vite:generate:serve'",
+ "transform",
+ "root.generate",
+ "this.addWatchFile"
+ ]
+ },
+ "inputDataExample": "{\n \"src\": \"@import 'tailwindcss/base';\",\n \"id\": \"/path/to/project/src/index.css\"\n}",
+ "outputDataExample": "{\n \"code\": \"/* CSS generated by Tailwind */\",\n \"map\": null\n}"
+ },
+ {
+ "simStepId": "cb451f00-d410-41b6-a3b9-d6edf1620e07",
+ "diagramNodeId": "588712b6-c2d0-4b86-921d-611a3bb68406",
+ "simStepLabel": "Flow: Vite Integration - Step 6: Return Transformed CSS to Vite",
+ "simStepDescription": "The generated CSS code is returned from the `transform` hook. Vite continues processing it with other relevant plugins (like PostCSS if configured) and then serves it to the browser.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-vite/src/index.ts",
+ "startLine": "93",
+ "endLine": "93",
+ "relevantVariables": [
+ "return result"
+ ]
+ },
+ "inputDataExample": "{\n \"code\": \".text-blue-500 { color: #3b82f6; }\",\n \"map\": null\n}",
+ "outputDataExample": "{\n \"code\": \".text-blue-500 { color: #3b82f6; }\",\n \"map\": null\n}"
+ },
+ {
+ "simStepId": "f1917cc3-57ba-4953-84c5-19442c893485",
+ "diagramNodeId": "61b47a59-ece5-42e6-b4cd-909a39aff89a",
+ "simStepLabel": "Flow: Vite Integration - Step 7: Optimize CSS for Production (Build)",
+ "simStepDescription": "When running a production build (`vite build`), the `@tailwindcss/vite:generate:build` plugin is used instead. After generating the CSS, it performs an additional optimization step, which often includes minification using Lightning CSS to ensure the smallest possible asset size for production.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-vite/src/index.ts",
+ "startLine": "99",
+ "endLine": "128",
+ "relevantVariables": [
+ "'@tailwindcss/vite:generate:build'",
+ "transform",
+ "root.generate",
+ "optimize"
+ ]
+ },
+ "inputDataExample": "{\n \"unoptimized_css\": \".font-bold {\\n font-weight: 700;\\n}\"\n}",
+ "outputDataExample": "{\n \"optimized_css\": \".font-bold{font-weight:700}\"\n}"
+ }
+ ],
+ "description": "- The primary way developers use Tailwind is through its deep integration with the existing frontend ecosystem, making it easy to adopt in any project
- - Provides official plugins for popular build tools, most notably PostCSS, which serves as a base for integrations in frameworks like Next
- js, and Vite
- - These plugins hook into the development server and build process to automatically scan content files and inject the generated CSS
- - They manage dependency tracking and caching to ensure fast rebuilds and an optimal developer experience
",
+ "simulationNodesAndEdges": {
+ "ba5a34f3-b23f-4fda-b2ed-da992e47dfb9": {
+ "simStepIds": [
+ "c0ea92ee-3c0a-4dc5-b3ad-9e02d73420c1"
+ ]
+ },
+ "a8add52e-7ad4-4a10-90d6-aa4bbcc7199d": {
+ "simStepIds": [
+ "8aa13357-95a4-4cea-b4bd-b5b70d4f3de3"
+ ]
+ },
+ "e4000d03-510d-4ae5-90f8-fcc41664a401": {
+ "simStepIds": [
+ "6ac19244-330b-46a3-8ee1-3342c8edaf5b"
+ ]
+ },
+ "e765979a-1aa9-4d06-adde-fdadae2ec57b": {
+ "simStepIds": [
+ "0e41a1b5-e546-486b-ae62-d6861fdf7ce5"
+ ]
+ },
+ "56c49227-f8f8-4f43-85f6-21a320c15ab2": {
+ "simStepIds": [
+ "31c30553-f46d-4083-9634-2581d6e0f040"
+ ]
+ },
+ "9a1fab25-726b-42cd-87da-76468f2e125a": {
+ "simStepIds": [
+ "847f2607-c677-4eaa-b73e-dd372d73ef70"
+ ]
+ },
+ "f2f78a72-7d51-48d9-be4e-6eaeda5e6ad7": {
+ "simStepIds": [
+ "a660c7cc-56bb-4fac-af79-3d00679a5759"
+ ]
+ },
+ "61b47a59-ece5-42e6-b4cd-909a39aff89a": {
+ "simStepIds": [
+ "f1917cc3-57ba-4953-84c5-19442c893485"
+ ]
+ },
+ "24eb4805-f561-46d2-aa86-8a93c38537be": {
+ "simStepIds": [
+ "c803a596-1dd6-4b55-82d4-7c2f63776dbc"
+ ]
+ },
+ "2b658db9-435a-403b-83f4-dba3733356bb": {
+ "simStepIds": [
+ "68266603-6de1-4fbd-ba3b-13e7264baa45"
+ ]
+ },
+ "b0a551fe-ad7d-4b33-b076-a0c162971cb5": {
+ "simStepIds": [
+ "2774e022-2751-4c7b-bf9a-a59369a9cd65"
+ ]
+ },
+ "793ead2a-8d4c-4c1f-b371-d271ba8da975": {
+ "simStepIds": [
+ "770b8f86-55a6-444d-b0d7-d84c60084c18"
+ ]
+ },
+ "7864f923-cfb8-4013-b451-6468e35755eb": {
+ "simStepIds": [
+ "cd978705-e081-41b1-93e9-96c29429b1af"
+ ]
+ },
+ "588712b6-c2d0-4b86-921d-611a3bb68406": {
+ "simStepIds": [
+ "cb451f00-d410-41b6-a3b9-d6edf1620e07"
+ ]
+ }
+ },
+ "isAIGenerated": true,
+ "keywords": "@tailwindcss/postcss, @tailwindcss/vite, webpack",
+ "generationPrompt": "Seamless Integration with Modern Build Tools",
+ "generationKeywords": "@tailwindcss/postcss, @tailwindcss/vite, webpack"
+ },
+ "Extending Core Functionality with a Plugin System": {
+ "name": "Extending Core Functionality with a Plugin System",
+ "simSteps": [
+ {
+ "simStepId": "bba7f885-598c-48f4-bbe1-5035a3d78c49",
+ "diagramNodeId": "003ca2a5-ca0c-49da-9d94-f0825bb1a840",
+ "simStepLabel": "Parse CSS and Detect @plugin Directive",
+ "simStepDescription": "The Tailwind CSS engine parses the input CSS file. It walks through the Abstract Syntax Tree (AST) and identifies at-rules. When it encounters an `@plugin` rule, it extracts the path to the plugin's JavaScript module.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compat/apply-compat-hooks.ts",
+ "startLine": "56",
+ "endLine": "64",
+ "relevantVariables": [
+ "walk",
+ "node",
+ "pluginPath"
+ ]
+ },
+ "inputDataExample": "{\n \"cssContent\": \"@tailwind utilities;\\n@plugin './my-plugin.js';\"\n}",
+ "outputDataExample": "{\n \"pluginPaths\": [\n {\n \"id\": \"./my-plugin.js\",\n \"base\": \"/path/to/project/src\",\n \"options\": {}\n }\n ]\n}"
+ },
+ {
+ "simStepId": "d2776b89-8cc8-4f59-b22a-10b9ad4e433f",
+ "diagramNodeId": "434cb654-91a0-491a-ae3c-46f9f45756b8",
+ "simStepLabel": "Transmit Plugin Path for Loading",
+ "simStepDescription": "The extracted plugin path and its base directory are passed to the module loader, which is responsible for reading and executing the plugin file.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compat/apply-compat-hooks.ts",
+ "startLine": "189",
+ "endLine": "189",
+ "relevantVariables": [
+ "loadModule"
+ ]
+ },
+ "inputDataExample": "{\n \"id\": \"./my-plugin.js\",\n \"base\": \"/path/to/project/src\",\n \"resourceHint\": \"plugin\"\n}",
+ "outputDataExample": "{\n \"id\": \"./my-plugin.js\",\n \"base\": \"/path/to/project/src\",\n \"resourceHint\": \"plugin\"\n}"
+ },
+ {
+ "simStepId": "f85f0059-785e-45bf-952d-70f31d1ca531",
+ "diagramNodeId": "228fa9c6-524c-4485-ac04-30c0b38e7447",
+ "simStepLabel": "Load Plugin Module",
+ "simStepDescription": "The system dynamically loads the JavaScript module from the specified path. The module is expected to export a function created with Tailwind's `plugin()` helper.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compat/apply-compat-hooks.ts",
+ "startLine": "188",
+ "endLine": "198",
+ "relevantVariables": [
+ "pluginPaths",
+ "loadModule"
+ ]
+ },
+ "inputDataExample": "{\n \"id\": \"./my-plugin.js\",\n \"base\": \"/path/to/project/src\"\n}",
+ "outputDataExample": "{\n \"path\": \"./my-plugin.js\",\n \"base\": \"/path/to/project\",\n \"plugin\": {\n \"handler\": \"function ({ addUtilities, addVariant }) { ... }\",\n \"config\": {}\n },\n \"options\": {}\n}"
+ },
+ {
+ "simStepId": "491d945f-8696-4e9c-9b83-292502f1704c",
+ "diagramNodeId": "269c1ff1-099a-4365-88bf-706673176424",
+ "simStepLabel": "Pass Plugin Handler to Config Resolver",
+ "simStepDescription": "The loaded plugin, including its handler function and any associated configuration, is passed to the configuration resolver.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compat/config/resolve-config.ts",
+ "startLine": "129",
+ "endLine": "129",
+ "relevantVariables": [
+ "extractConfigs"
+ ]
+ },
+ "inputDataExample": "{\n \"plugin\": {\n \"handler\": \"function({ addUtilities }) { addUtilities({ '.custom-utility': { color: 'red' } }) }\",\n \"config\": {},\n \"reference\": false,\n \"src\": \"input.css:2:1\"\n }\n}",
+ "outputDataExample": "{\n \"plugin\": {\n \"handler\": \"function({ addUtilities }) { addUtilities({ '.custom-utility': { color: 'red' } }) }\",\n \"config\": {},\n \"reference\": false,\n \"src\": \"input.css:2:1\"\n }\n}"
+ },
+ {
+ "simStepId": "63d599b1-4e75-471b-9357-c6257451dbed",
+ "diagramNodeId": "4935dd39-2719-4fae-9e47-4904dc38887b",
+ "simStepLabel": "Resolve and Merge Plugin Configuration",
+ "simStepDescription": "The configuration resolver merges the plugin's configuration with the main Tailwind config. It also collects all plugin handler functions to be executed later.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compat/config/resolve-config.ts",
+ "startLine": "172",
+ "endLine": "172",
+ "relevantVariables": [
+ "ctx.plugins.push"
+ ]
+ },
+ "inputDataExample": "{\n \"configFile\": {\n \"config\": {\n \"plugins\": [\n \"function plugin() { ... }\"\n ]\n },\n \"base\": \"/path/to/project\"\n }\n}",
+ "outputDataExample": "{\n \"resolvedConfig\": {\n \"theme\": { ... },\n \"plugins\": [\n {\n \"handler\": \"function() { ... }\",\n \"config\": {}\n }\n ]\n }\n}"
+ },
+ {
+ "simStepId": "6e38cfe1-f57a-4ebc-ab6f-8763d6133819",
+ "diagramNodeId": "7791ae55-1ffa-41bb-b04f-6203e8ae292f",
+ "simStepLabel": "Prepare Plugin API for Execution",
+ "simStepDescription": "Before executing the plugin, the system constructs a `PluginAPI` object. This object contains all the helper functions (`addUtilities`, `addVariant`, `theme`, etc.) that the plugin can use to interact with the design system.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compat/apply-compat-hooks.ts",
+ "startLine": "325",
+ "endLine": "330",
+ "relevantVariables": [
+ "buildPluginApi",
+ "api"
+ ]
+ },
+ "inputDataExample": "{\n \"designSystem\": {},\n \"ast\": [],\n \"resolvedConfig\": { ... },\n \"featuresRef\": { ... }\n}",
+ "outputDataExample": "{\n \"pluginAPI\": {\n \"addBase\": \"function\",\n \"addVariant\": \"function\",\n \"addUtilities\": \"function\",\n \"matchUtilities\": \"function\",\n \"theme\": \"function\",\n \"config\": \"function\"\n }\n}"
+ },
+ {
+ "simStepId": "8d3e5126-3fb6-46bf-9e8b-be5c79236566",
+ "diagramNodeId": "f654954d-60f3-4380-a598-cd77b2971ed0",
+ "simStepLabel": "Execute Plugin Handler",
+ "simStepDescription": "The system invokes the plugin's handler function, passing the newly created `PluginAPI` object as an argument. The plugin code now runs and calls the API functions to register its extensions.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compat/apply-compat-hooks.ts",
+ "startLine": "333",
+ "endLine": "333",
+ "relevantVariables": [
+ "handler",
+ "api"
+ ]
+ },
+ "inputDataExample": "{\n \"api\": {\n \"addUtilities\": \"function\",\n \"addVariant\": \"function\"\n }\n}",
+ "outputDataExample": "null"
+ },
+ {
+ "simStepId": "a31e3864-e0d7-4f6d-a9d0-1f044879ce36",
+ "diagramNodeId": "83b31836-414f-4fa4-a180-00684b0f8286",
+ "simStepLabel": "Transmit New Utilities and Variants to API",
+ "simStepDescription": "Inside the plugin, the developer calls API functions like `addUtilities` and `addVariant`, passing CSS-in-JS objects and variant definitions to extend Tailwind's functionality.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-postcss/src/fixtures/example-project/plugin.js",
+ "startLine": "1",
+ "endLine": "4",
+ "relevantVariables": [
+ "addVariant"
+ ]
+ },
+ "inputDataExample": "{\n \"utilities\": {\n \".text-trim\": {\n \"text-box-trim\": \"both\",\n \"text-box-edge\": \"cap alphabetic\"\n }\n },\n \"variant\": {\n \"name\": \"hocus\",\n \"definition\": [\"&:hover\", \"&:focus\"]\n }\n}",
+ "outputDataExample": "{\n \"utilities\": {\n \".text-trim\": {\n \"text-box-trim\": \"both\",\n \"text-box-edge\": \"cap alphabetic\"\n }\n },\n \"variant\": {\n \"name\": \"hocus\",\n \"definition\": [\"&:hover\", \"&:focus\"]\n }\n}"
+ },
+ {
+ "simStepId": "15362ed0-6ffd-4177-a992-bfd6b46ad403",
+ "diagramNodeId": "414ad46e-9582-4a4f-bdcc-d7b36f5618f1",
+ "simStepLabel": "Register New Utilities and Variants",
+ "simStepDescription": "The API functions receive the data from the plugin and register the new utilities and variants within the internal design system. This makes them available for Tailwind to use during the CSS generation phase.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/compat/plugin-api.ts",
+ "startLine": "115",
+ "endLine": "182",
+ "relevantVariables": [
+ "addVariant",
+ "designSystem.addVariant"
+ ]
+ },
+ "inputDataExample": "{\n \"utilities\": { \".text-trim\": { \"...\" } },\n \"variant\": { \"name\": \"hocus\", \"definition\": \"...\" }\n}",
+ "outputDataExample": "{\n \"designSystemState\": {\n \"utilities\": [ ..., { \"name\": \".text-trim\", \"...\" } ],\n \"variants\": [ ..., { \"name\": \"hocus\", \"...\" } ]\n }\n}"
+ }
+ ],
+ "description": "- The plugin system allows developers to extend Tailwind's capabilities, fostering a rich ecosystem and enabling the creation of reusable libraries
- - Developers can create plugins to add new base styles, components, utility classes, or variants
- - The plugin API provides helper functions like
addUtilities, addComponents, addVariant, and theme() to interact with the design system - - Plugins are easily shared and can be configured with options, as seen in many official plugins like
@tailwindcss/forms and @tailwindcss/typography
",
+ "simulationNodesAndEdges": {
+ "003ca2a5-ca0c-49da-9d94-f0825bb1a840": {
+ "simStepIds": [
+ "bba7f885-598c-48f4-bbe1-5035a3d78c49"
+ ]
+ },
+ "228fa9c6-524c-4485-ac04-30c0b38e7447": {
+ "simStepIds": [
+ "f85f0059-785e-45bf-952d-70f31d1ca531"
+ ]
+ },
+ "4935dd39-2719-4fae-9e47-4904dc38887b": {
+ "simStepIds": [
+ "63d599b1-4e75-471b-9357-c6257451dbed"
+ ]
+ },
+ "f654954d-60f3-4380-a598-cd77b2971ed0": {
+ "simStepIds": [
+ "8d3e5126-3fb6-46bf-9e8b-be5c79236566"
+ ]
+ },
+ "414ad46e-9582-4a4f-bdcc-d7b36f5618f1": {
+ "simStepIds": [
+ "15362ed0-6ffd-4177-a992-bfd6b46ad403"
+ ]
+ },
+ "434cb654-91a0-491a-ae3c-46f9f45756b8": {
+ "simStepIds": [
+ "d2776b89-8cc8-4f59-b22a-10b9ad4e433f"
+ ]
+ },
+ "269c1ff1-099a-4365-88bf-706673176424": {
+ "simStepIds": [
+ "491d945f-8696-4e9c-9b83-292502f1704c"
+ ]
+ },
+ "7791ae55-1ffa-41bb-b04f-6203e8ae292f": {
+ "simStepIds": [
+ "6e38cfe1-f57a-4ebc-ab6f-8763d6133819"
+ ]
+ },
+ "83b31836-414f-4fa4-a180-00684b0f8286": {
+ "simStepIds": [
+ "a31e3864-e0d7-4f6d-a9d0-1f044879ce36"
+ ]
+ }
+ },
+ "isAIGenerated": true,
+ "keywords": "plugin, addUtilities, addVariant",
+ "generationPrompt": "Extending Core Functionality with a Plugin System",
+ "generationKeywords": "plugin, addUtilities, addVariant"
+ },
+ "Using One-Off, Arbitrary Values for Styles Directly in HTML": {
+ "name": "Using One-Off, Arbitrary Values for Styles Directly in HTML",
+ "simSteps": [
+ {
+ "simStepId": "2c6a58c2-d3cd-4991-89f9-07f78e5f0a76",
+ "diagramNodeId": "4f41bf0d-8384-4e71-bc2c-9f0e0339f723",
+ "simStepLabel": "[Flow 1: Named Utility with Arbitrary Value] Candidate Identification",
+ "simStepDescription": "The high-performance extractor, written in Rust, scans source files (e.g., HTML, JS) to find potential utility classes. It uses a series of state machines to efficiently identify strings that conform to Tailwind's class syntax, including those with arbitrary values.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "crates/oxide/src/main.rs",
+ "startLine": "48",
+ "endLine": "50",
+ "relevantVariables": [
+ "run_full_extractor"
+ ]
+ },
+ "inputDataExample": "{\"fileContent\": \"...
\"}",
+ "outputDataExample": "{\"candidates\": [\"w-[100px]\", \"top-[calc(100%-2rem)]\"]}"
+ },
+ {
+ "simStepId": "6d448667-774a-41cc-8133-3d585557a540",
+ "diagramNodeId": "b291634d-3f95-4c4b-9840-cf6501d00551",
+ "simStepLabel": "[Flow 1: Named Utility with Arbitrary Value] Candidate Transmission for Parsing",
+ "simStepDescription": "Each potential candidate string is passed from the main extractor to the `UtilityMachine` for detailed parsing and validation.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "crates/oxide/src/main.rs",
+ "startLine": "24",
+ "endLine": "26",
+ "relevantVariables": [
+ "machine.next",
+ "MachineState::Done"
+ ]
+ },
+ "inputDataExample": "{\"candidate\": \"w-[100px]\"}",
+ "outputDataExample": "{\"candidate\": \"w-[100px]\"}"
+ },
+ {
+ "simStepId": "bf62f504-9a6a-4026-b2e0-408d8f6515fd",
+ "diagramNodeId": "472d0313-0159-4d94-98d5-54748570d4f8",
+ "simStepLabel": "[Flow 1: Named Utility with Arbitrary Value] Dispatching to Named Utility Parser",
+ "simStepDescription": "The `UtilityMachine` acts as a dispatcher. It examines the start of the candidate string. Since `w-[100px]` starts with a letter, it's identified as a named utility and the task is delegated to the `NamedUtilityMachine`.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "crates/oxide/src/extractor/utility_machine.rs",
+ "startLine": "15",
+ "endLine": "19",
+ "relevantVariables": [
+ "UtilityMachine",
+ "named_utility_machine"
+ ]
+ },
+ "inputDataExample": "{\"candidate\": \"w-[100px]\"}",
+ "outputDataExample": "{\"type\": \"NamedUtility\", \"delegate_to\": \"NamedUtilityMachine\"}"
+ },
+ {
+ "simStepId": "de0f8d8d-b441-43d9-a031-d7ee0ff63817",
+ "diagramNodeId": "80fef34d-fa5b-4bc0-ae6b-56e1ba797ff6",
+ "simStepLabel": "[Flow 1: Named Utility with Arbitrary Value] Delegating to Arbitrary Value Parser",
+ "simStepDescription": "The `NamedUtilityMachine` parses the utility name (`w-`) and then encounters `[`, signaling an arbitrary value. It then delegates the parsing of the value within the brackets to the `ArbitraryValueMachine`.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "crates/oxide/src/extractor/named_utility_machine.rs",
+ "startLine": "161",
+ "endLine": "161",
+ "relevantVariables": [
+ "self.arbitrary_value_machine.next"
+ ]
+ },
+ "inputDataExample": "{\"value_string\": \"[100px]\"}",
+ "outputDataExample": "{\"value_string\": \"[100px]\"}"
+ },
+ {
+ "simStepId": "8647727d-bf05-4ebb-909d-b3a4f14afc49",
+ "diagramNodeId": "fc707279-942f-4c36-9f9d-4bf40c925b6b",
+ "simStepLabel": "[Flow 1: Named Utility with Arbitrary Value] Parsing the Arbitrary Value",
+ "simStepDescription": "The `ArbitraryValueMachine` consumes the input from the opening `[` to the closing `]`, correctly handling any nested brackets (e.g., in `calc()`). It validates the content and, upon finding the matching closing bracket, signals completion.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "crates/oxide/src/extractor/named_utility_machine.rs",
+ "startLine": "159",
+ "endLine": "164",
+ "relevantVariables": [
+ "Class::OpenBracket",
+ "arbitrary_value_machine"
+ ]
+ },
+ "inputDataExample": "{\"string_to_parse\": \"[100px]\"}",
+ "outputDataExample": "{\"parsed_value\": \"100px\", \"status\": \"Done\"}"
+ },
+ {
+ "simStepId": "79f40ae3-f086-4f90-8968-14c785bf35c9",
+ "diagramNodeId": "416fbe58-0110-44bc-a421-1a002303d6c2",
+ "simStepLabel": "[Flow 1: Named Utility with Arbitrary Value] Returning Full Candidate",
+ "simStepDescription": "The `ArbitraryValueMachine` returns a `Done` state. The `NamedUtilityMachine` receives this, finalizing the extraction of the complete and valid candidate string `w-[100px]`.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "crates/oxide/src/extractor/named_utility_machine.rs",
+ "startLine": "162",
+ "endLine": "162",
+ "relevantVariables": [
+ "MachineState::Done",
+ "self.done"
+ ]
+ },
+ "inputDataExample": "{\"full_candidate\": \"w-[100px]\", \"status\": \"Done\"}",
+ "outputDataExample": "{\"full_candidate\": \"w-[100px]\", \"status\": \"Done\"}"
+ },
+ {
+ "simStepId": "03cba560-0826-4cf8-8711-6179a7eb8788",
+ "diagramNodeId": "40a97b17-fdf4-41ea-b3c6-d4ef9d04dc9d",
+ "simStepLabel": "[Flow 2: Arbitrary Property] Candidate Identification",
+ "simStepDescription": "The high-performance extractor, written in Rust, scans source files to find potential utility classes. It identifies strings that look like Tailwind classes, including arbitrary properties like `[mask:url(...)]`.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "crates/oxide/src/main.rs",
+ "startLine": "48",
+ "endLine": "50",
+ "relevantVariables": [
+ "run_full_extractor"
+ ]
+ },
+ "inputDataExample": "{\"fileContent\": \"...
\"}",
+ "outputDataExample": "{\"candidates\": [\"[mask:url(image.png)]\"]}"
+ },
+ {
+ "simStepId": "af09b176-bdfd-4355-9404-3a43d29c5d33",
+ "diagramNodeId": "09230f36-fc8a-4d72-aa87-6507e2a022d7",
+ "simStepLabel": "[Flow 2: Arbitrary Property] Candidate Transmission for Parsing",
+ "simStepDescription": "The potential arbitrary property string is passed from the main extractor to the `UtilityMachine` for detailed parsing and validation.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "crates/oxide/src/main.rs",
+ "startLine": "24",
+ "endLine": "26",
+ "relevantVariables": [
+ "machine.next",
+ "MachineState::Done"
+ ]
+ },
+ "inputDataExample": "{\"candidate\": \"[mask:url(image.png)]\"}",
+ "outputDataExample": "{\"candidate\": \"[mask:url(image.png)]\"}"
+ },
+ {
+ "simStepId": "f10ece63-581a-4070-a21e-75ec0d3aa8fc",
+ "diagramNodeId": "44c24163-1fdf-42f0-899c-e799a3f77cd3",
+ "simStepLabel": "[Flow 2: Arbitrary Property] Dispatching to Arbitrary Property Parser",
+ "simStepDescription": "The `UtilityMachine` inspects the candidate string. Because `[mask:url(image.png)]` starts with an opening square bracket `[`, it is identified as an arbitrary property, and the task is delegated to the `ArbitraryPropertyMachine`.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "crates/oxide/src/extractor/utility_machine.rs",
+ "startLine": "76",
+ "endLine": "83",
+ "relevantVariables": [
+ "parse_arbitrary_property",
+ "self.arbitrary_property_machine"
+ ]
+ },
+ "inputDataExample": "{\"candidate\": \"[mask:url(image.png)]\"}",
+ "outputDataExample": "{\"type\": \"ArbitraryProperty\", \"delegate_to\": \"ArbitraryPropertyMachine\"}"
+ },
+ {
+ "simStepId": "9e30212a-9fb1-4f67-a44d-a149c8a8a570",
+ "diagramNodeId": "4b981a5d-91b7-4299-a84c-d909e0bc2790",
+ "simStepLabel": "[Flow 2: Arbitrary Property] Delegating to `ArbitraryPropertyMachine`",
+ "simStepDescription": "The `UtilityMachine` directly invokes the `ArbitraryPropertyMachine` to parse the entire `[property:value]` string.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "crates/oxide/src/extractor/utility_machine.rs",
+ "startLine": "77",
+ "endLine": "77",
+ "relevantVariables": [
+ "self.arbitrary_property_machine.next"
+ ]
+ },
+ "inputDataExample": "{\"candidate\": \"[mask:url(image.png)]\"}",
+ "outputDataExample": "{\"candidate\": \"[mask:url(image.png)]\"}"
+ },
+ {
+ "simStepId": "d4c22b52-6478-4320-a872-e2b7e794fe68",
+ "diagramNodeId": "9c8af2d1-2339-49c1-8ad9-8f3cd3586c85",
+ "simStepLabel": "[Flow 2: Arbitrary Property] Parsing the Arbitrary Property",
+ "simStepDescription": "The `ArbitraryPropertyMachine` parses the entire structure, identifying the CSS property (`mask`) and its value (`url(image.png)`), ensuring the syntax is correct before signaling completion.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "crates/oxide/src/extractor/utility_machine.rs",
+ "startLine": "15",
+ "endLine": "19",
+ "relevantVariables": [
+ "UtilityMachine",
+ "arbitrary_property_machine"
+ ]
+ },
+ "inputDataExample": "{\"string_to_parse\": \"[mask:url(image.png)]\"}",
+ "outputDataExample": "{\"property\": \"mask\", \"value\": \"url(image.png)\", \"status\": \"Done\"}"
+ },
+ {
+ "simStepId": "1ae9bc98-aade-4800-acd6-5e9111c4b755",
+ "diagramNodeId": "",
+ "simStepLabel": "[Flow 2: Arbitrary Property] Returning Full Candidate",
+ "simStepDescription": "The `ArbitraryPropertyMachine` returns a `Done` state, and the `UtilityMachine` finalizes the extraction of the complete and valid candidate string `[mask:url(image.png)]`.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "crates/oxide/src/extractor/utility_machine.rs",
+ "startLine": "78",
+ "endLine": "82",
+ "relevantVariables": [
+ "MachineState::Done"
+ ]
+ },
+ "inputDataExample": "{\"full_candidate\": \"[mask:url(image.png)]\", \"status\": \"Done\"}",
+ "outputDataExample": "{\"full_candidate\": \"[mask:url(image.png)]\", \"status\": \"Done\"}"
+ }
+ ],
+ "description": "- Arbitrary values provide a critical escape hatch, allowing developers to step outside the configured design system for one-off styles without writing custom CSS
- - Uses a square bracket notation
- to specify any CSS value directly in a class name, for example,
top-11px or w-calc(100%-2rem) - - Supports arbitrary properties for use cases not covered by core utilities, such as
mask:url( - )
- - This feature combines the speed of utility classes with the full power of CSS, significantly improving developer flexibility
",
+ "simulationNodesAndEdges": {
+ "4f41bf0d-8384-4e71-bc2c-9f0e0339f723": {
+ "simStepIds": [
+ "2c6a58c2-d3cd-4991-89f9-07f78e5f0a76"
+ ]
+ },
+ "472d0313-0159-4d94-98d5-54748570d4f8": {
+ "simStepIds": [
+ "bf62f504-9a6a-4026-b2e0-408d8f6515fd"
+ ]
+ },
+ "fc707279-942f-4c36-9f9d-4bf40c925b6b": {
+ "simStepIds": [
+ "8647727d-bf05-4ebb-909d-b3a4f14afc49"
+ ]
+ },
+ "40a97b17-fdf4-41ea-b3c6-d4ef9d04dc9d": {
+ "simStepIds": [
+ "03cba560-0826-4cf8-8711-6179a7eb8788"
+ ]
+ },
+ "44c24163-1fdf-42f0-899c-e799a3f77cd3": {
+ "simStepIds": [
+ "f10ece63-581a-4070-a21e-75ec0d3aa8fc"
+ ]
+ },
+ "9c8af2d1-2339-49c1-8ad9-8f3cd3586c85": {
+ "simStepIds": [
+ "d4c22b52-6478-4320-a872-e2b7e794fe68"
+ ]
+ },
+ "b291634d-3f95-4c4b-9840-cf6501d00551": {
+ "simStepIds": [
+ "6d448667-774a-41cc-8133-3d585557a540"
+ ]
+ },
+ "80fef34d-fa5b-4bc0-ae6b-56e1ba797ff6": {
+ "simStepIds": [
+ "de0f8d8d-b441-43d9-a031-d7ee0ff63817"
+ ]
+ },
+ "416fbe58-0110-44bc-a421-1a002303d6c2": {
+ "simStepIds": [
+ "79f40ae3-f086-4f90-8968-14c785bf35c9"
+ ]
+ },
+ "09230f36-fc8a-4d72-aa87-6507e2a022d7": {
+ "simStepIds": [
+ "af09b176-bdfd-4355-9404-3a43d29c5d33"
+ ]
+ },
+ "4b981a5d-91b7-4299-a84c-d909e0bc2790": {
+ "simStepIds": [
+ "9e30212a-9fb1-4f67-a44d-a149c8a8a570"
+ ]
+ }
+ },
+ "isAIGenerated": true,
+ "keywords": "arbitrary_value_machine, arbitrary_property_machine, square brackets",
+ "generationPrompt": "Using One-Off, Arbitrary Values for Styles Directly in HTML",
+ "generationKeywords": "arbitrary_value_machine, arbitrary_property_machine, square brackets"
+ },
+ "Composing Utilities and Accessing Theme Values in Custom CSS": {
+ "name": "Composing Utilities and Accessing Theme Values in Custom CSS",
+ "simSteps": [
+ {
+ "simStepId": "0eb15c43-6535-4dfd-bb33-4482340935ae",
+ "diagramNodeId": "2d86d61e-2014-48e5-a434-d6beade9b810",
+ "simStepLabel": "Parse CSS Input",
+ "simStepDescription": "The Tailwind CSS engine starts by parsing the input CSS file. It reads the custom CSS rules and converts them into an Abstract Syntax Tree (AST). This structured representation allows Tailwind to understand and manipulate the CSS, identifying directives like `@apply` and functions like `theme()`.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/css-parser.test.ts",
+ "startLine": "755",
+ "endLine": "763",
+ "relevantVariables": [
+ "parse",
+ "@apply"
+ ]
+ },
+ "inputDataExample": "{\n \"css\": \".btn-primary { background-color: theme('colors.blue.500'); @apply font-bold py-2 px-4 rounded; }\"\n}",
+ "outputDataExample": "{\n \"ast\": {\n \"kind\": \"root\",\n \"nodes\": [\n {\n \"kind\": \"rule\",\n \"selector\": \".btn-primary\",\n \"nodes\": [\n {\n \"kind\": \"declaration\",\n \"property\": \"background-color\",\n \"value\": \"theme('colors.blue.500')\"\n },\n {\n \"kind\": \"at-rule\",\n \"name\": \"@apply\",\n \"params\": \"font-bold py-2 px-4 rounded\"\n }\n ]\n }\n ]\n }\n}"
+ },
+ {
+ "simStepId": "3f54b0c2-b2df-4c78-8b4f-01d3868c74fd",
+ "diagramNodeId": "6210865c-e504-46b2-a3a8-f428c024d737",
+ "simStepLabel": "Pass AST for Transformations",
+ "simStepDescription": "The initial AST is passed to the transformation modules to resolve Tailwind-specific syntax.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/index.ts",
+ "startLine": "672",
+ "endLine": "675",
+ "relevantVariables": [
+ "ast",
+ "designSystem"
+ ]
+ },
+ "inputDataExample": "{\n \"ast\": {\n \"kind\": \"root\",\n \"nodes\": [\n {\n \"kind\": \"rule\",\n \"selector\": \".btn-primary\",\n \"nodes\": [\n {\n \"kind\": \"declaration\",\n \"property\": \"background-color\",\n \"value\": \"theme('colors.blue.500')\"\n },\n {\n \"kind\": \"at-rule\",\n \"name\": \"@apply\",\n \"params\": \"font-bold py-2 px-4 rounded\"\n }\n ]\n }\n ]\n }\n}",
+ "outputDataExample": "{\n \"ast\": {\n \"kind\": \"root\",\n \"nodes\": [\n {\n \"kind\": \"rule\",\n \"selector\": \".btn-primary\",\n \"nodes\": [\n {\n \"kind\": \"declaration\",\n \"property\": \"background-color\",\n \"value\": \"theme('colors.blue.500')\"\n },\n {\n \"kind\": \"at-rule\",\n \"name\": \"@apply\",\n \"params\": \"font-bold py-2 px-4 rounded\"\n }\n ]\n }\n ]\n }\n}"
+ },
+ {
+ "simStepId": "2328c343-084d-4465-aa48-14a08a41c4ae",
+ "diagramNodeId": "612e5877-615a-428c-8dd8-d523cb649325",
+ "simStepLabel": "Resolve theme() Functions",
+ "simStepDescription": "The engine walks the AST and finds all instances of the `theme()` function. Each function call is resolved by looking up the specified path (e.g., 'colors.blue.500') in the design system's theme configuration. The `theme()` function is replaced with a CSS `var()` function that references the corresponding theme variable, including a fallback value.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/index.ts",
+ "startLine": "674",
+ "endLine": "674",
+ "relevantVariables": [
+ "substituteFunctions",
+ "ast",
+ "designSystem"
+ ]
+ },
+ "inputDataExample": "{\n \"ast\": {\n \"kind\": \"root\",\n \"nodes\": [\n {\n \"kind\": \"rule\",\n \"selector\": \".btn-primary\",\n \"nodes\": [\n {\n \"kind\": \"declaration\",\n \"property\": \"background-color\",\n \"value\": \"theme('colors.blue.500')\"\n },\n {\n \"kind\": \"at-rule\",\n \"name\": \"@apply\",\n \"params\": \"font-bold py-2 px-4 rounded\"\n }\n ]\n }\n ]\n }\n}",
+ "outputDataExample": "{\n \"ast\": {\n \"kind\": \"root\",\n \"nodes\": [\n {\n \"kind\": \"rule\",\n \"selector\": \".btn-primary\",\n \"nodes\": [\n {\n \"kind\": \"declaration\",\n \"property\": \"background-color\",\n \"value\": \"var(--color-blue-500, #3b82f6)\"\n },\n {\n \"kind\": \"at-rule\",\n \"name\": \"@apply\",\n \"params\": \"font-bold py-2 px-4 rounded\"\n }\n ]\n }\n ]\n }\n}"
+ },
+ {
+ "simStepId": "24aef2ff-e1cd-483d-aad3-1c8684f5ca54",
+ "diagramNodeId": "63dc8986-1769-45c8-8a4b-bc6f5a7ee9b4",
+ "simStepLabel": "Pass Modified AST for @apply Processing",
+ "simStepDescription": "The AST, now with theme functions resolved, is passed to the `@apply` substitution module for further processing.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/index.ts",
+ "startLine": "674",
+ "endLine": "675",
+ "relevantVariables": [
+ "ast"
+ ]
+ },
+ "inputDataExample": "{\n \"ast\": {\n \"kind\": \"root\",\n \"nodes\": [\n {\n \"kind\": \"rule\",\n \"selector\": \".btn-primary\",\n \"nodes\": [\n {\n \"kind\": \"declaration\",\n \"property\": \"background-color\",\n \"value\": \"var(--color-blue-500, #3b82f6)\"\n },\n {\n \"kind\": \"at-rule\",\n \"name\": \"@apply\",\n \"params\": \"font-bold py-2 px-4 rounded\"\n }\n ]\n }\n ]\n }\n}",
+ "outputDataExample": "{\n \"ast\": {\n \"kind\": \"root\",\n \"nodes\": [\n {\n \"kind\": \"rule\",\n \"selector\": \".btn-primary\",\n \"nodes\": [\n {\n \"kind\": \"declaration\",\n \"property\": \"background-color\",\n \"value\": \"var(--color-blue-500, #3b82f6)\"\n },\n {\n \"kind\": \"at-rule\",\n \"name\": \"@apply\",\n \"params\": \"font-bold py-2 px-4 rounded\"\n }\n ]\n }\n ]\n }\n}"
+ },
+ {
+ "simStepId": "ee3a753a-f104-4033-ac7b-466c7d0ebd42",
+ "diagramNodeId": "f1932e5a-8499-4ccf-88be-0566eb54567d",
+ "simStepLabel": "Substitute @apply Directives",
+ "simStepDescription": "The engine processes `@apply` directives. It parses the list of utility classes, looks up the corresponding CSS rules for each class in the design system, and replaces the `@apply` directive with the raw CSS declarations. This effectively inlines the utility styles into the custom class.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/apply.ts",
+ "startLine": "5",
+ "endLine": "39",
+ "relevantVariables": [
+ "substituteAtApply",
+ "ast",
+ "designSystem",
+ "parents",
+ "dependencies"
+ ]
+ },
+ "inputDataExample": "{\n \"ast\": {\n \"kind\": \"root\",\n \"nodes\": [\n {\n \"kind\": \"rule\",\n \"selector\": \".btn-primary\",\n \"nodes\": [\n {\n \"kind\": \"declaration\",\n \"property\": \"background-color\",\n \"value\": \"var(--color-blue-500, #3b82f6)\"\n },\n {\n \"kind\": \"at-rule\",\n \"name\": \"@apply\",\n \"params\": \"font-bold py-2 px-4 rounded\"\n }\n ]\n }\n ]\n }\n}",
+ "outputDataExample": "{\n \"ast\": {\n \"kind\": \"root\",\n \"nodes\": [\n {\n \"kind\": \"rule\",\n \"selector\": \".btn-primary\",\n \"nodes\": [\n {\n \"kind\": \"declaration\",\n \"property\": \"background-color\",\n \"value\": \"var(--color-blue-500, #3b82f6)\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"border-radius\",\n \"value\": \"0.25rem\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"font-weight\",\n \"value\": \"700\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"padding-left\",\n \"value\": \"1rem\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"padding-right\",\n \"value\": \"1rem\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"padding-top\",\n \"value\": \"0.5rem\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"padding-bottom\",\n \"value\": \"0.5rem\"\n }\n ]\n }\n ]\n }\n}"
+ },
+ {
+ "simStepId": "17346dec-5508-4621-a03a-041b9334ef56",
+ "diagramNodeId": "6fb30581-60f8-4314-b0f1-efdeac97744f",
+ "simStepLabel": "Pass Final AST to CSS Generator",
+ "simStepDescription": "The fully processed AST, with all directives and functions resolved, is passed to the CSS generator.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/apply.ts",
+ "startLine": "285",
+ "endLine": "285",
+ "relevantVariables": [
+ "ast"
+ ]
+ },
+ "inputDataExample": "{\n \"ast\": {\n \"kind\": \"root\",\n \"nodes\": [\n {\n \"kind\": \"rule\",\n \"selector\": \".btn-primary\",\n \"nodes\": [\n {\n \"kind\": \"declaration\",\n \"property\": \"background-color\",\n \"value\": \"var(--color-blue-500, #3b82f6)\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"border-radius\",\n \"value\": \"0.25rem\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"font-weight\",\n \"value\": \"700\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"padding-left\",\n \"value\": \"1rem\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"padding-right\",\n \"value\": \"1rem\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"padding-top\",\n \"value\": \"0.5rem\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"padding-bottom\",\n \"value\": \"0.5rem\"\n }\n ]\n }\n ]\n }\n}",
+ "outputDataExample": "{\n \"ast\": {\n \"kind\": \"root\",\n \"nodes\": [\n {\n \"kind\": \"rule\",\n \"selector\": \".btn-primary\",\n \"nodes\": [\n {\n \"kind\": \"declaration\",\n \"property\": \"background-color\",\n \"value\": \"var(--color-blue-500, #3b82f6)\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"border-radius\",\n \"value\": \"0.25rem\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"font-weight\",\n \"value\": \"700\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"padding-left\",\n \"value\": \"1rem\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"padding-right\",\n \"value\": \"1rem\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"padding-top\",\n \"value\": \"0.5rem\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"padding-bottom\",\n \"value\": \"0.5rem\"\n }\n ]\n }\n ]\n }\n}"
+ },
+ {
+ "simStepId": "f5348025-a9a1-4beb-836d-066db79336ce",
+ "diagramNodeId": "433d52fd-76f6-44b3-9634-9d1c1b97b8f5",
+ "simStepLabel": "Generate Final CSS",
+ "simStepDescription": "The final AST is serialized back into a CSS string. The resulting CSS contains standard CSS rules that browsers can understand, with all Tailwind-specific syntax compiled away. This output is ready to be included in the final stylesheet.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/ast.bench.ts",
+ "startLine": "21",
+ "endLine": "24",
+ "relevantVariables": [
+ "toCss",
+ "ast"
+ ]
+ },
+ "inputDataExample": "{\n \"ast\": {\n \"kind\": \"root\",\n \"nodes\": [\n {\n \"kind\": \"rule\",\n \"selector\": \".btn-primary\",\n \"nodes\": [\n {\n \"kind\": \"declaration\",\n \"property\": \"background-color\",\n \"value\": \"var(--color-blue-500, #3b82f6)\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"border-radius\",\n \"value\": \"0.25rem\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"font-weight\",\n \"value\": \"700\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"padding-left\",\n \"value\": \"1rem\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"padding-right\",\n \"value\": \"1rem\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"padding-top\",\n \"value\": \"0.5rem\"\n },\n {\n \"kind\": \"declaration\",\n \"property\": \"padding-bottom\",\n \"value\": \"0.5rem\"\n }\n ]\n }\n ]\n }\n}",
+ "outputDataExample": "{\n \"css\": \".btn-primary {\\n background-color: var(--color-blue-500, #3b82f6);\\n border-radius: 0.25rem;\\n font-weight: 700;\\n padding-left: 1rem;\\n padding-right: 1rem;\\n padding-top: 0.5rem;\\n padding-bottom: 0.5rem;\\n}\"\n}"
+ }
+ ],
+ "description": "- These features bridge the gap between utility-first development and traditional CSS, allowing for cleaner code and better organization
- - The
@apply directive allows developers to compose existing utility classes into a new, single custom CSS rule, which is useful for extracting component patterns - - The
theme() function provides access to the project's design system values (colors, spacing, etc - ) from within custom CSS, ensuring consistency
- - Both features are processed by the Tailwind engine, ensuring they are fully integrated with the framework's variants and other features
",
+ "simulationNodesAndEdges": {
+ "2d86d61e-2014-48e5-a434-d6beade9b810": {
+ "simStepIds": [
+ "0eb15c43-6535-4dfd-bb33-4482340935ae"
+ ]
+ },
+ "612e5877-615a-428c-8dd8-d523cb649325": {
+ "simStepIds": [
+ "2328c343-084d-4465-aa48-14a08a41c4ae"
+ ]
+ },
+ "f1932e5a-8499-4ccf-88be-0566eb54567d": {
+ "simStepIds": [
+ "ee3a753a-f104-4033-ac7b-466c7d0ebd42"
+ ]
+ },
+ "433d52fd-76f6-44b3-9634-9d1c1b97b8f5": {
+ "simStepIds": [
+ "f5348025-a9a1-4beb-836d-066db79336ce"
+ ]
+ },
+ "6210865c-e504-46b2-a3a8-f428c024d737": {
+ "simStepIds": [
+ "3f54b0c2-b2df-4c78-8b4f-01d3868c74fd"
+ ]
+ },
+ "63dc8986-1769-45c8-8a4b-bc6f5a7ee9b4": {
+ "simStepIds": [
+ "24aef2ff-e1cd-483d-aad3-1c8684f5ca54"
+ ]
+ },
+ "6fb30581-60f8-4314-b0f1-efdeac97744f": {
+ "simStepIds": [
+ "17346dec-5508-4621-a03a-041b9334ef56"
+ ]
+ }
+ },
+ "isAIGenerated": true,
+ "keywords": "substituteAtApply, @apply, theme()",
+ "generationPrompt": "Composing Utilities and Accessing Theme Values in Custom CSS",
+ "generationKeywords": "substituteAtApply, @apply, theme()"
+ },
+ "Compiling CSS from the Command Line for Builds and Watching Changes": {
+ "name": "Compiling CSS from the Command Line for Builds and Watching Changes",
+ "simSteps": [
+ {
+ "simStepId": "fa981cdc-06e1-400e-aaa5-91cdb7f9e856",
+ "diagramNodeId": "ce22e949-cfba-4bd5-aca8-b2550b40c5f8",
+ "simStepLabel": "CLI: Start CLI Execution",
+ "simStepDescription": "A user runs the Tailwind CSS CLI with arguments for input, output, and watch mode (e.g., `tailwindcss -i input.css -o output.css --watch`). The main script at `packages/@tailwindcss-cli/src/index.ts` serves as the entry point, responsible for parsing these command-line arguments.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-cli/src/index.ts",
+ "startLine": "11",
+ "endLine": "17",
+ "relevantVariables": [
+ "args",
+ "build.options"
+ ]
+ },
+ "inputDataExample": "{\"argv\": [\"/usr/bin/node\", \"/path/to/project/node_modules/.bin/tailwindcss\", \"--input\", \"src/input.css\", \"--output\", \"dist/output.css\", \"--watch\"]}",
+ "outputDataExample": "{\"_\": [], \"--input\": \"src/input.css\", \"--output\": \"dist/output.css\", \"--watch\": true}"
+ },
+ {
+ "simStepId": "a91cd2ac-17eb-4d88-afd4-18df2bf19159",
+ "diagramNodeId": "e217e9a0-1864-4fb7-8ba3-3f359797fd6c",
+ "simStepLabel": "CLI: Pass Parsed Arguments to Build Handler",
+ "simStepDescription": "The parsed argument object is passed to the dedicated build command handler, which orchestrates the entire compilation and watching process.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-cli/src/index.ts",
+ "startLine": "48",
+ "endLine": "48",
+ "relevantVariables": [
+ "build.handle"
+ ]
+ },
+ "inputDataExample": "{\"_\": [], \"--input\": \"src/input.css\", \"--output\": \"dist/output.css\", \"--watch\": true}",
+ "outputDataExample": "{\"_\": [], \"--input\": \"src/input.css\", \"--output\": \"dist/output.css\", \"--watch\": true}"
+ },
+ {
+ "simStepId": "6e16fb9e-1fea-4158-8326-353b2ad48b5e",
+ "diagramNodeId": "32ce5d1a-ff8c-4b34-8fc3-91470258a973",
+ "simStepLabel": "Build: Setup Compiler for Initial Build",
+ "simStepDescription": "The build handler invokes the core `compile` function from the `tailwindcss` package. This function reads the input CSS file content, parses it into an Abstract Syntax Tree (AST), and sets up the design system and compilation context for generating CSS.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/index.ts",
+ "startLine": "824",
+ "endLine": "843",
+ "relevantVariables": [
+ "compile",
+ "compileAst"
+ ]
+ },
+ "inputDataExample": "{\"css\": \"@tailwind base;\\n@tailwind components;\\n@tailwind utilities;\", \"options\": {\"from\": \"/path/to/project/src/input.css\"}}",
+ "outputDataExample": "{\"compiler\": { \"features\": \"All\", \"designSystem\": { /* ... */ } }}"
+ },
+ {
+ "simStepId": "70683ff5-fdf7-4d33-bb07-b7cf7733278f",
+ "diagramNodeId": "290e80b5-a44f-4568-9ac9-8fdd8676baea",
+ "simStepLabel": "Build: Request Content File Scan",
+ "simStepDescription": "To determine which CSS to generate, the compiler initiates a scan of the project's content files to find all used utility classes. This process is handled by the high-performance `@tailwindcss/oxide` engine written in Rust.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "crates/oxide/src/scanner/mod.rs",
+ "startLine": "644",
+ "endLine": "651",
+ "relevantVariables": [
+ "WalkBuilder::new",
+ "builder.follow_links",
+ "builder.hidden"
+ ]
+ },
+ "inputDataExample": "{\"sources\": [{\"base\": \"/path/to/project/src\", \"pattern\": \"**/*.html\"}]}",
+ "outputDataExample": "{\"sources\": [{\"base\": \"/path/to/project/src\", \"pattern\": \"**/*.html\"}]}"
+ },
+ {
+ "simStepId": "13a986da-a534-4196-b808-d8de4f9a0a8a",
+ "diagramNodeId": "4c9420c8-ece0-49f6-b67e-e14498394096",
+ "simStepLabel": "Scanner: Traverse Directories and Extract Classes",
+ "simStepDescription": "The scanner uses `WalkBuilder` from the `ignore` crate to efficiently traverse the file system, respecting rules from files like `.gitignore`. For each matched content file, it scans the content and extracts a list of potential Tailwind CSS class candidates.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "crates/ignore/src/walk.rs",
+ "startLine": "537",
+ "endLine": "546",
+ "relevantVariables": [
+ "WalkBuilder::build"
+ ]
+ },
+ "inputDataExample": "{\"filePath\": \"/path/to/project/src/index.html\", \"content\": \"Hello
\"}",
+ "outputDataExample": "{\"candidates\": [\"text-2xl\", \"font-bold\"]}"
+ },
+ {
+ "simStepId": "1dc55af9-80f5-4fe9-9d6a-11f103fefea0",
+ "diagramNodeId": "89bdc94c-6450-4658-9b0d-aa0c274959b3",
+ "simStepLabel": "Scanner: Return Class Candidates",
+ "simStepDescription": "The complete list of unique class candidates found across all content files is passed back to the JavaScript-based core compiler.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/index.ts",
+ "startLine": "747",
+ "endLine": "747",
+ "relevantVariables": [
+ "build(newRawCandidates)"
+ ]
+ },
+ "inputDataExample": "{\"candidates\": [\"text-2xl\", \"font-bold\", \"underline\", \"p-4\"]}",
+ "outputDataExample": "{\"candidates\": [\"text-2xl\", \"font-bold\", \"underline\", \"p-4\"]}"
+ },
+ {
+ "simStepId": "0da50755-36e5-481e-9ab4-3d0ec52133ba",
+ "diagramNodeId": "c066f1d3-dad7-4966-a0a9-bd83e510dc78",
+ "simStepLabel": "Compiler: Generate CSS from Candidates",
+ "simStepDescription": "The compiler's `build` method takes the list of candidates, resolves them against the design system and utilities, and generates the final CSS string containing all necessary rules.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/index.ts",
+ "startLine": "747",
+ "endLine": "755",
+ "relevantVariables": [
+ "build",
+ "compileCandidates"
+ ]
+ },
+ "inputDataExample": "{\"candidates\": [\"text-2xl\", \"font-bold\", \"underline\", \"p-4\"]}",
+ "outputDataExample": "{\"css\": \".p-4 { padding: 1rem; }\\n.text-2xl { font-size: 1.5rem; line-height: 2rem; }\\n/* ... */\"}"
+ },
+ {
+ "simStepId": "4d57d59d-e65b-4b85-964d-d80e5d3be373",
+ "diagramNodeId": "e203c8d1-3b36-4586-a850-4cc923b3218e",
+ "simStepLabel": "Compiler: Provide Generated CSS for Output",
+ "simStepDescription": "The generated CSS string is passed from the core compiler back to the CLI command handler, ready to be written to the output file.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "integrations/cli/index.test.ts",
+ "startLine": "24",
+ "endLine": "95",
+ "relevantVariables": [
+ "exec(`${command} --input src/index.css --output dist/out.css`)"
+ ]
+ },
+ "inputDataExample": "{\"css\": \".p-4 { padding: 1rem; }\\n.text-2xl { font-size: 1.5rem; line-height: 2rem; }\\n/* ... */\"}",
+ "outputDataExample": "{\"css\": \".p-4 { padding: 1rem; }\\n.text-2xl { font-size: 1.5rem; line-height: 2rem; }\\n/* ... */\"}"
+ },
+ {
+ "simStepId": "e6753a9e-15a6-4ac3-8323-44b208eff2a9",
+ "diagramNodeId": "044494ec-c43c-4350-b8db-0c269d1b3b2b",
+ "simStepLabel": "CLI: Write Output and Start Watcher",
+ "simStepDescription": "The CLI handler writes the generated CSS to the specified output file. Since the `--watch` flag was used, it then initializes a file system watcher (using `@parcel/watcher`) to monitor all content files and CSS dependencies for changes.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "integrations/cli/index.test.ts",
+ "startLine": "298",
+ "endLine": "306",
+ "relevantVariables": [
+ "spawn(`${command} --input src/index.css --output dist/out.css --watch`)"
+ ]
+ },
+ "inputDataExample": "{\"outputFile\": \"dist/output.css\", \"css\": \".p-4 { padding: 1rem; }\", \"watchPaths\": [\"./src/**/*.html\", \"src/input.css\"]}",
+ "outputDataExample": "{\"status\": \"Rebuild finished in Xms.\\nWatching for changes...\"}"
+ },
+ {
+ "simStepId": "8fa8985c-1028-43e0-8392-ef60baa2105c",
+ "diagramNodeId": "7ca7617c-1daf-49dd-9b25-2a613f5af8e0",
+ "simStepLabel": "Watcher: Detect and Emit File Change Event",
+ "simStepDescription": "A user saves a change to a content file, for example, adding a new class `mt-8`. The file system watcher detects this change and emits an event with the path of the modified file.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "pnpm-lock.yaml",
+ "startLine": "210",
+ "endLine": "218",
+ "relevantVariables": [
+ "'@parcel/watcher'"
+ ]
+ },
+ "inputDataExample": "{\"event\": \"change\", \"path\": \"/path/to/project/src/index.html\"}",
+ "outputDataExample": "{\"event\": \"change\", \"path\": \"/path/to/project/src/index.html\"}"
+ },
+ {
+ "simStepId": "7d1f3c46-2e32-4199-8d44-2ee319345f57",
+ "diagramNodeId": "def0383c-7001-4728-a66f-35e369246e9b",
+ "simStepLabel": "CLI: Trigger Incremental Rebuild",
+ "simStepDescription": "The CLI's event handler receives the file change event and triggers an incremental rebuild. It re-scans the necessary files to update its list of utility class candidates.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "integrations/cli/index.test.ts",
+ "startLine": "298",
+ "endLine": "306",
+ "relevantVariables": [
+ "spawn(`${command} --input src/index.css --output dist/out.css --watch`)"
+ ]
+ },
+ "inputDataExample": "{\"changedFile\": \"/path/to/project/src/index.html\"}",
+ "outputDataExample": "{\"updatedCandidates\": [\"text-2xl\", \"font-bold\", \"underline\", \"p-4\", \"mt-8\"]}"
+ },
+ {
+ "simStepId": "a00534cf-b62f-4cec-8ccb-baec18d421d8",
+ "diagramNodeId": "c154d024-5aaa-465a-84bf-31261cfbae3b",
+ "simStepLabel": "Build: Pass Updated Candidates to Compiler",
+ "simStepDescription": "The newly updated list of all required utility classes is passed back to the core compiler's `build` function for CSS regeneration.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/index.ts",
+ "startLine": "747",
+ "endLine": "747",
+ "relevantVariables": [
+ "build(newRawCandidates)"
+ ]
+ },
+ "inputDataExample": "{\"candidates\": [\"text-2xl\", \"font-bold\", \"underline\", \"p-4\", \"mt-8\"]}",
+ "outputDataExample": "{\"candidates\": [\"text-2xl\", \"font-bold\", \"underline\", \"p-4\", \"mt-8\"]}"
+ },
+ {
+ "simStepId": "2053de67-31dc-4f8c-88cc-232e376872e9",
+ "diagramNodeId": "642ba4d6-5732-430d-a489-e69bae067bf8",
+ "simStepLabel": "Compiler: Regenerate CSS",
+ "simStepDescription": "The compiler processes the updated list of candidates, generating a new CSS string that includes rules for any newly added classes (like `mt-8`).",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/index.ts",
+ "startLine": "747",
+ "endLine": "755",
+ "relevantVariables": [
+ "build",
+ "compileCandidates"
+ ]
+ },
+ "inputDataExample": "{\"candidates\": [\"text-2xl\", \"font-bold\", \"underline\", \"p-4\", \"mt-8\"]}",
+ "outputDataExample": "{\"css\": \".p-4 { ... }\\n.mt-8 { margin-top: 2rem; }\\n/* ... */\"}"
+ },
+ {
+ "simStepId": "738566df-3531-465b-bcb3-9ca71c481ace",
+ "diagramNodeId": "98b96734-7f00-4974-9637-bc7e9cbdff7e",
+ "simStepLabel": "Compiler: Provide Updated CSS for Output",
+ "simStepDescription": "The newly generated CSS string is passed from the core compiler back to the CLI command handler.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "integrations/cli/index.test.ts",
+ "startLine": "298",
+ "endLine": "306",
+ "relevantVariables": [
+ "spawn(`${command} --input src/index.css --output dist/out.css --watch`)"
+ ]
+ },
+ "inputDataExample": "{\"css\": \".p-4 { ... }\\n.mt-8 { margin-top: 2rem; }\\n/* ... */\"}",
+ "outputDataExample": "{\"css\": \".p-4 { ... }\\n.mt-8 { margin-top: 2rem; }\\n/* ... */\"}"
+ },
+ {
+ "simStepId": "20480b42-f302-4806-bc81-b904a6cb5d62",
+ "diagramNodeId": "62cea20d-3fce-4730-a177-ce56751d0ac4",
+ "simStepLabel": "CLI: Overwrite Output File and Wait",
+ "simStepDescription": "The CLI handler overwrites the output file with the updated CSS content. The process then returns to a waiting state, listening for subsequent file changes.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "integrations/cli/index.test.ts",
+ "startLine": "298",
+ "endLine": "306",
+ "relevantVariables": [
+ "spawn(`${command} --input src/index.css --output dist/out.css --watch`)"
+ ]
+ },
+ "inputDataExample": "{\"outputFile\": \"dist/output.css\", \"css\": \".p-4 { ... }\\n.mt-8 { margin-top: 2rem; }\"}",
+ "outputDataExample": "{\"status\": \"Rebuild finished in Yms.\\nWatching for changes...\"}"
+ }
+ ],
+ "description": "- The standalone CLI makes Tailwind accessible to a wider range of projects, especially those without a complex JavaScript build setup
- - Provides a command-line interface (
tailwindcss) to compile CSS files with full support for all framework features - - Includes a
--watch mode that automatically recompiles CSS as content files or stylesheets are changed - - Offers options for minifying output and generating source maps, making it a viable tool for production builds
",
+ "simulationNodesAndEdges": {
+ "ce22e949-cfba-4bd5-aca8-b2550b40c5f8": {
+ "simStepIds": [
+ "fa981cdc-06e1-400e-aaa5-91cdb7f9e856"
+ ]
+ },
+ "32ce5d1a-ff8c-4b34-8fc3-91470258a973": {
+ "simStepIds": [
+ "6e16fb9e-1fea-4158-8326-353b2ad48b5e"
+ ]
+ },
+ "4c9420c8-ece0-49f6-b67e-e14498394096": {
+ "simStepIds": [
+ "13a986da-a534-4196-b808-d8de4f9a0a8a"
+ ]
+ },
+ "c066f1d3-dad7-4966-a0a9-bd83e510dc78": {
+ "simStepIds": [
+ "0da50755-36e5-481e-9ab4-3d0ec52133ba"
+ ]
+ },
+ "044494ec-c43c-4350-b8db-0c269d1b3b2b": {
+ "simStepIds": [
+ "e6753a9e-15a6-4ac3-8323-44b208eff2a9"
+ ]
+ },
+ "def0383c-7001-4728-a66f-35e369246e9b": {
+ "simStepIds": [
+ "7d1f3c46-2e32-4199-8d44-2ee319345f57"
+ ]
+ },
+ "642ba4d6-5732-430d-a489-e69bae067bf8": {
+ "simStepIds": [
+ "2053de67-31dc-4f8c-88cc-232e376872e9"
+ ]
+ },
+ "62cea20d-3fce-4730-a177-ce56751d0ac4": {
+ "simStepIds": [
+ "20480b42-f302-4806-bc81-b904a6cb5d62"
+ ]
+ },
+ "e217e9a0-1864-4fb7-8ba3-3f359797fd6c": {
+ "simStepIds": [
+ "a91cd2ac-17eb-4d88-afd4-18df2bf19159"
+ ]
+ },
+ "290e80b5-a44f-4568-9ac9-8fdd8676baea": {
+ "simStepIds": [
+ "70683ff5-fdf7-4d33-bb07-b7cf7733278f"
+ ]
+ },
+ "89bdc94c-6450-4658-9b0d-aa0c274959b3": {
+ "simStepIds": [
+ "1dc55af9-80f5-4fe9-9d6a-11f103fefea0"
+ ]
+ },
+ "e203c8d1-3b36-4586-a850-4cc923b3218e": {
+ "simStepIds": [
+ "4d57d59d-e65b-4b85-964d-d80e5d3be373"
+ ]
+ },
+ "7ca7617c-1daf-49dd-9b25-2a613f5af8e0": {
+ "simStepIds": [
+ "8fa8985c-1028-43e0-8392-ef60baa2105c"
+ ]
+ },
+ "c154d024-5aaa-465a-84bf-31261cfbae3b": {
+ "simStepIds": [
+ "a00534cf-b62f-4cec-8ccb-baec18d421d8"
+ ]
+ },
+ "98b96734-7f00-4974-9637-bc7e9cbdff7e": {
+ "simStepIds": [
+ "738566df-3531-465b-bcb3-9ca71c481ace"
+ ]
+ }
+ },
+ "isAIGenerated": true,
+ "keywords": "@tailwindcss-cli, build, --watch",
+ "generationPrompt": "Compiling CSS from the Command Line for Builds and Watching Changes",
+ "generationKeywords": "@tailwindcss-cli, build, --watch"
+ },
+ "Automating Project Upgrades to Newer Framework Versions": {
+ "name": "Automating Project Upgrades to Newer Framework Versions",
+ "simSteps": [
+ {
+ "simStepId": "ce816b1a-1bf4-4eb6-94b0-027562d885d1",
+ "diagramNodeId": "7f7ba991-3b7e-4dae-8dfc-40e36d069f27",
+ "simStepLabel": "Start Upgrade & Discover Files",
+ "simStepDescription": "The user runs the `@tailwindcss/upgrade` CLI command. The main `run` function is executed, which parses arguments, discovers all stylesheets (`.css` files), analyzes them for Tailwind directives, and links them to any relevant `tailwind.config.js` files.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-upgrade/src/index.ts",
+ "startLine": "118",
+ "endLine": "132",
+ "relevantVariables": [
+ "run",
+ "analyzeStylesheets",
+ "linkConfigsToStylesheets",
+ "stylesheets"
+ ]
+ },
+ "inputDataExample": "{\n \"command\": \"npx @tailwindcss/upgrade\",\n \"args\": [\"--force\"]\n}",
+ "outputDataExample": "{\n \"stylesheets\": [\n {\n \"file\": \"/path/to/project/src/input.css\",\n \"isTailwindRoot\": true,\n \"linkedConfigPath\": \"/path/to/project/tailwind.config.js\"\n }\n ]\n}"
+ },
+ {
+ "simStepId": "bbd429dc-f5fc-47d5-b55e-638177453e6e",
+ "diagramNodeId": "b41098b9-4fd3-4aa6-b994-bc0890fcb1f3",
+ "simStepLabel": "JS Config Path to Migrator",
+ "simStepDescription": "The paths to discovered `tailwind.config.js` files, linked to their respective stylesheets, are passed to the configuration migration module.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-upgrade/src/index.ts",
+ "startLine": "158",
+ "endLine": "162",
+ "relevantVariables": [
+ "migrateJsConfig",
+ "config.configFilePath"
+ ]
+ },
+ "inputDataExample": "{\n \"stylesheets\": [\n {\n \"file\": \"/path/to/project/src/input.css\",\n \"isTailwindRoot\": true,\n \"linkedConfigPath\": \"/path/to/project/tailwind.config.js\"\n }\n ]\n}",
+ "outputDataExample": "{\n \"stylesheets\": [\n {\n \"file\": \"/path/to/project/src/input.css\",\n \"isTailwindRoot\": true,\n \"linkedConfigPath\": \"/path/to/project/tailwind.config.js\"\n }\n ]\n}"
+ },
+ {
+ "simStepId": "93199260-e2ea-489d-8592-77a7f0899362",
+ "diagramNodeId": "3b4d3048-762b-4580-a286-1d88980975f4",
+ "simStepLabel": "Migrate JS Config to CSS Format",
+ "simStepDescription": "For each project configuration, `migrateJsConfig` reads the `tailwind.config.js` file and converts its static values (like `theme`, `content`, `darkMode`) into the new CSS-based configuration format used in Tailwind CSS v4. This is a core part of the v3 to v4 migration.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts",
+ "startLine": "42",
+ "endLine": "107",
+ "relevantVariables": [
+ "migrateJsConfig",
+ "canMigrateConfig",
+ "migrateContent",
+ "migrateTheme",
+ "migrateDarkMode"
+ ]
+ },
+ "inputDataExample": "{\n \"fullConfigPath\": \"/path/to/project/tailwind.config.js\",\n \"configContent\": \"module.exports = { theme: { extend: { colors: { primary: '#ff0000' } } } }\"\n}",
+ "outputDataExample": "{\n \"css\": \"@theme {\\n --color-primary: #ff0000;\\n}\",\n \"sources\": [\n {\n \"base\": \"/path/to/project\",\n \"pattern\": \"./src/**/*.{html,js}\"\n }\n ],\n \"plugins\": []\n}"
+ },
+ {
+ "simStepId": "010015a1-3199-4b55-9673-1bcb48054d7e",
+ "diagramNodeId": "2aec4fd3-67b4-4b90-ae7f-2a1907c1cdf4",
+ "simStepLabel": "Migrated Config to CSS Migrator",
+ "simStepDescription": "The resulting CSS configuration string and the list of stylesheets are passed to the CSS migration pipeline.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-upgrade/src/index.ts",
+ "startLine": "195",
+ "endLine": "203",
+ "relevantVariables": [
+ "migrateStylesheet",
+ "jsConfigMigrationBySheet"
+ ]
+ },
+ "inputDataExample": "{\n \"jsConfigMigration\": {\n \"css\": \"@theme {\\n --color-primary: #ff0000;\\n}\",\n \"sources\": [],\n \"plugins\": []\n },\n \"sheet\": {\n \"file\": \"/path/to/project/src/input.css\",\n \"isTailwindRoot\": true\n }\n}",
+ "outputDataExample": "{\n \"jsConfigMigration\": {\n \"css\": \"@theme {\\n --color-primary: #ff0000;\\n}\",\n \"sources\": [],\n \"plugins\": []\n },\n \"sheet\": {\n \"file\": \"/path/to/project/src/input.css\",\n \"isTailwindRoot\": true\n }\n}"
+ },
+ {
+ "simStepId": "e92a32ae-c3cc-45c5-b6a2-c33fd48f023c",
+ "diagramNodeId": "98b7b7d2-1f96-462e-a79c-6832c9fa94f2",
+ "simStepLabel": "Apply Codemods to CSS Files",
+ "simStepDescription": "The `migrateContents` function processes each CSS file using a PostCSS pipeline. It applies a series of codemods that transform CSS at-rules like `@tailwind`, `@apply`, `@layer`, and `theme()` functions to their v4 equivalents. The migrated JS config is also injected as an `@theme` block.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-upgrade/src/codemods/css/migrate.ts",
+ "startLine": "47",
+ "endLine": "58",
+ "relevantVariables": [
+ "migrateContents",
+ "postcss",
+ "migrateImport",
+ "migrateAtApply",
+ "migrateAtLayerUtilities",
+ "migrateTailwindDirectives",
+ "migrateConfig",
+ "migrateThemeToVar"
+ ]
+ },
+ "inputDataExample": "{\n \"stylesheetContent\": \"@tailwind base;\\n@tailwind components;\\n@tailwind utilities;\\n\\n.btn {\\n @apply px-4 py-2 rounded;\\n}\",\n \"migratedJsConfigCss\": \"@theme { --color-primary: red; }\"\n}",
+ "outputDataExample": "{\n \"migratedStylesheetContent\": \"@import 'tailwindcss';\\n\\n@theme { --color-primary: red; }\\n\\n@utility btn {\\n @apply px-4 py-2 rounded;\\n}\"\n}"
+ },
+ {
+ "simStepId": "7699f08f-a139-4b00-9f60-0d8641b9f7bb",
+ "diagramNodeId": "dbe65b41-4594-49d2-9023-421e4450573a",
+ "simStepLabel": "Design System to Template Migrator",
+ "simStepDescription": "After migrating the CSS, a v4-compatible `DesignSystem` is created. This design system, along with the list of content files (e.g., HTML, JSX) from the configuration, is passed to the template migration module to update class names.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-upgrade/src/index.ts",
+ "startLine": "322",
+ "endLine": "324",
+ "relevantVariables": [
+ "migrateTemplate",
+ "designSystem",
+ "userConfig"
+ ]
+ },
+ "inputDataExample": "{\n \"designSystem\": \"\",\n \"userConfig\": {\n \"content\": [\"./src/**/*.html\"]\n }\n}",
+ "outputDataExample": "{\n \"designSystem\": \"\",\n \"userConfig\": {\n \"content\": [\"./src/**/*.html\"]\n }\n}"
+ },
+ {
+ "simStepId": "1c3ec338-fdc9-4775-9293-8227945ffe56",
+ "diagramNodeId": "e3f5bdd8-ee3b-4437-b215-ec0703b10055",
+ "simStepLabel": "Migrate Classes in Template Files",
+ "simStepDescription": "The `migrateContents` function orchestrates the migration of template files. It reads each file, uses `extractRawCandidates` to find all potential class strings, and then calls `migrateCandidate` for each one to apply the necessary transformations.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts",
+ "startLine": "108",
+ "endLine": "129",
+ "relevantVariables": [
+ "migrateContents",
+ "extractRawCandidates",
+ "migrateCandidate",
+ "changes"
+ ]
+ },
+ "inputDataExample": "{\n \"contents\": \"\",\n \"extension\": \"html\"\n}",
+ "outputDataExample": "{\n \"newContents\": \"\"\n}"
+ },
+ {
+ "simStepId": "ce221095-bbe2-44b5-b6f1-81af161e0f8f",
+ "diagramNodeId": "2fa5cfc9-3058-4669-985f-04ba57133aed",
+ "simStepLabel": "Class Candidate to Codemod Pipeline",
+ "simStepDescription": "A single raw class string, known as a 'candidate', is extracted from a template file and passed into the `migrateCandidate` function for transformation.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts",
+ "startLine": "114",
+ "endLine": "118",
+ "relevantVariables": [
+ "migrateCandidate",
+ "rawCandidate"
+ ]
+ },
+ "inputDataExample": "{\n \"rawCandidate\": \"shadow\"\n}",
+ "outputDataExample": "{\n \"rawCandidate\": \"shadow\"\n}"
+ },
+ {
+ "simStepId": "8485b8c0-dfc3-4e62-bf40-025a709f2559",
+ "diagramNodeId": "d1855f5d-6e48-4f82-9fde-bd6f075fca39",
+ "simStepLabel": "Apply Codemods to Class Candidate",
+ "simStepDescription": "The raw class string is processed by a series of migration functions defined in `DEFAULT_MIGRATIONS`. Each function is a specific codemod targeting a particular breaking change, such as renaming deprecated utilities (`shadow` -> `shadow-sm`), modernizing arbitrary values, or reordering variants.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts",
+ "startLine": "68",
+ "endLine": "78",
+ "relevantVariables": [
+ "migrateCached",
+ "DEFAULT_MIGRATIONS",
+ "rawCandidate",
+ "migrated"
+ ]
+ },
+ "inputDataExample": "{\n \"rawCandidate\": \"shadow\"\n}",
+ "outputDataExample": "{\n \"migratedCandidate\": \"shadow-sm\"\n}"
+ },
+ {
+ "simStepId": "af73a671-2ed1-46ce-bbcb-645845ba138d",
+ "diagramNodeId": "5a81e8f9-9927-44ca-be4a-a31d1e8b57df",
+ "simStepLabel": "Return Migrated Class String",
+ "simStepDescription": "The migrated class string is returned. The `migrateContents` function collects all such changes from a file to apply them in a subsequent step.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts",
+ "startLine": "120",
+ "endLine": "120",
+ "relevantVariables": [
+ "migratedCandidate"
+ ]
+ },
+ "inputDataExample": "{\n \"migratedCandidate\": \"shadow-sm\"\n}",
+ "outputDataExample": "{\n \"migratedCandidate\": \"shadow-sm\"\n}"
+ },
+ {
+ "simStepId": "2f421e36-42fd-460c-a31d-aafb4fe73702",
+ "diagramNodeId": "1ef57531-209f-4f6f-a81e-79df134b93f3",
+ "simStepLabel": "Aggregate and Write Template Changes",
+ "simStepDescription": "After all class candidates in a file have been processed, `migrateContents` uses `spliceChangesIntoString` to construct the new file content with all class names updated. The main `migrate` function then writes this new content back to the file on disk.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts",
+ "startLine": "131",
+ "endLine": "141",
+ "relevantVariables": [
+ "spliceChangesIntoString",
+ "migrate",
+ "fs.writeFile",
+ "migrateContents"
+ ]
+ },
+ "inputDataExample": "{\n \"contents\": \"\",\n \"changes\": [\n { \"start\": 13, \"end\": 19, \"replacement\": \"shadow-sm\" },\n { \"start\": 20, \"end\": 24, \"replacement\": \"ring-3\" }\n ]\n}",
+ "outputDataExample": "{\n \"newFileContents\": \"\"\n}"
+ },
+ {
+ "simStepId": "21a42a18-b8ba-4517-bc5a-d06d98f29238",
+ "diagramNodeId": "05c27640-2884-4e43-ac57-c55263c8fd74",
+ "simStepLabel": "Project Path to PostCSS Config Migrator",
+ "simStepDescription": "After all CSS and template files are migrated, the path to the project's base directory is passed to the PostCSS configuration migrator to handle `postcss.config.js`.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-upgrade/src/index.ts",
+ "startLine": "347",
+ "endLine": "347",
+ "relevantVariables": [
+ "migratePostCSSConfig",
+ "base"
+ ]
+ },
+ "inputDataExample": "{\n \"base\": \"/path/to/project\"\n}",
+ "outputDataExample": "{\n \"base\": \"/path/to/project\"\n}"
+ },
+ {
+ "simStepId": "00af9177-f9ac-4995-8158-df8fb42d1d65",
+ "diagramNodeId": "4a6b2b84-1a12-4616-9c3c-f290fd4fbe75",
+ "simStepLabel": "Migrate PostCSS Configuration",
+ "simStepDescription": "The `migratePostCSSConfig` function attempts to simplify the user's `postcss.config.js` file by removing now-unnecessary plugins like `autoprefixer` (which is built into Tailwind CSS v4) and ensuring `tailwindcss` is correctly configured.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts",
+ "startLine": "19",
+ "endLine": "137",
+ "relevantVariables": [
+ "migratePostCSSConfig",
+ "migratePostCSSJSConfig",
+ "migratePostCSSJsonConfig"
+ ]
+ },
+ "inputDataExample": "{\n \"postcssConfigContent\": \"module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } }\"\n}",
+ "outputDataExample": "{\n \"newPostcssConfigContent\": \"module.exports = { plugins: { tailwindcss: {} } }\"\n}"
+ },
+ {
+ "simStepId": "6eef0eaa-fe76-4dfa-8d9c-3d99b63dbc20",
+ "diagramNodeId": "",
+ "simStepLabel": "Final Output: Migrated Project",
+ "simStepDescription": "The upgrade process is complete. All relevant configuration, stylesheet, and template files in the project have been automatically migrated to be compatible with the new Tailwind CSS version.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/@tailwindcss-upgrade/src/index.ts",
+ "startLine": "350",
+ "endLine": "350",
+ "relevantVariables": [
+ "cleanup"
+ ]
+ },
+ "inputDataExample": "{\n \"status\": \"success\",\n \"message\": \"Migration complete!\"\n}",
+ "outputDataExample": "{\n \"status\": \"success\",\n \"message\": \"Migration complete!\"\n}"
+ }
+ ],
+ "description": "- By automating the migration process, this tool reduces the friction of adopting new major versions, which is crucial for the long-term health and adoption of the framework
- - Provides a CLI tool (
@tailwindcss/upgrade) to help users migrate their projects across breaking changes in new versions - - It uses 'codemods' to automatically refactor
tailwind - config
- js files, stylesheets (
- css), and template files (
- html,
- jsx, etc
- )
- - This significantly lowers the maintenance burden on developers and encourages the community to stay up-to-date
",
+ "simulationNodesAndEdges": {
+ "7f7ba991-3b7e-4dae-8dfc-40e36d069f27": {
+ "simStepIds": [
+ "ce816b1a-1bf4-4eb6-94b0-027562d885d1"
+ ]
+ },
+ "3b4d3048-762b-4580-a286-1d88980975f4": {
+ "simStepIds": [
+ "93199260-e2ea-489d-8592-77a7f0899362"
+ ]
+ },
+ "98b7b7d2-1f96-462e-a79c-6832c9fa94f2": {
+ "simStepIds": [
+ "e92a32ae-c3cc-45c5-b6a2-c33fd48f023c"
+ ]
+ },
+ "e3f5bdd8-ee3b-4437-b215-ec0703b10055": {
+ "simStepIds": [
+ "1c3ec338-fdc9-4775-9293-8227945ffe56"
+ ]
+ },
+ "d1855f5d-6e48-4f82-9fde-bd6f075fca39": {
+ "simStepIds": [
+ "8485b8c0-dfc3-4e62-bf40-025a709f2559"
+ ]
+ },
+ "1ef57531-209f-4f6f-a81e-79df134b93f3": {
+ "simStepIds": [
+ "2f421e36-42fd-460c-a31d-aafb4fe73702"
+ ]
+ },
+ "4a6b2b84-1a12-4616-9c3c-f290fd4fbe75": {
+ "simStepIds": [
+ "00af9177-f9ac-4995-8158-df8fb42d1d65"
+ ]
+ },
+ "b41098b9-4fd3-4aa6-b994-bc0890fcb1f3": {
+ "simStepIds": [
+ "bbd429dc-f5fc-47d5-b55e-638177453e6e"
+ ]
+ },
+ "2aec4fd3-67b4-4b90-ae7f-2a1907c1cdf4": {
+ "simStepIds": [
+ "010015a1-3199-4b55-9673-1bcb48054d7e"
+ ]
+ },
+ "dbe65b41-4594-49d2-9023-421e4450573a": {
+ "simStepIds": [
+ "7699f08f-a139-4b00-9f60-0d8641b9f7bb"
+ ]
+ },
+ "2fa5cfc9-3058-4669-985f-04ba57133aed": {
+ "simStepIds": [
+ "ce221095-bbe2-44b5-b6f1-81af161e0f8f"
+ ]
+ },
+ "5a81e8f9-9927-44ca-be4a-a31d1e8b57df": {
+ "simStepIds": [
+ "af73a671-2ed1-46ce-bbcb-645845ba138d"
+ ]
+ },
+ "05c27640-2884-4e43-ac57-c55263c8fd74": {
+ "simStepIds": [
+ "21a42a18-b8ba-4517-bc5a-d06d98f29238"
+ ]
+ }
+ },
+ "isAIGenerated": true,
+ "keywords": "@tailwindcss-upgrade, codemods, migrate",
+ "generationPrompt": "Automating Project Upgrades to Newer Framework Versions",
+ "generationKeywords": "@tailwindcss-upgrade, codemods, migrate"
+ },
+ "Providing Rich IntelliSense for Autocompletion in Code Editors": {
+ "name": "Providing Rich IntelliSense for Autocompletion in Code Editors",
+ "simSteps": [
+ {
+ "simStepId": "b76339cb-6f5e-4223-b3b2-3d113c2f6884",
+ "diagramNodeId": "d96ab9b6-3140-4a06-a5d3-d7b0a8f4470c",
+ "simStepLabel": "Get Class List: Initialize Design System",
+ "simStepDescription": "The process begins by calling `buildDesignSystem` with a `Theme` object. This function constructs and returns a `DesignSystem` instance, which encapsulates the entire resolved configuration, including utilities, variants, and theme values, and serves as the primary API for IntelliSense features.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/design-system.ts",
+ "startLine": "56",
+ "endLine": "56",
+ "relevantVariables": [
+ "buildDesignSystem",
+ "theme"
+ ]
+ },
+ "inputDataExample": "{\"theme\": {\"options\": 0, \"namespaces\": {\"--colors\": [\"red-500\", \"blue-500\"], \"--spacing\": [\"0.5\", \"1\"]}, \"values\": {\"--colors-red-500\": \"rgb(239 68 68)\", \"--colors-blue-500\": \"rgb(59 130 246)\", \"--spacing-0.5\": \"0.125rem\", \"--spacing-1\": \"0.25rem\"}}}",
+ "outputDataExample": "{\"designSystem\": {\"important\": false, \"theme\": {}, \"utilities\": {}, \"variants\": {}}}"
+ },
+ {
+ "simStepId": "58cb367b-ecb0-414f-a5c9-15c90dd770b3",
+ "diagramNodeId": "0eb329a2-2703-45ae-8263-5a899009b75e",
+ "simStepLabel": "Get Class List: Design System Created",
+ "simStepDescription": "The newly created `DesignSystem` object is returned to the caller. This object is now ready to be queried for IntelliSense data.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/design-system.ts",
+ "startLine": "56",
+ "endLine": "56",
+ "relevantVariables": [
+ "DesignSystem"
+ ]
+ },
+ "inputDataExample": "{\"designSystem\": {\"important\": false, \"theme\": {}, \"utilities\": {}, \"variants\": {}}}",
+ "outputDataExample": "{\"designSystem\": {\"important\": false, \"theme\": {}, \"utilities\": {}, \"variants\": {}}}"
+ },
+ {
+ "simStepId": "f61b8e3a-0145-4b35-8b3f-a2a46ed8c241",
+ "diagramNodeId": "09fa041e-40a1-4e54-b6ad-88f06850b4a2",
+ "simStepLabel": "Get Class List: Request Class List",
+ "simStepDescription": "The IntelliSense consumer calls the `design.getClassList()` method on the `DesignSystem` instance to retrieve all available utility classes for autocompletion.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/design-system.ts",
+ "startLine": "130",
+ "endLine": "132",
+ "relevantVariables": [
+ "getClassList"
+ ]
+ },
+ "inputDataExample": "{\"designSystem\": {\"important\": false, \"theme\": {}, \"utilities\": {}, \"variants\": {}}}",
+ "outputDataExample": "[[\"p-0.5\", {\"modifiers\": []}], [\"text-red-500\", {\"modifiers\": [\"px\", \"1\"]}]]"
+ },
+ {
+ "simStepId": "262fd025-90a6-4ea9-a30b-4f7bfbb0a8ea",
+ "diagramNodeId": "d56ef92b-572f-4ee8-8d5f-ae2aa71f311f",
+ "simStepLabel": "Get Class List: Forward to Implementation",
+ "simStepDescription": "The public `getClassList` method on the `DesignSystem` object acts as a proxy, calling the internal `getClassList` function from `intellisense.ts` and passing its own instance (`this`) as the `design` parameter.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/design-system.ts",
+ "startLine": "131",
+ "endLine": "131",
+ "relevantVariables": [
+ "getClassList"
+ ]
+ },
+ "inputDataExample": "{\"designSystem\": {\"important\": false, \"theme\": {}, \"utilities\": {}, \"variants\": {}}}",
+ "outputDataExample": "{\"designSystem\": {\"important\": false, \"theme\": {}, \"utilities\": {}, \"variants\": {}}}"
+ },
+ {
+ "simStepId": "e1e4b09a-cf43-4cbf-8b71-21be9b586242",
+ "diagramNodeId": "bb7691b3-06be-4eab-a225-b07cd75d8f09",
+ "simStepLabel": "Get Class List: Generate Class List",
+ "simStepDescription": "The `getClassList` function in `intellisense.ts` iterates through all registered core and plugin utilities within the `DesignSystem`. It collects each class name and its associated metadata, such as available modifiers for opacity or other values, to build a comprehensive list.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/intellisense.ts",
+ "startLine": "21",
+ "endLine": "21",
+ "relevantVariables": [
+ "getClassList",
+ "design"
+ ]
+ },
+ "inputDataExample": "{\"designSystem\": {\"important\": false, \"theme\": {}, \"utilities\": {}, \"variants\": {}}}",
+ "outputDataExample": "[[\"p-0.5\", {\"modifiers\": []}], [\"text-red-500\", {\"modifiers\": [\"px\", \"1\"]}]]"
+ },
+ {
+ "simStepId": "f92f5909-1fc0-4dc1-8eb9-a7cdea91ba9a",
+ "diagramNodeId": "49d51e6c-37b2-40b7-af90-1c8b16e7a2a5",
+ "simStepLabel": "Get Class List: Transmit Class List",
+ "simStepDescription": "The function returns a structured array of `ClassEntry` tuples. Each tuple contains a class name string (e.g., 'text-red-500') and its metadata, which is then passed back to the IntelliSense consumer.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/intellisense.ts",
+ "startLine": "21",
+ "endLine": "21",
+ "relevantVariables": [
+ "ClassEntry"
+ ]
+ },
+ "inputDataExample": "[[\"p-0.5\", {\"modifiers\": []}], [\"text-red-500\", {\"modifiers\": [\"px\", \"1\"]}]]",
+ "outputDataExample": "[[\"p-0.5\", {\"modifiers\": []}], [\"text-red-500\", {\"modifiers\": [\"px\", \"1\"]}]]"
+ },
+ {
+ "simStepId": "641ad633-7a5c-4b15-9c46-2bf634c3f800",
+ "diagramNodeId": "ab2c3196-f75b-429c-b3e9-4f7434fa3980",
+ "simStepLabel": "Get Class List: Consume Class List",
+ "simStepDescription": "The editor extension (e.g., VS Code IntelliSense) receives the final list of classes and uses this data to populate autocompletion suggestions, provide hover information, and perform linting in the user's code.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/intellisense.test.ts",
+ "startLine": "32",
+ "endLine": "37",
+ "relevantVariables": [
+ "classList",
+ "classNames"
+ ]
+ },
+ "inputDataExample": "[[\"p-0.5\", {\"modifiers\": []}], [\"text-red-500\", {\"modifiers\": [\"px\", \"1\"]}]]",
+ "outputDataExample": "{\"suggestions\": [{\"label\": \"p-0.5\"}, {\"label\": \"text-red-500\"}]}"
+ },
+ {
+ "simStepId": "8c5cee0f-aec6-465f-9f4a-031dc540b2c6",
+ "diagramNodeId": "b4e1385a-7ae4-44cf-94cd-9acffd6e7062",
+ "simStepLabel": "Get Variants: Initialize Design System",
+ "simStepDescription": "Similar to retrieving classes, the process for variants starts by calling `buildDesignSystem` to create a `DesignSystem` instance containing all resolved configuration.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/design-system.ts",
+ "startLine": "56",
+ "endLine": "56",
+ "relevantVariables": [
+ "buildDesignSystem",
+ "theme"
+ ]
+ },
+ "inputDataExample": "{\"theme\": {\"options\": 0, \"namespaces\": {\"--breakpoint\": [\"sm\", \"md\"]}, \"values\": {\"--breakpoint-sm\": \"640px\", \"--breakpoint-md\": \"768px\"}}}",
+ "outputDataExample": "{\"designSystem\": {\"important\": false, \"theme\": {}, \"utilities\": {}, \"variants\": {}}}"
+ },
+ {
+ "simStepId": "07fd61bb-48c0-495c-a317-ea097b571bd5",
+ "diagramNodeId": "c00960f4-a1d9-45c8-b9f0-00a132e14666",
+ "simStepLabel": "Get Variants: Design System Created",
+ "simStepDescription": "The initialized `DesignSystem` object is returned to the caller, ready to be queried for variant information.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/design-system.ts",
+ "startLine": "56",
+ "endLine": "56",
+ "relevantVariables": [
+ "DesignSystem"
+ ]
+ },
+ "inputDataExample": "{\"designSystem\": {\"important\": false, \"theme\": {}, \"utilities\": {}, \"variants\": {}}}",
+ "outputDataExample": "{\"designSystem\": {\"important\": false, \"theme\": {}, \"utilities\": {}, \"variants\": {}}}"
+ },
+ {
+ "simStepId": "3f0e83f8-1c9d-4ae3-8d11-b05d77cc861b",
+ "diagramNodeId": "b6a85e2e-a180-42fe-b9d4-0a5427814c0d",
+ "simStepLabel": "Get Variants: Request Variants List",
+ "simStepDescription": "The IntelliSense consumer calls the `design.getVariants()` method to get a list of all supported variants like `hover:`, `focus:`, `md:`, and `group-hover:`.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/design-system.ts",
+ "startLine": "133",
+ "endLine": "135",
+ "relevantVariables": [
+ "getVariants"
+ ]
+ },
+ "inputDataExample": "{\"designSystem\": {\"important\": false, \"theme\": {}, \"utilities\": {}, \"variants\": {}}}",
+ "outputDataExample": "[{\"name\": \"hover\", \"hasDash\": false}, {\"name\": \"focus\", \"hasDash\": false}, {\"name\": \"group-hover\", \"hasDash\": true}]"
+ },
+ {
+ "simStepId": "014acbff-7550-4529-aa39-03f009c7d771",
+ "diagramNodeId": "a8c537f9-aaa7-4de9-8a90-52e2c38d17e9",
+ "simStepLabel": "Get Variants: Forward to Implementation",
+ "simStepDescription": "The public `getVariants` method calls the internal `getVariants` function from `intellisense.ts`, passing its own instance (`this`) as the `design` parameter.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/design-system.ts",
+ "startLine": "134",
+ "endLine": "134",
+ "relevantVariables": [
+ "getVariants"
+ ]
+ },
+ "inputDataExample": "{\"designSystem\": {\"important\": false, \"theme\": {}, \"utilities\": {}, \"variants\": {}}}",
+ "outputDataExample": "{\"designSystem\": {\"important\": false, \"theme\": {}, \"utilities\": {}, \"variants\": {}}}"
+ },
+ {
+ "simStepId": "7d7867c1-64a1-42e4-badc-45932fe924a4",
+ "diagramNodeId": "3b6a349e-cbc3-4899-a066-a62ec62d4853",
+ "simStepLabel": "Get Variants: Generate Variant List",
+ "simStepDescription": "The `getVariants` function in `intellisense.ts` iterates through all registered variants in the `DesignSystem`'s variant map, building a structured list of their metadata.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/intellisense.ts",
+ "startLine": "152",
+ "endLine": "152",
+ "relevantVariables": [
+ "getVariants",
+ "design"
+ ]
+ },
+ "inputDataExample": "{\"designSystem\": {\"important\": false, \"theme\": {}, \"utilities\": {}, \"variants\": {}}}",
+ "outputDataExample": "[{\"name\": \"hover\", \"hasDash\": false}, {\"name\": \"focus\", \"hasDash\": false}, {\"name\": \"group-hover\", \"hasDash\": true}]"
+ },
+ {
+ "simStepId": "bb6050b3-1acb-45b7-a0b9-072d67a12dc5",
+ "diagramNodeId": "88e49d7e-8559-4b7b-b848-92ea0254bac1",
+ "simStepLabel": "Get Variants: Transmit Variant List",
+ "simStepDescription": "The function returns a structured array of `VariantEntry` objects. Each object describes a variant's name, its properties, and how to generate its CSS selectors.",
+ "isEdge": 1,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/intellisense.ts",
+ "startLine": "152",
+ "endLine": "152",
+ "relevantVariables": [
+ "VariantEntry"
+ ]
+ },
+ "inputDataExample": "[{\"name\": \"hover\", \"hasDash\": false}, {\"name\": \"focus\", \"hasDash\": false}, {\"name\": \"group-hover\", \"hasDash\": true}]",
+ "outputDataExample": "[{\"name\": \"hover\", \"hasDash\": false}, {\"name\": \"focus\", \"hasDash\": false}, {\"name\": \"group-hover\", \"hasDash\": true}]"
+ },
+ {
+ "simStepId": "b2a40d88-b7bb-46b8-98f1-2f3a4376318c",
+ "diagramNodeId": "a007dd2c-297f-4137-9540-4fae52995497",
+ "simStepLabel": "Get Variants: Consume Variant List",
+ "simStepDescription": "The editor extension receives the list of variants and uses it to provide autocompletion for variant prefixes (e.g., suggesting `hover:` after a user types a class name) and for linting variant combinations.",
+ "isEdge": 0,
+ "sourceCodeMapping": {
+ "filePath": "packages/tailwindcss/src/intellisense.test.ts",
+ "startLine": "69",
+ "endLine": "72",
+ "relevantVariables": [
+ "getVariants",
+ "variants"
+ ]
+ },
+ "inputDataExample": "[{\"name\": \"hover\", \"hasDash\": false}, {\"name\": \"focus\", \"hasDash\": false}, {\"name\": \"group-hover\", \"hasDash\": true}]",
+ "outputDataExample": "{\"suggestions\": [{\"label\": \"hover:\"}, {\"label\": \"focus:\"}, {\"label\": \"group-hover:\"}]}"
+ }
+ ],
+ "description": "- A great developer experience is a key business value, and providing excellent editor support is a huge part of that
- - The codebase is structured to expose metadata about all available utility classes, variants, and theme values
- - This information powers the official Tailwind CSS IntelliSense extension for VS Code and other editor integrations
- - Features include autocompletion for class names, linting for incorrect or conflicting classes, and showing the full CSS declaration on hover
",
+ "simulationNodesAndEdges": {
+ "d96ab9b6-3140-4a06-a5d3-d7b0a8f4470c": {
+ "simStepIds": [
+ "b76339cb-6f5e-4223-b3b2-3d113c2f6884"
+ ]
+ },
+ "09fa041e-40a1-4e54-b6ad-88f06850b4a2": {
+ "simStepIds": [
+ "f61b8e3a-0145-4b35-8b3f-a2a46ed8c241"
+ ]
+ },
+ "bb7691b3-06be-4eab-a225-b07cd75d8f09": {
+ "simStepIds": [
+ "e1e4b09a-cf43-4cbf-8b71-21be9b586242"
+ ]
+ },
+ "ab2c3196-f75b-429c-b3e9-4f7434fa3980": {
+ "simStepIds": [
+ "641ad633-7a5c-4b15-9c46-2bf634c3f800"
+ ]
+ },
+ "b4e1385a-7ae4-44cf-94cd-9acffd6e7062": {
+ "simStepIds": [
+ "8c5cee0f-aec6-465f-9f4a-031dc540b2c6"
+ ]
+ },
+ "b6a85e2e-a180-42fe-b9d4-0a5427814c0d": {
+ "simStepIds": [
+ "3f0e83f8-1c9d-4ae3-8d11-b05d77cc861b"
+ ]
+ },
+ "3b6a349e-cbc3-4899-a066-a62ec62d4853": {
+ "simStepIds": [
+ "7d7867c1-64a1-42e4-badc-45932fe924a4"
+ ]
+ },
+ "a007dd2c-297f-4137-9540-4fae52995497": {
+ "simStepIds": [
+ "b2a40d88-b7bb-46b8-98f1-2f3a4376318c"
+ ]
+ },
+ "0eb329a2-2703-45ae-8263-5a899009b75e": {
+ "simStepIds": [
+ "58cb367b-ecb0-414f-a5c9-15c90dd770b3"
+ ]
+ },
+ "d56ef92b-572f-4ee8-8d5f-ae2aa71f311f": {
+ "simStepIds": [
+ "262fd025-90a6-4ea9-a30b-4f7bfbb0a8ea"
+ ]
+ },
+ "49d51e6c-37b2-40b7-af90-1c8b16e7a2a5": {
+ "simStepIds": [
+ "f92f5909-1fc0-4dc1-8eb9-a7cdea91ba9a"
+ ]
+ },
+ "c00960f4-a1d9-45c8-b9f0-00a132e14666": {
+ "simStepIds": [
+ "07fd61bb-48c0-495c-a317-ea097b571bd5"
+ ]
+ },
+ "a8c537f9-aaa7-4de9-8a90-52e2c38d17e9": {
+ "simStepIds": [
+ "014acbff-7550-4529-aa39-03f009c7d771"
+ ]
+ },
+ "88e49d7e-8559-4b7b-b848-92ea0254bac1": {
+ "simStepIds": [
+ "bb6050b3-1acb-45b7-a0b9-072d67a12dc5"
+ ]
+ }
+ },
+ "isAIGenerated": true,
+ "keywords": "intellisense, getClassList, getVariants",
+ "generationPrompt": "Providing Rich IntelliSense for Autocompletion in Code Editors",
+ "generationKeywords": "intellisense, getClassList, getVariants"
+ }
+ },
+ "cellToPath": {
+ "8cf7f1e0-3fe6-46a3-b961-356a05cf5c23": "packages",
+ "69cd5b59-55ce-4dca-be52-218e92d88ee7": "crates",
+ "eef1d4c1-2cad-4c4a-b95e-0654677e0efe": "packages/@tailwindcss-vite",
+ "4200d2fe-839e-44b1-9dd0-c368bc58b0de": "packages/tailwindcss",
+ "036071af-66af-47ba-8024-c75ac0d7943c": "crates/node",
+ "aa99a857-fcc1-42ee-a1c6-0dc76a93ebc4": "crates/oxide",
+ "7da350bf-9915-4bfe-b5a7-34d1c4b9c5a1": "packages/@tailwindcss-vite/src",
+ "1dd81203-e3d1-43c3-b060-0dcf2af49609": "packages/tailwindcss/src",
+ "c26839de-96f5-4ae4-b17f-939fca7a8d36": "crates/node/src",
+ "6ab2ff5a-6aab-4726-9d64-7368429e7a76": "crates/oxide/src",
+ "11f84044-473f-4f66-a07b-e497d279a653": "packages/@tailwindcss-vite/src/index.ts",
+ "c3afa9c5-494d-46d2-a9fe-fb6c27f0a347": "packages/tailwindcss/src/index.ts",
+ "cfdf4eb6-27dc-475a-b060-ca771e1c5cc9": "packages/tailwindcss/src/compile.ts",
+ "a11486ec-9812-484b-bbc9-28e0cdb8b368": "crates/node/src/lib.rs",
+ "4ee95362-ec80-41e1-af6f-7877634490d6": "crates/oxide/src/scanner",
+ "93fa4c2d-9a63-49f0-a06e-9557a5200a76": "crates/oxide/src/scanner/mod.rs",
+ "373f836b-c272-4cff-952b-31881d7bbe0d": "packages/@tailwindcss-vite/src/index.ts-simstep-070c05f0-e90a-4524-80b9-d646718c498b",
+ "2243483a-2947-4317-b128-96245ab9b8d2": "packages/tailwindcss/src/index.ts-simstep-86a5c51c-3902-4461-a34c-5ba93101aa5b",
+ "c373f9ca-351d-4a67-af50-2570e9e52d92": "crates/node/src/lib.rs-simstep-eda16679-649a-455b-8094-c9fb4a3423c6",
+ "355b0995-e0fe-4ea0-bae3-b033754c4a1a": "crates/oxide/src/scanner/mod.rs-simstep-50225845-94e9-487b-90e5-f3342bacb723",
+ "e6e37d78-d762-46b6-bbf0-b9e7a989a08f": "crates/oxide/src/scanner/mod.rs-simstep-03b0fc2f-dfc1-4f49-b8af-c4a1d3c49f65",
+ "72766964-f322-4bb1-b8f2-96c8db4a2fe7": "packages/tailwindcss/src/compile.ts-simstep-0919e474-6ea8-4106-81e5-6bed6d2cc022",
+ "3e96bd1c-d473-4381-80c3-eca8f05896ce": "packages/tailwindcss/src/index.ts-simstep-ff576a5f-0492-417d-8d25-6fd864a80989",
+ "e3e6f752-4c4f-411a-905f-61a8953bdfb4": "packages/@tailwindcss-vite/src/index.ts-simstep-0f0bf488-9de2-4511-9ea7-0db1864eb44c",
+ "3b5a12d0-480e-4dd5-8fc6-16c807a68584": "generated-edge-simstep-4fd1f069-9598-4f24-b477-59c9df6ee696-3b5a12d0-480e-4dd5-8fc6-16c807a68584",
+ "73e5e4e3-e760-40af-b927-f92f8a10979c": "generated-edge-simstep-921f8e69-5718-42dd-adec-453c0a22ed51-73e5e4e3-e760-40af-b927-f92f8a10979c",
+ "a7739e5a-ccee-4948-90c4-c0cf2c018953": "generated-edge-simstep-31568cde-0ab0-463d-819f-b5896e0fc7e1-a7739e5a-ccee-4948-90c4-c0cf2c018953",
+ "2d460f8a-13b6-412e-b653-df6cc79aa069": "generated-edge-simstep-56f1281c-75cc-4ac1-95a2-c070478b7ae1-2d460f8a-13b6-412e-b653-df6cc79aa069",
+ "13664c11-6236-4d78-8ccc-52e321e27492": "generated-edge-simstep-845cc912-18ef-4747-9db9-0a25b1573c1f-13664c11-6236-4d78-8ccc-52e321e27492",
+ "21958e82-9c3c-4cf0-b2da-769f72bdc2be": "generated-edge-simstep-40ba90e1-bf86-44ed-90a7-909c74c31968-21958e82-9c3c-4cf0-b2da-769f72bdc2be",
+ "0ffc7c9e-b11c-4332-b31c-312b410547d8": "generated-edge-simstep-276bcabc-ad09-4160-a3ac-8fa73f844387-0ffc7c9e-b11c-4332-b31c-312b410547d8",
+ "30c8c2d0-c23e-4a0f-be8d-f2f3d609d920": "packages/tailwindcss/src/compat",
+ "ab7e1c25-5704-4933-ba49-e663112e7d63": "packages/tailwindcss/src/compat/config",
+ "61012578-ad7a-4829-984f-b33619a8b5c5": "packages/tailwindcss/src/compat/apply-compat-hooks.ts",
+ "81a8cde9-b849-4eef-9441-c91b4ec43848": "packages/tailwindcss/src/compat/apply-config-to-theme.ts",
+ "3ba89ecd-cb8e-44ca-ac14-dadc04eee4cd": "packages/tailwindcss/src/compat/config/resolve-config.ts",
+ "d496aee2-d3ca-45fe-9014-347b0c49d664": "packages/tailwindcss/src/index.ts-simstep-f3bd330a-032f-4154-be70-0b6b7f43feda",
+ "77b16a01-56a2-44cb-8df3-db2c02adceb7": "packages/tailwindcss/src/compat/config/resolve-config.ts-simstep-adb9b981-59c4-48ba-9903-8ff051d2479b",
+ "8dd53534-ac78-4604-b647-35a223654911": "packages/tailwindcss/src/compat/apply-config-to-theme.ts-simstep-4444211c-72da-4515-a507-e555b0954069",
+ "b0c1e709-112b-4444-8a6c-4ff5f6c2fe12": "packages/tailwindcss/src/compile.ts-simstep-f289837c-4a0a-4f3e-897d-84aa2e21fd3e",
+ "c84cfc48-369e-4d1d-846c-9487f3d46057": "generated-edge-simstep-9b8e2e68-fb14-4434-a07d-4b7526a7df5d-c84cfc48-369e-4d1d-846c-9487f3d46057",
+ "1ef2725f-414c-4956-81cf-d83cc7b4fa5d": "generated-edge-simstep-46783681-b8f0-40a3-963e-f7c3f266dd6c-1ef2725f-414c-4956-81cf-d83cc7b4fa5d",
+ "3b7ab692-5d29-4cb8-8ed7-84bef3f5886f": "generated-edge-simstep-65b152f0-aff8-4975-996b-d046e44265d9-3b7ab692-5d29-4cb8-8ed7-84bef3f5886f",
+ "4006b47a-16f3-4e62-9cc4-efd228fef6cf": "packages/tailwindcss/src/candidate.ts",
+ "905dc9a1-50bc-46aa-ba84-1b3bb59b780e": "packages/tailwindcss/src/variants.ts",
+ "9819606a-f6b6-4001-aacf-1127d3666915": "packages/tailwindcss/src/compile.ts-simstep-eaa78521-2d8b-4bff-ade7-099ab10fb0dd",
+ "cb0109bf-3e83-44de-9f04-4d995ca3b47f": "packages/tailwindcss/src/candidate.ts-simstep-82d5255c-7c07-47a4-8df5-70710261d128",
+ "7cbdc91e-47bc-4673-80f2-ecbac3f762c7": "packages/tailwindcss/src/compile.ts-simstep-a122af75-88a8-4058-bc30-b8c4f39509fe",
+ "af5bb6af-b0ac-4f02-acc9-eedb55fe519d": "packages/tailwindcss/src/compile.ts-simstep-2b6cc5b2-2c96-49e5-8f98-e7f98efea128",
+ "fdfbc500-48c7-46dc-9441-abcd42344e4c": "packages/tailwindcss/src/compile.ts-simstep-1f173972-2fe5-42c2-b8ea-f6992ab624e2",
+ "30d2bf97-9dc9-4900-82dc-0008dbcb3d47": "packages/tailwindcss/src/index.ts-simstep-07d6d4fa-896e-4cd5-84aa-685001282e98",
+ "b18fca3e-8529-4b7f-8061-c8385ef13e3b": "packages/tailwindcss/src/variants.ts-simstep-62f1d35b-b450-4d02-9124-8d11383e0b52",
+ "08bb973f-591d-4502-9fca-68d1a097fb08": "generated-edge-simstep-673ad478-e89b-4d0c-836e-3b4aad72b2d7-08bb973f-591d-4502-9fca-68d1a097fb08",
+ "006b92f3-9cf3-4d28-8a5f-6a1916d9d43c": "generated-edge-simstep-a9ef6393-31b2-4559-a1cb-8c4d2f7078fa-006b92f3-9cf3-4d28-8a5f-6a1916d9d43c",
+ "77ad0426-7373-4168-be2b-34a1bce4a89a": "generated-edge-simstep-8d9c8785-0c68-432d-9472-03a26d9bfb75-77ad0426-7373-4168-be2b-34a1bce4a89a",
+ "0362a778-b1d3-4161-8a92-4cb3f23cfe4a": "generated-edge-simstep-9ce76e94-b5fe-44e1-a8c3-88fe41777f35-0362a778-b1d3-4161-8a92-4cb3f23cfe4a",
+ "90a6ac8c-db96-4cfb-aab8-4550cdc73d36": "generated-edge-simstep-c975cd6e-1ad8-4209-b8e9-dd15672c8027-90a6ac8c-db96-4cfb-aab8-4550cdc73d36",
+ "b455a6d1-3d52-4434-b400-07c67d0f2d5f": "playgrounds",
+ "3d5f03e6-8cde-4451-a23f-4a2d158c71fe": "playgrounds/nextjs",
+ "9b9585a8-7790-42ec-abe0-879b5078eb36": "playgrounds/vite",
+ "147fcd88-9ff4-4fd5-8c10-b518d9fe3630": "packages/@tailwindcss-postcss",
+ "2b07b8c2-5cdf-4a14-b401-6d47a1b6b28a": "playgrounds/nextjs/postcss.config.js",
+ "195406ec-0ef6-4ddc-80e8-6bd58afcb908": "playgrounds/vite/vite.config.ts",
+ "579630a3-44bc-46d8-8f70-1cf46e48cf29": "packages/@tailwindcss-postcss/src",
+ "fcb21d37-9994-4006-8fd4-098f96bec9cc": "packages/@tailwindcss-postcss/src/index.ts",
+ "ba5a34f3-b23f-4fda-b2ed-da992e47dfb9": "playgrounds/nextjs/postcss.config.js-simstep-c0ea92ee-3c0a-4dc5-b3ad-9e02d73420c1",
+ "a8add52e-7ad4-4a10-90d6-aa4bbcc7199d": "packages/@tailwindcss-postcss/src/index.ts-simstep-8aa13357-95a4-4cea-b4bd-b5b70d4f3de3",
+ "e4000d03-510d-4ae5-90f8-fcc41664a401": "packages/@tailwindcss-postcss/src/index.ts-simstep-6ac19244-330b-46a3-8ee1-3342c8edaf5b",
+ "e765979a-1aa9-4d06-adde-fdadae2ec57b": "packages/@tailwindcss-postcss/src/index.ts-simstep-0e41a1b5-e546-486b-ae62-d6861fdf7ce5",
+ "56c49227-f8f8-4f43-85f6-21a320c15ab2": "playgrounds/vite/vite.config.ts-simstep-31c30553-f46d-4083-9634-2581d6e0f040",
+ "9a1fab25-726b-42cd-87da-76468f2e125a": "packages/@tailwindcss-vite/src/index.ts-simstep-847f2607-c677-4eaa-b73e-dd372d73ef70",
+ "f2f78a72-7d51-48d9-be4e-6eaeda5e6ad7": "packages/@tailwindcss-vite/src/index.ts-simstep-a660c7cc-56bb-4fac-af79-3d00679a5759",
+ "61b47a59-ece5-42e6-b4cd-909a39aff89a": "packages/@tailwindcss-vite/src/index.ts-simstep-f1917cc3-57ba-4953-84c5-19442c893485",
+ "24eb4805-f561-46d2-aa86-8a93c38537be": "generated-edge-simstep-c803a596-1dd6-4b55-82d4-7c2f63776dbc-24eb4805-f561-46d2-aa86-8a93c38537be",
+ "2b658db9-435a-403b-83f4-dba3733356bb": "generated-edge-simstep-68266603-6de1-4fbd-ba3b-13e7264baa45-2b658db9-435a-403b-83f4-dba3733356bb",
+ "b0a551fe-ad7d-4b33-b076-a0c162971cb5": "generated-edge-simstep-2774e022-2751-4c7b-bf9a-a59369a9cd65-b0a551fe-ad7d-4b33-b076-a0c162971cb5",
+ "793ead2a-8d4c-4c1f-b371-d271ba8da975": "generated-edge-simstep-770b8f86-55a6-444d-b0d7-d84c60084c18-793ead2a-8d4c-4c1f-b371-d271ba8da975",
+ "7864f923-cfb8-4013-b451-6468e35755eb": "generated-edge-simstep-cd978705-e081-41b1-93e9-96c29429b1af-7864f923-cfb8-4013-b451-6468e35755eb",
+ "588712b6-c2d0-4b86-921d-611a3bb68406": "generated-edge-simstep-cb451f00-d410-41b6-a3b9-d6edf1620e07-588712b6-c2d0-4b86-921d-611a3bb68406",
+ "e390d827-7630-4c39-9772-3d2fb9a3819c": "packages/@tailwindcss-postcss/src/fixtures",
+ "a1a07f94-78e2-4c9d-ae24-49ab5e598fe8": "packages/tailwindcss/src/compat/plugin-api.ts",
+ "a4a09831-2b8f-4103-8df6-a5a8bbd57548": "packages/@tailwindcss-postcss/src/fixtures/example-project",
+ "28d77789-1578-4ba3-8bc8-6b6d38c2670b": "packages/@tailwindcss-postcss/src/fixtures/example-project/plugin.js",
+ "003ca2a5-ca0c-49da-9d94-f0825bb1a840": "packages/tailwindcss/src/compat/apply-compat-hooks.ts-simstep-bba7f885-598c-48f4-bbe1-5035a3d78c49",
+ "228fa9c6-524c-4485-ac04-30c0b38e7447": "packages/tailwindcss/src/compat/apply-compat-hooks.ts-simstep-f85f0059-785e-45bf-952d-70f31d1ca531",
+ "4935dd39-2719-4fae-9e47-4904dc38887b": "packages/tailwindcss/src/compat/config/resolve-config.ts-simstep-63d599b1-4e75-471b-9357-c6257451dbed",
+ "f654954d-60f3-4380-a598-cd77b2971ed0": "packages/tailwindcss/src/compat/apply-compat-hooks.ts-simstep-8d3e5126-3fb6-46bf-9e8b-be5c79236566",
+ "414ad46e-9582-4a4f-bdcc-d7b36f5618f1": "packages/tailwindcss/src/compat/plugin-api.ts-simstep-15362ed0-6ffd-4177-a992-bfd6b46ad403",
+ "434cb654-91a0-491a-ae3c-46f9f45756b8": "generated-edge-simstep-d2776b89-8cc8-4f59-b22a-10b9ad4e433f-434cb654-91a0-491a-ae3c-46f9f45756b8",
+ "269c1ff1-099a-4365-88bf-706673176424": "generated-edge-simstep-491d945f-8696-4e9c-9b83-292502f1704c-269c1ff1-099a-4365-88bf-706673176424",
+ "7791ae55-1ffa-41bb-b04f-6203e8ae292f": "generated-edge-simstep-6e38cfe1-f57a-4ebc-ab6f-8763d6133819-7791ae55-1ffa-41bb-b04f-6203e8ae292f",
+ "83b31836-414f-4fa4-a180-00684b0f8286": "generated-edge-simstep-a31e3864-e0d7-4f6d-a9d0-1f044879ce36-83b31836-414f-4fa4-a180-00684b0f8286",
+ "2d2d5c49-dcd8-49b2-83da-b52f0f2f7fab": "crates/oxide/src/main.rs",
+ "81e0fe1a-06e9-49f5-b8ee-71d5246c8539": "crates/oxide/src/extractor",
+ "a77fa17c-460f-4ba2-a498-e159030060c7": "crates/oxide/src/extractor/utility_machine.rs",
+ "6af31246-07dc-48bb-a34b-f2d5c80288aa": "crates/oxide/src/extractor/named_utility_machine.rs",
+ "4f41bf0d-8384-4e71-bc2c-9f0e0339f723": "crates/oxide/src/main.rs-simstep-2c6a58c2-d3cd-4991-89f9-07f78e5f0a76",
+ "472d0313-0159-4d94-98d5-54748570d4f8": "crates/oxide/src/extractor/utility_machine.rs-simstep-bf62f504-9a6a-4026-b2e0-408d8f6515fd",
+ "fc707279-942f-4c36-9f9d-4bf40c925b6b": "crates/oxide/src/extractor/named_utility_machine.rs-simstep-8647727d-bf05-4ebb-909d-b3a4f14afc49",
+ "40a97b17-fdf4-41ea-b3c6-d4ef9d04dc9d": "crates/oxide/src/main.rs-simstep-03cba560-0826-4cf8-8711-6179a7eb8788",
+ "44c24163-1fdf-42f0-899c-e799a3f77cd3": "crates/oxide/src/extractor/utility_machine.rs-simstep-f10ece63-581a-4070-a21e-75ec0d3aa8fc",
+ "9c8af2d1-2339-49c1-8ad9-8f3cd3586c85": "crates/oxide/src/extractor/utility_machine.rs-simstep-d4c22b52-6478-4320-a872-e2b7e794fe68",
+ "b291634d-3f95-4c4b-9840-cf6501d00551": "generated-edge-simstep-6d448667-774a-41cc-8133-3d585557a540-b291634d-3f95-4c4b-9840-cf6501d00551",
+ "80fef34d-fa5b-4bc0-ae6b-56e1ba797ff6": "generated-edge-simstep-de0f8d8d-b441-43d9-a031-d7ee0ff63817-80fef34d-fa5b-4bc0-ae6b-56e1ba797ff6",
+ "416fbe58-0110-44bc-a421-1a002303d6c2": "generated-edge-simstep-79f40ae3-f086-4f90-8968-14c785bf35c9-416fbe58-0110-44bc-a421-1a002303d6c2",
+ "09230f36-fc8a-4d72-aa87-6507e2a022d7": "generated-edge-simstep-af09b176-bdfd-4355-9404-3a43d29c5d33-09230f36-fc8a-4d72-aa87-6507e2a022d7",
+ "4b981a5d-91b7-4299-a84c-d909e0bc2790": "generated-edge-simstep-9e30212a-9fb1-4f67-a44d-a149c8a8a570-4b981a5d-91b7-4299-a84c-d909e0bc2790",
+ "38cee91e-f342-4fea-b4a4-b84ba2d910d4": "packages/tailwindcss/src/css-parser.test.ts",
+ "96485fa7-4834-4429-ad88-ac10916ff8f6": "packages/tailwindcss/src/apply.ts",
+ "fff5b81c-6f22-4caa-903e-5454c42fa6e1": "packages/tailwindcss/src/ast.bench.ts",
+ "2d86d61e-2014-48e5-a434-d6beade9b810": "packages/tailwindcss/src/css-parser.test.ts-simstep-0eb15c43-6535-4dfd-bb33-4482340935ae",
+ "612e5877-615a-428c-8dd8-d523cb649325": "packages/tailwindcss/src/index.ts-simstep-2328c343-084d-4465-aa48-14a08a41c4ae",
+ "f1932e5a-8499-4ccf-88be-0566eb54567d": "packages/tailwindcss/src/apply.ts-simstep-ee3a753a-f104-4033-ac7b-466c7d0ebd42",
+ "433d52fd-76f6-44b3-9634-9d1c1b97b8f5": "packages/tailwindcss/src/ast.bench.ts-simstep-f5348025-a9a1-4beb-836d-066db79336ce",
+ "6210865c-e504-46b2-a3a8-f428c024d737": "generated-edge-simstep-3f54b0c2-b2df-4c78-8b4f-01d3868c74fd-6210865c-e504-46b2-a3a8-f428c024d737",
+ "63dc8986-1769-45c8-8a4b-bc6f5a7ee9b4": "generated-edge-simstep-24aef2ff-e1cd-483d-aad3-1c8684f5ca54-63dc8986-1769-45c8-8a4b-bc6f5a7ee9b4",
+ "6fb30581-60f8-4314-b0f1-efdeac97744f": "generated-edge-simstep-17346dec-5508-4621-a03a-041b9334ef56-6fb30581-60f8-4314-b0f1-efdeac97744f",
+ "eba901e8-9643-438a-96bc-0dcde82a7c20": "integrations",
+ "6cba388c-c9bb-4bf9-99b0-bb7d8d9a7957": "pnpm-lock.yaml",
+ "84b5e2ac-fddb-4e13-8165-4d84176fe6f7": "packages/@tailwindcss-cli",
+ "8b8d7829-1345-4a9f-888e-179f388aa019": "crates/ignore",
+ "36f30b02-b1e0-4fbb-9e63-6b20cb749220": "integrations/cli",
+ "966ed1d6-6e20-4090-bb80-639075e583ed": "packages/@tailwindcss-cli/src",
+ "629e315e-a831-419d-9497-3095c8682a2c": "crates/ignore/src",
+ "a8a73047-0292-4204-ae1b-f737ffd7e186": "integrations/cli/index.test.ts",
+ "7418384f-4087-444d-98f3-f15e8c6dee4c": "packages/@tailwindcss-cli/src/index.ts",
+ "1244f936-3470-4cec-a183-82050790decb": "crates/ignore/src/walk.rs",
+ "ce22e949-cfba-4bd5-aca8-b2550b40c5f8": "packages/@tailwindcss-cli/src/index.ts-simstep-fa981cdc-06e1-400e-aaa5-91cdb7f9e856",
+ "32ce5d1a-ff8c-4b34-8fc3-91470258a973": "packages/tailwindcss/src/index.ts-simstep-6e16fb9e-1fea-4158-8326-353b2ad48b5e",
+ "4c9420c8-ece0-49f6-b67e-e14498394096": "crates/ignore/src/walk.rs-simstep-13a986da-a534-4196-b808-d8de4f9a0a8a",
+ "c066f1d3-dad7-4966-a0a9-bd83e510dc78": "packages/tailwindcss/src/index.ts-simstep-0da50755-36e5-481e-9ab4-3d0ec52133ba",
+ "044494ec-c43c-4350-b8db-0c269d1b3b2b": "integrations/cli/index.test.ts-simstep-e6753a9e-15a6-4ac3-8323-44b208eff2a9",
+ "def0383c-7001-4728-a66f-35e369246e9b": "integrations/cli/index.test.ts-simstep-7d1f3c46-2e32-4199-8d44-2ee319345f57",
+ "642ba4d6-5732-430d-a489-e69bae067bf8": "packages/tailwindcss/src/index.ts-simstep-2053de67-31dc-4f8c-88cc-232e376872e9",
+ "62cea20d-3fce-4730-a177-ce56751d0ac4": "integrations/cli/index.test.ts-simstep-20480b42-f302-4806-bc81-b904a6cb5d62",
+ "e217e9a0-1864-4fb7-8ba3-3f359797fd6c": "generated-edge-simstep-a91cd2ac-17eb-4d88-afd4-18df2bf19159-e217e9a0-1864-4fb7-8ba3-3f359797fd6c",
+ "290e80b5-a44f-4568-9ac9-8fdd8676baea": "generated-edge-simstep-70683ff5-fdf7-4d33-bb07-b7cf7733278f-290e80b5-a44f-4568-9ac9-8fdd8676baea",
+ "89bdc94c-6450-4658-9b0d-aa0c274959b3": "generated-edge-simstep-1dc55af9-80f5-4fe9-9d6a-11f103fefea0-89bdc94c-6450-4658-9b0d-aa0c274959b3",
+ "e203c8d1-3b36-4586-a850-4cc923b3218e": "generated-edge-simstep-4d57d59d-e65b-4b85-964d-d80e5d3be373-e203c8d1-3b36-4586-a850-4cc923b3218e",
+ "7ca7617c-1daf-49dd-9b25-2a613f5af8e0": "generated-edge-simstep-8fa8985c-1028-43e0-8392-ef60baa2105c-7ca7617c-1daf-49dd-9b25-2a613f5af8e0",
+ "c154d024-5aaa-465a-84bf-31261cfbae3b": "generated-edge-simstep-a00534cf-b62f-4cec-8ccb-baec18d421d8-c154d024-5aaa-465a-84bf-31261cfbae3b",
+ "98b96734-7f00-4974-9637-bc7e9cbdff7e": "generated-edge-simstep-738566df-3531-465b-bcb3-9ca71c481ace-98b96734-7f00-4974-9637-bc7e9cbdff7e",
+ "6e701650-96db-43c1-903b-624571aab002": "packages/@tailwindcss-upgrade",
+ "36a082db-3d3b-4e94-b9cd-eb1498ba1791": "packages/@tailwindcss-upgrade/src",
+ "db83c168-0406-448d-85af-5e0d98377086": "packages/@tailwindcss-upgrade/src/index.ts",
+ "f67b4f04-8c97-4b42-b087-d308c12af7ab": "packages/@tailwindcss-upgrade/src/codemods",
+ "1521f797-a86c-42d5-9569-e8509b1a9b1c": "packages/@tailwindcss-upgrade/src/codemods/config",
+ "cfff54dd-c38e-499b-9ba6-416f253ce44c": "packages/@tailwindcss-upgrade/src/codemods/css",
+ "7a100cf0-eb22-4095-9d1d-29b05d40ba36": "packages/@tailwindcss-upgrade/src/codemods/template",
+ "df5b0085-8384-4821-ab95-f85e82bb9f9e": "packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts",
+ "36d99a6e-17e3-4cac-bf94-9e913af6e836": "packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts",
+ "831b0964-3ec2-4c29-8701-21f672966d76": "packages/@tailwindcss-upgrade/src/codemods/css/migrate.ts",
+ "6e3f56ab-6733-408c-a555-a1d334cd6114": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts",
+ "7f7ba991-3b7e-4dae-8dfc-40e36d069f27": "packages/@tailwindcss-upgrade/src/index.ts-simstep-ce816b1a-1bf4-4eb6-94b0-027562d885d1",
+ "3b4d3048-762b-4580-a286-1d88980975f4": "packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts-simstep-93199260-e2ea-489d-8592-77a7f0899362",
+ "98b7b7d2-1f96-462e-a79c-6832c9fa94f2": "packages/@tailwindcss-upgrade/src/codemods/css/migrate.ts-simstep-e92a32ae-c3cc-45c5-b6a2-c33fd48f023c",
+ "e3f5bdd8-ee3b-4437-b215-ec0703b10055": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts-simstep-1c3ec338-fdc9-4775-9293-8227945ffe56",
+ "d1855f5d-6e48-4f82-9fde-bd6f075fca39": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts-simstep-8485b8c0-dfc3-4e62-bf40-025a709f2559",
+ "1ef57531-209f-4f6f-a81e-79df134b93f3": "packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts-simstep-2f421e36-42fd-460c-a31d-aafb4fe73702",
+ "4a6b2b84-1a12-4616-9c3c-f290fd4fbe75": "packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts-simstep-00af9177-f9ac-4995-8158-df8fb42d1d65",
+ "b41098b9-4fd3-4aa6-b994-bc0890fcb1f3": "generated-edge-simstep-bbd429dc-f5fc-47d5-b55e-638177453e6e-b41098b9-4fd3-4aa6-b994-bc0890fcb1f3",
+ "2aec4fd3-67b4-4b90-ae7f-2a1907c1cdf4": "generated-edge-simstep-010015a1-3199-4b55-9673-1bcb48054d7e-2aec4fd3-67b4-4b90-ae7f-2a1907c1cdf4",
+ "dbe65b41-4594-49d2-9023-421e4450573a": "generated-edge-simstep-7699f08f-a139-4b00-9f60-0d8641b9f7bb-dbe65b41-4594-49d2-9023-421e4450573a",
+ "2fa5cfc9-3058-4669-985f-04ba57133aed": "generated-edge-simstep-ce221095-bbe2-44b5-b6f1-81af161e0f8f-2fa5cfc9-3058-4669-985f-04ba57133aed",
+ "5a81e8f9-9927-44ca-be4a-a31d1e8b57df": "generated-edge-simstep-af73a671-2ed1-46ce-bbcb-645845ba138d-5a81e8f9-9927-44ca-be4a-a31d1e8b57df",
+ "05c27640-2884-4e43-ac57-c55263c8fd74": "generated-edge-simstep-21a42a18-b8ba-4517-bc5a-d06d98f29238-05c27640-2884-4e43-ac57-c55263c8fd74",
+ "a8b162d6-7069-4dc9-ba56-58204ecbde74": "packages/tailwindcss/src/design-system.ts",
+ "870260c4-12e9-42a3-beee-8b68c09815cb": "packages/tailwindcss/src/intellisense.ts",
+ "2bc2b4b6-60cb-4b51-b8ea-e5df9c051b52": "packages/tailwindcss/src/intellisense.test.ts",
+ "d96ab9b6-3140-4a06-a5d3-d7b0a8f4470c": "packages/tailwindcss/src/design-system.ts-simstep-b76339cb-6f5e-4223-b3b2-3d113c2f6884",
+ "09fa041e-40a1-4e54-b6ad-88f06850b4a2": "packages/tailwindcss/src/design-system.ts-simstep-f61b8e3a-0145-4b35-8b3f-a2a46ed8c241",
+ "bb7691b3-06be-4eab-a225-b07cd75d8f09": "packages/tailwindcss/src/intellisense.ts-simstep-e1e4b09a-cf43-4cbf-8b71-21be9b586242",
+ "ab2c3196-f75b-429c-b3e9-4f7434fa3980": "packages/tailwindcss/src/intellisense.test.ts-simstep-641ad633-7a5c-4b15-9c46-2bf634c3f800",
+ "b4e1385a-7ae4-44cf-94cd-9acffd6e7062": "packages/tailwindcss/src/design-system.ts-simstep-8c5cee0f-aec6-465f-9f4a-031dc540b2c6",
+ "b6a85e2e-a180-42fe-b9d4-0a5427814c0d": "packages/tailwindcss/src/design-system.ts-simstep-3f0e83f8-1c9d-4ae3-8d11-b05d77cc861b",
+ "3b6a349e-cbc3-4899-a066-a62ec62d4853": "packages/tailwindcss/src/intellisense.ts-simstep-7d7867c1-64a1-42e4-badc-45932fe924a4",
+ "a007dd2c-297f-4137-9540-4fae52995497": "packages/tailwindcss/src/intellisense.test.ts-simstep-b2a40d88-b7bb-46b8-98f1-2f3a4376318c",
+ "0eb329a2-2703-45ae-8263-5a899009b75e": "generated-edge-simstep-58cb367b-ecb0-414f-a5c9-15c90dd770b3-0eb329a2-2703-45ae-8263-5a899009b75e",
+ "d56ef92b-572f-4ee8-8d5f-ae2aa71f311f": "generated-edge-simstep-262fd025-90a6-4ea9-a30b-4f7bfbb0a8ea-d56ef92b-572f-4ee8-8d5f-ae2aa71f311f",
+ "49d51e6c-37b2-40b7-af90-1c8b16e7a2a5": "generated-edge-simstep-f92f5909-1fc0-4dc1-8eb9-a7cdea91ba9a-49d51e6c-37b2-40b7-af90-1c8b16e7a2a5",
+ "c00960f4-a1d9-45c8-b9f0-00a132e14666": "generated-edge-simstep-07fd61bb-48c0-495c-a317-ea097b571bd5-c00960f4-a1d9-45c8-b9f0-00a132e14666",
+ "a8c537f9-aaa7-4de9-8a90-52e2c38d17e9": "generated-edge-simstep-014acbff-7550-4529-aa39-03f009c7d771-a8c537f9-aaa7-4de9-8a90-52e2c38d17e9",
+ "88e49d7e-8559-4b7b-b848-92ea0254bac1": "generated-edge-simstep-bb6050b3-1acb-45b7-a0b9-072d67a12dc5-88e49d7e-8559-4b7b-b848-92ea0254bac1"
+ }
+}
\ No newline at end of file
From 7c3bb28d7652e02b944436e4a0996f985d9f678b Mon Sep 17 00:00:00 2001
From: Abi <46168827+Abdullah85MBA@users.noreply.github.com>
Date: Sat, 4 Oct 2025 19:04:24 +0100
Subject: [PATCH 2/3] Add CodeCanvas diagram to README
---
README.md | 9 +++++++++
1 file changed, 9 insertions(+)
diff --git a/README.md b/README.md
index 7d21bd88385a..4795a75f8d37 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,15 @@
For full documentation, visit [tailwindcss.com](https://tailwindcss.com).
+### How does `tailwindcss` work?
+
+Check out this interactive walkthrough of the `tailwindcss` codebase on CodeCanvas [here](https://www.code-canvas.com/?session=unauthenticatedGithub&repo=tailwindcss&owner=tailwindlabs&branch=main&OnboardingTutorial=true).
+
+To update the diagram, follow the quick tutorial [here](https://docs.code-canvas.com/updating-diagram).
+
+
+
+
## Community
For help, discussion about best practices, or feature ideas:
From 27517dc49bb6bead4deed37d9121e2662723e539 Mon Sep 17 00:00:00 2001
From: Abi <46168827+Abdullah85MBA@users.noreply.github.com>
Date: Sat, 4 Oct 2025 22:55:25 +0100
Subject: [PATCH 3/3] Update README.md
---
README.md | 14 ++++++--------
1 file changed, 6 insertions(+), 8 deletions(-)
diff --git a/README.md b/README.md
index 4795a75f8d37..cf8091e6f3ba 100644
--- a/README.md
+++ b/README.md
@@ -25,14 +25,6 @@
For full documentation, visit [tailwindcss.com](https://tailwindcss.com).
-### How does `tailwindcss` work?
-
-Check out this interactive walkthrough of the `tailwindcss` codebase on CodeCanvas [here](https://www.code-canvas.com/?session=unauthenticatedGithub&repo=tailwindcss&owner=tailwindlabs&branch=main&OnboardingTutorial=true).
-
-To update the diagram, follow the quick tutorial [here](https://docs.code-canvas.com/updating-diagram).
-
-
-
## Community
@@ -43,3 +35,9 @@ For help, discussion about best practices, or feature ideas:
## Contributing
If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindcss/tailwindcss/blob/next/.github/CONTRIBUTING.md) **before submitting a pull request**.
+
+### How does `tailwindcss` work?
+
+Check out this interactive walkthrough of the `tailwindcss` codebase on CodeCanvas [here](https://www.code-canvas.com/?session=unauthenticatedGithub&repo=tailwindcss&owner=tailwindlabs&branch=main&OnboardingTutorial=true).
+
+