Edit CSS

Name

Also known as (comma separated)

Brief definition Cascading Style Sheets.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "background", "type": "color", "label": "Rule: background", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "textColor", "type": "color", "label": "Rule: text colour", "default": "#241430", "presets": [ "#241430", "#FAF7F2", "#E8A020" ] }, { "id": "radius", "type": "number", "label": "Rule: corner radius", "default": 12, "min": 0, "max": 28, "step": 2 }, { "id": "applied", "type": "toggle", "label": "Rule applied to element", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"css-wrap\" role=\"img\" aria-label=\"A CSS rule shown as code, applied or not applied to a matching element below\">\n <pre class=\"css-code\">.box {\n background: {{background}};\n color: {{textColor}};\n border-radius: {{radius}}px;\n}</pre>\n <div class=\"css-box{{#if applied}} css-box--styled{{/if}}\" style=\"{{#if applied}}background:{{background}};color:{{textColor}};border-radius:{{radius}}px;{{/if}}\">.box</div>\n <p class=\"css-caption\">{{#if applied}}Rule applied — .box now matches the declarations above.{{/if}}{{#unless applied}}Rule not applied — .box keeps the browser's default look.{{/unless}}</p>\n</div>\n<style>\n.css-wrap { font: 14px/1.5 system-ui, sans-serif; color: #241430; width: 300px; }\n.css-code { background: #241430; color: #FAF7F2; padding: 12px; border-radius: 8px; font: 12px/1.6 ui-monospace, monospace; white-space: pre-wrap; margin: 0 0 16px; }\n.css-box { padding: 16px; border: 1.5px dashed #24143055; font-weight: 600; text-align: center; }\n.css-box--styled { border-style: solid; }\n.css-caption { margin: 12px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] w-[300px]\" role=\"img\" aria-label=\"A CSS rule shown as code, applied or not applied to a matching element below\">\n <pre class=\"bg-[#241430] text-[#FAF7F2] p-3 rounded-lg text-xs leading-relaxed whitespace-pre-wrap m-0 mb-4\">.box {\n background: {{background}};\n color: {{textColor}};\n border-radius: {{radius}}px;\n}</pre>\n <div class=\"p-4 border-[1.5px] font-semibold text-center {{#if applied}}border-solid{{/if}}{{#unless applied}}border-dashed border-[#24143055]{{/unless}}\" style=\"{{#if applied}}background:{{background}};color:{{textColor}};border-radius:{{radius}}px;{{/if}}\">.box</div>\n <p class=\"mt-3 text-xs text-[#241430]/80\">{{#if applied}}Rule applied — .box now matches the declarations above.{{/if}}{{#unless applied}}Rule not applied — .box keeps the browser's default look.{{/unless}}</p>\n</div>", "react": "export function CssRule({\n background = \"{{background}}\",\n textColor = \"{{textColor}}\",\n radius = {{radius}},\n applied = {{applied}},\n}) {\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", width: 300 }}\n role=\"img\" aria-label=\"A CSS rule shown as code, applied or not applied to a matching element below\">\n <pre style={{ background: \"#241430\", color: \"#FAF7F2\", padding: 12, borderRadius: 8,\n font: \"12px/1.6 ui-monospace, monospace\", whiteSpace: \"pre-wrap\", margin: \"0 0 16px\" }}>\n{`.box {\\n background: ${background};\\n color: ${textColor};\\n border-radius: ${radius}px;\\n}`}\n </pre>\n <div style={{ padding: 16, fontWeight: 600, textAlign: \"center\",\n border: applied ? \"1.5px solid #24143055\" : \"1.5px dashed #24143055\",\n ...(applied ? { background, color: textColor, borderRadius: radius } : {}) }}>\n .box\n </div>\n <p style={{ margin: \"12px 0 0\", fontSize: 12, color: \"#241430cc\" }}>\n {applied ? \"Rule applied — .box now matches the declarations above.\" : \"Rule not applied — .box keeps the browser's default look.\"}\n </p>\n </div>\n );\n}" }