[{"id":"258c25c8-4726-46bb-af11-15dd19c77b71","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Variable Syntax","styles":{}}],"children":[]},{"id":"ccb35ae8-ef17-43cc-98cb-73e5ec9b9984","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"CSS variables follow this format:","styles":{}}],"children":[]},{"id":"00b0e86c-199f-416e-9030-936f98200822","type":"procode","props":{"code":"--variable-name: value;","language":"javascript","filename":"","files":"[{\"id\":\"5wqth35ln\",\"name\":\"code\",\"code\":\"--variable-name: value;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8dc376ac-1ed5-4ffd-9ff1-a5911b9561f6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"8c3b4100-4e11-42a5-b2ae-febde371a5f4","type":"procode","props":{"code":"--main-color: #3b82f6;\n--main-padding: 20px;","language":"javascript","filename":"","files":"[{\"id\":\"tbxev5djr\",\"name\":\"code\",\"code\":\"--main-color: #3b82f6;\\n--main-padding: 20px;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5ed4c7ed-7f11-42af-b498-ead8b841c3dc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"To use a variable:","styles":{}}],"children":[]},{"id":"c917fa14-841f-4a88-89f9-3df0a3fc9798","type":"procode","props":{"code":"property: var(--variable-name);","language":"javascript","filename":"","files":"[{\"id\":\"48mzme6ho\",\"name\":\"code\",\"code\":\"property: var(--variable-name);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f948ed96-fcd7-40dc-a3ea-d9866b706a22","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"26d40548-5095-466a-b3d5-c47e83eaa411","type":"procode","props":{"code":"color: var(--main-color);\npadding: var(--main-padding);","language":"javascript","filename":"","files":"[{\"id\":\"kznprfe7a\",\"name\":\"code\",\"code\":\"color: var(--main-color);\\npadding: var(--main-padding);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"db7394b2-c6b1-4252-9173-6968765b52d7","type":"divider","props":{},"children":[]},{"id":"19ee1e42-57be-4a06-964e-7779777be59c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Using Variables in Tailwind (CDN Example)","styles":{}}],"children":[]},{"id":"b02b122d-d7ee-45c2-a6a4-1329839b5c4a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Variables can be defined inside a global CSS scope and used alongside Tailwind utilities.","styles":{}}],"children":[]},{"id":"e5bdea23-70dd-460c-9102-0a08e602681c","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"edzdrdsb5\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"010bcbab-2476-4d15-9d6c-d73ea0975cf1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Usage:","styles":{}}],"children":[]},{"id":"17e72ac3-9ccb-4b11-ac3f-d2a1b7fa2b1e","type":"procode","props":{"code":"

\nPrimary Color Box\n

","language":"javascript","filename":"","files":"[{\"id\":\"2us0kwcys\",\"name\":\"code\",\"code\":\"

\\nPrimary Color Box\\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"73c0f269-22be-4750-9e95-a8a365b01cc0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"4bd5307b-d70e-4fa4-b905-950ba0dc52ca","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n font-family: system-ui;\\n padding: 20px;\\n background-color: #f8fafc;\\n color: #1e293b;\\n}\\n\\nh1 {\\n color: #0f172a;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n\\nTailwind CSS Variables\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n

\\n\\n

\\nTailwind CSS Variables Example\\n

\\n\\n

\\nPrimary Variable\\n

\\n\\n

\\nSecondary Variable\\n

\\n\\n

\\n\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"console.log(\\\"Hello Vanilla!\\\");\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"","showCode":"true","width":"100%","height":"auto"},"children":[]},{"id":"be44de2b-34fe-435a-9fec-ec306a63559b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]