{"componentChunkName":"component---src-templates-windframedocs-js","path":"/windframe/docs/editing-templates/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"13b24836-1f6d-5988-9d57-8757150428dd","title":"Editing Templates","slug":"/docs/editing-templates/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"Editing Templates\",\n  \"metaTitle\": \"Editing Templates\",\n  \"metaDescription\": \"How to edit the templates designs using Windframe Editor\",\n  \"canonicalUrl\": \"https://windframe.dev/docs/editing-templates\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"Selecting a Template Designs with Windframe\"), mdx(\"p\", null, \"To edit the template designs using Windframe Editor, follow these steps:\"), mdx(\"p\", null, \"Open \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor\"\n  }, \"Windframe's editor\"), \".\"), mdx(\"p\", null, \"Browse through the variety of templates categorized on the left sidebar or use the search feature to find your desired template.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/a1af034b4c55f664c434aedaf29d6e80/f868f/adding-template.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"59.07335907335908%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAA7DAAAOwwHHb6hkAAACoElEQVQoz5WRW0iTYRjHB10GlaZm6jxM97m5szr9vlpNy4u8CrqIboIKEqIkiw5UZl1loXQwNaUlJRp50YWHPGAqs9ACzbYCKzXdlOEM922zecht/969sxVBQs/Hn+f5Hv7v73l5XgGbuw9M1gEkSbPBqHRIkGQgTpyOeIbkFA3kmTlQcXlIUXAQkj4VowGjZCGSsWDULDTZh8DpiolnNwS79FfB5RxFui4fmbqD4PTHESFMQ3hsUGExUmzZLg39RwgVECv1SJSyiEpQYluiCtEiDRmihTBVC4EwORc3y2sxZ7dj4qsNw+8+4dHjBrR39qC5rRMtL7rQ0tZF6+bWTrS2d+P1wBD6jANo6+iG8dUgCs9eQVSSCkkyDoJkmRaXr5VieMSMnv73xDAEnufxP1FjqEdYnCwIjI5X4EhBERqbnqPW0ISGRiOs01Zq9Pv9FM7zDjgcc7DbbXA6nbTv9XqxsvKD+u5WPUS4cA24KTIFZberQtMs0xaMT0zSOnBgZsYCY/8IKiqNeNljhslkCg0LQANRUW34DYyMlZId3g8BpyxWjK0Bl5aWYbPZ8PTZIHr7PsBkniIDZtYHxopUOHOhBOaPo+g1DpLl91FoMPwYG5/Cm7cTcPKz8Hx3w+PxrA+MIa+TnMZCotbhZNF1nDhVhkmLhRp9Ph/d4fz8N/Dzs2R/LgoM9APA1dVV6rv3J1Ak1WJzlBgbNsbAUNeAovPFBGj9x3v66fd3VNbUIfzXKzNyPfL3H8ZpAjpWcAnnLj7A6OcvWFxcBk9u5HItwOlyk+ymtdu9sFa7ye2d8Hl9KLtTja1CeRCoUBSi9NYTOJx21NU3ouRGOSQZOsizc4hyoeb2Qr0jD0oiBbcHqaSXygbFkFpCsjh9J+JlWVQ/AXCynulN6P7TAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Adding-template\",\n    \"title\": \"Adding-template\",\n    \"src\": \"/static/a1af034b4c55f664c434aedaf29d6e80/e3189/adding-template.png\",\n    \"srcSet\": [\"/static/a1af034b4c55f664c434aedaf29d6e80/a2ead/adding-template.png 259w\", \"/static/a1af034b4c55f664c434aedaf29d6e80/6b9fd/adding-template.png 518w\", \"/static/a1af034b4c55f664c434aedaf29d6e80/e3189/adding-template.png 1035w\", \"/static/a1af034b4c55f664c434aedaf29d6e80/f868f/adding-template.png 1382w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Click on a template or drag and drop it to add it to the canvas.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/6dffa00f0acc5e8cac3d14316346ca06/a4f81/selecting-template.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"51.73745173745174%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACWUlEQVQoz22Sy08TURTG5x/AQHzVFlqKnbYz09KWItPWELXBjYkLEi0SFWmCoOzUlWtj4k4X7twY30oJmpQYF0IUqtgWEIJKhKJGpcUYU2pK7WP6eeZqqkRvcjL33PnOb879znCtbT3QC3uh2+7AZr0dVVvN2EBRtYVnucboRM02geXqO/WsxiCiutYKnckLe1MQDWIrNtWJ2NfeBc7h6oe23gOjJKO9oxudx06i42gfxQkEDvciQPtDwX4EjvQi2HcGp8+eR3fvKQQp9h/ogpa3wSDKBG9CS9tBcC6PH0ZBhujejc/LKfyz8gow/xX/W5PTs9DxzagXPdBbZPBOGRwv+aA1OiA178FC4h0TFopFlMvAaiaDWHQKI+HHmKLiXC5H52UUCgWmG3/2goBuAsqoNXvhkkVwOvJIY7DDtsOPxaX3TKgoCitaW8shvZrBx2SS4N9ZXqSPlUoK00UmYhVgndUDyeEEZ7b5sFErsA4Tv4ElAqqFKiCvdqOU8S2dR/x1Bms5BaViaT2QLNMLHvACARusLTRFK3moAj+s8yiVXP6TKFkkPyXYtlhYDzQQ0CB6YeQlunKDC9UaC0Tq8O3CEhOq1xt9EsHDRyOYiE5SnsdoPI3w0xVEZlaRzeaZbizyl4c0FGfzTupQUIFmSORhauVLpaFofBrjz6OYe/WG5bH5EsZmfmBmUaloXs7Osd9FnbI6bWeTG1yL9zh0Rg9MjT5cvHwFN+8O4drtEAbvD2NgKEwxjOu3QhgIDVL8el69cQ93Qg9w7sIl8o4GYmqEZVcPBH8nfgKM6hYSAEHLsgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Template\",\n    \"title\": \"Template\",\n    \"src\": \"/static/6dffa00f0acc5e8cac3d14316346ca06/e3189/selecting-template.png\",\n    \"srcSet\": [\"/static/6dffa00f0acc5e8cac3d14316346ca06/a2ead/selecting-template.png 259w\", \"/static/6dffa00f0acc5e8cac3d14316346ca06/6b9fd/selecting-template.png 518w\", \"/static/6dffa00f0acc5e8cac3d14316346ca06/e3189/selecting-template.png 1035w\", \"/static/6dffa00f0acc5e8cac3d14316346ca06/a4f81/selecting-template.png 1508w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"h2\", null, \"Editing Template Designs\"), mdx(\"p\", null, \"Now, let's begin editing your template design:\"), mdx(\"p\", null, \"In the Windframe editor, you'll see the template you selected displayed on the Canvas.\\n\", mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/0accf5eec48d1ba6a2070b74e143e4d5/dd507/adding-elements.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"54.05405405405405%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACkElEQVQoz21SS09TURDuHzAEQ0tLL+VCL32X9hYIFFlUBYEUkYRHeFPFjYpx4cr/4MKVkYUmKhFjFDYu3GCM0ZAoLjCWh6WUCqQERJA+aHvv7ef0FjEqk3yZc+ZMvplvziiq6ppgsJ+CptQBnaEKWs6FAsYKZbGVvAVq1gFjRT1KzTUUsyFfYySYUaS3w2Btg6vqJgyWdhhtXpQYXFAwrA1KTTn0VjeY8kpo9TzBJRNnUVTmhJrjoSbPcJXg67ywVZ8FSwVYSw20BifsfB8YtkEupihxNKHE0QzGVIvbd+5ibW0DX/yLmF/4KiMQDCHwwY9lfwBLy0GEVtcQDIWxuBTACvnG1h5wtjo4apph5huoQ7cPZZ4r0JjqMfFsCv/abnQfq9NzWPevQETmv/fzncMw8R6cbumG29MOxYn8Ymh1JppVBR49eS4nCYIge0mSEKIu3s/O4tPcZ+x834YkChBFUUbWvB2DKGR5lJF8lmuDIq/QCIZmpi514vFEjjAWi+PdzEe8eTuDvf0YFZAgpAQshQ8Q2U5SRoaK5bpt7RwCX9sIE30co68kQlU5mOzgZcIXctJBMoW9n1H45xcQi8ePhAaCYURjiaPuf0su0Fqgog1Q0lYcSygIIgRRQiSyiZ0fu0jTPZmU8G1jCzt7cXrP/CHsGoZKZ8dJNa0T4VjCrL18NY37Dycw9mAckc1NvJ5NYGxqC/cmtxFaz8mWJXcMQUfrpqQu81Tc34TjTycP5WRwkEpjPxpHNJ6gbjNIpSSSm6IRpHH4H7Jd6PaBox0uok8t0PE5Qg1d9LRLnpYuDF6+gR7fVfRdGkX/yHUZvRevoZ8wMDKKAYr30bnXRzE6O93nUFF9BhqdFVzjLfwCIkc6JAwmeUgAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Adding elements\",\n    \"title\": \"Adding elements\",\n    \"src\": \"/static/0accf5eec48d1ba6a2070b74e143e4d5/e3189/adding-elements.png\",\n    \"srcSet\": [\"/static/0accf5eec48d1ba6a2070b74e143e4d5/a2ead/adding-elements.png 259w\", \"/static/0accf5eec48d1ba6a2070b74e143e4d5/6b9fd/adding-elements.png 518w\", \"/static/0accf5eec48d1ba6a2070b74e143e4d5/e3189/adding-elements.png 1035w\", \"/static/0accf5eec48d1ba6a2070b74e143e4d5/dd507/adding-elements.png 1528w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Select an element by clicking on it in the canvas.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1024px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/e00df42e002f4fc1f7dc1d30efeef0d1/2bef9/selecting-section.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"68.72586872586874%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACnUlEQVQ4y41SS08TURTuDzAYo0TwkYhBWEAkphtjNDFCogjGpdWNK1cudKuJiQkLMUCk1IAIRFPpAywSeVSUFlvbJqCBVCvPaDQRpdAHtKWd93zeOzOMYjT4JWfuPXPP+e53zrmGwqLD2LGnBHm7S4mVYHtBKXbuK8Ou/cTISv28/EOK0f22/GIUl59ExdEzKCo7hoIDFSS2HHuLjSg8eASGq9dvoH/ADZujD47efnTbXbC0dqL5fgfMxJ5096JnaBjOgUHYSYzd2Qf3iA9jvhAG3R64ng3B+fQ5hke8uHzlGgxWhwt/4sWoH/2DI8qqIBwHphPYCvcs7TC0d3UrDsdxEAQBgijpAan0Ot6FPyLY48XEUBCTkVksx5LgRRkMJ4IXRIiiqORS3GlogaHjkU1x6AGFLMuQJUoq49vid3yITMM95sOoP4BwOILocuyXJBpLbCO3vsmymVDWAlhyYyqVRi7HgGFZxONJJBKrihJRYMEy6+B5XhewJaFIyuZ5AQzDIpvLKaS5LIPVtSwmZzN4v0AIScmyROLxH4QUmUwaLMuoKtQO0Aox8zmJL4tZNYeX6O+tCelwJqemMDc/ryomzadt5TgBoVAA0eiSSsSrN/2TUNLUUUikHN2X9Q8Efh2SkNWC/jKUhxrhRpPnFj7hVl0DzK1daGppR91dMxLxGL7+EHGzbQlNthXUW1dwuyOKxSin5QoqYSMh7Hxs1xSp7y+eSOKV9w28viA8rwMY84fAkMGsZWS8HF+FZyKO0fEEPG/XkM5IejW6wgedVsXJMQwZAqfL/x20dxxL1fCQBTIoajIPjuGUJ0ZzKRqb22AwnqjG6fOXUFVrQtU5k7JW1lxAZa1mZL/x/9RZenaRGNnXmDblUA7j8Wr8BPOWrMv0nqWZAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Template\",\n    \"title\": \"Template\",\n    \"src\": \"/static/e00df42e002f4fc1f7dc1d30efeef0d1/2bef9/selecting-section.png\",\n    \"srcSet\": [\"/static/e00df42e002f4fc1f7dc1d30efeef0d1/a2ead/selecting-section.png 259w\", \"/static/e00df42e002f4fc1f7dc1d30efeef0d1/6b9fd/selecting-section.png 518w\", \"/static/e00df42e002f4fc1f7dc1d30efeef0d1/2bef9/selecting-section.png 1024w\"],\n    \"sizes\": \"(max-width: 1024px) 100vw, 1024px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Use the element's settings toolbar on the right side of the editor to modify and style elements.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/e67fb65b77ccac22160710897cbf37bc/b0de5/elements.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"53.28185328185329%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACZklEQVQoz21SS2sTYRSdX1BNmiadPJombR6dJjWP2iYE86jGUGtdpGYjKLgSBHWhblT8DW7qQnThTmy0PqoIrnQhqAhSqFBoaqytKSTSBILJZDJzvPOlnQj1wuV73Xu+c8+93ICQBu8IwjocgtE+Bp15BAd5L3N1b3GF0e8MQG8RcKDfgx6Tm8WZBv0Y8EQQGL+AcDQLs3MMRpsATm+wYng0AiGUQGxqFpHESUSTqs9iMjGDWOoUkuk5TMZPYCZ7HrmzF5HIzCE1nUMolqHPBAxRvt0dg8t7Dpxt4gwsvqO4dPUGVGs0mpAkCU1RZOcvK8u48+A+1taK7NxutyHuvj3KP8fgSBSjwQQszjAc7jQBjudgFpK4cu2WlrBn1Z0a3r5/h/zrJWxsbGr37bbM1sdPXxDgBIRAHHaSxuzwges1OsCTHpev32ZBLWKnyApjUS7/RqFQxOrqGkqlbTSbDciyDGn304XFlzDYfOgnTfWq7iYPOIN1FLwzqAGq5SpKB1AUWyxZIUalsohv63XItJekDmB+cQlqvmnAz1wF5QzUPZ66qDFstTrlVquoVCpameVyGZtbpU6MKHUBiaGNJsREay9NxT5AVcM/jQaKP36isF5EvV6nBgHFrRoKGzuo1YlhS9I0tJJ2Ds9h9Bhd/2eo2tflFdy99xDz5B8/fcb3XzLmF7aZv/lQI427TbEQOwbYNwSd0bkHGPynZAn7jAGQbor6phDDjoZPnr2iAT8E3u6DzhpAn/sYOB1Nv8sfgzCeYsMap6GNH1c923X1jvlpbZ+k2PCRadi9EzBaPOC9U3BlbuIv3OQ+uusZqa0AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Adding elements\",\n    \"title\": \"Adding elements\",\n    \"src\": \"/static/e67fb65b77ccac22160710897cbf37bc/e3189/elements.png\",\n    \"srcSet\": [\"/static/e67fb65b77ccac22160710897cbf37bc/a2ead/elements.png 259w\", \"/static/e67fb65b77ccac22160710897cbf37bc/6b9fd/elements.png 518w\", \"/static/e67fb65b77ccac22160710897cbf37bc/e3189/elements.png 1035w\", \"/static/e67fb65b77ccac22160710897cbf37bc/b0de5/elements.png 1517w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Experiment with different styles and layouts until your design aligns with your vision.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/3d1185b60d58078a550e01469918e89f/dd507/elements-2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"52.50965250965252%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACn0lEQVQoz2WSyU8TYRjG+w+YEEpp6TKdKW3pAi0t3WQxmBDcEg0hngQSjYTEg5p4MB48enOBIougeDDR6MGjRqMmJCYCZSnQoiRuB0TQpO20FGhn2se3Q0XUN/kyk2/e+X3f87yPzFjXDgXjgt7sBmP2QqmvQZnWDrnGRk8bzI5GaVVwTtqzokRlhtrgAlvlgcEegC9wBS5vB8oZK3SVbsjKyvVgCaYjmIpzQMk6pB84mx+sxQcFHaCgfQVTTYAGOPcfgt7qh9bkgdpYB2NNAE7vQWgrXdAZCcg09cDga8OJk12Ynp3HxNQMXr4ex43eIQSHxvDubQhT4yFMhOYQmlnEQnQZU9NzmF+I4uHjp2CqfNAYalFGisp11ZBpHUegsTbhdM9F7C0+mcZ6LIaVyFesvokixqfwb0WWPsDkaICnvhVq1gkNWwuZosIENUnq7L4gNQmCAEHMSe+JeALhSBTjk5P4+OkzMpktZOlbNitI32fDCyTbDbnaCru/GbbGZvKQrqohM7uKwHw+BzGXx+ZWRlob6U3wiSTiyQy+fEtjOyMgl9s5cG5+EVqzByptNZyHj6Lm2PHfQNcusNCczwPJVAqxeBzElmp1PYnw+x+kgFRkxSIwAg0NplRlgr+lC56W7v+BorjTLGSzJDm+61deTGGD/160RdyVzNkCFBcnav1t8Dae+gPsPHt+j9nL0oSDQ/fx/MUrrKxl0P9kDb2PVvHg2U9skxWFmp4JS3HjLF6UKC0orbDvAAu5O3Pu0t9T5sm3BI9c8cZ8GojToIssqQqDKuSRo+iUKE3YJ2chk6st4CioB1rb0TtwF9f7hnHr9ij6h8ekW/YN3sPN4B0EB0cQHBhBH61CT5D2L1+9RmGvh9nuRylTB3fHKH4BuiNF5w02SHAAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Other Elements\",\n    \"title\": \"Other Elements\",\n    \"src\": \"/static/3d1185b60d58078a550e01469918e89f/e3189/elements-2.png\",\n    \"srcSet\": [\"/static/3d1185b60d58078a550e01469918e89f/a2ead/elements-2.png 259w\", \"/static/3d1185b60d58078a550e01469918e89f/6b9fd/elements-2.png 518w\", \"/static/3d1185b60d58078a550e01469918e89f/e3189/elements-2.png 1035w\", \"/static/3d1185b60d58078a550e01469918e89f/dd507/elements-2.png 1528w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#selecting-a-template-designs-with-windframe","title":"Selecting a Template Designs with Windframe"},{"url":"#editing-template-designs","title":"Editing Template Designs"}]},"parent":{"__typename":"File","relativePath":"docs/editing-templates.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Editing Templates","metaDescription":"How to edit the templates designs using Windframe Editor"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation/","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/javascript/Installation/","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/Installation/","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/index/","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/react/chart/","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion/","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/widgets/","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations/","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert/","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete/","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge/","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb/","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/box/","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar/","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup/","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons/","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse/","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel/","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox/","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe/","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card/","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon/","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer/","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown/","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input/","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup/","title":"ListGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect/","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup/","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask/","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane/","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification/","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal/","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress/","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio/","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/select/","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating/","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels/","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll/","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider/","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2/","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch/","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner/","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination/","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader/","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar/","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker/","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper/","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs/","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker/","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable/","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar/","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/table/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/index/","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets/","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/index/","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/components/","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/javascript/widgets/","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/sections/","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert/","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/angular/forms/","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion/","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations/","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete/","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge/","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb/","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box/","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar/","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup/","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox/","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons/","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse/","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon/","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown/","title":"Dropdown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup/","title":"ListGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup/","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input/","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer/","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect/","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane/","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification/","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe/","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal/","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio/","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress/","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating/","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select/","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner/","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2/","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider/","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card/","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch/","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask/","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper/","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination/","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar/","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker/","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar/","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels/","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs/","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables/","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable/","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables/","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert/","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion/","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations/","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete/","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb/","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge/","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup/","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar/","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel/","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox/","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse/","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker/","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons/","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card/","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon/","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables/","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown/","title":"Dropdown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe/","title":"IFrame"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup/","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup/","title":"ListGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer/","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input/","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask/","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect/","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification/","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels/","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane/","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal/","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover/","title":"Popover"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating/","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress/","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio/","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select/","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider/","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms/","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2/","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch/","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner/","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar/","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper/","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination/","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar/","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs/","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker/","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/table/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/table/fixed_datatables/","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box/","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/table/datatables/","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/react/forms/","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables/","title":"DataTable"}}},{"node":{"fields":{"slug":"/components/index/","title":"Tailwind Components"}}},{"node":{"fields":{"slug":"/components/tailwind-alerts/","title":"Tailwind CSS Alert"}}},{"node":{"fields":{"slug":"/components/tailwind-badge/","title":"Tailwind CSS Badge"}}},{"node":{"fields":{"slug":"/components/tailwind-button/","title":"Tailwind CSS Button"}}},{"node":{"fields":{"slug":"/components/tailwind-card/","title":"Tailwind CSS Cards"}}},{"node":{"fields":{"slug":"/components/tailwind-footer/","title":"Tailwind CSS Footer"}}},{"node":{"fields":{"slug":"/components/tailwind-forms/","title":"Tailwind CSS Forms"}}},{"node":{"fields":{"slug":"/components/tailwind-gallery/","title":"Tailwind CSS Gallery"}}},{"node":{"fields":{"slug":"/components/tailwind-indicator/","title":"Tailwind CSS Indicator"}}},{"node":{"fields":{"slug":"/components/tailwind-modal/","title":"Tailwind CSS Modal"}}},{"node":{"fields":{"slug":"/components/tailwind-navbar/","title":"Tailwind CSS Navbar"}}},{"node":{"fields":{"slug":"/components/tailwind-pagination/","title":"Tailwind CSS Pagination"}}},{"node":{"fields":{"slug":"/components/tailwind-progressbar/","title":"Tailwind CSS Progress Bar"}}},{"node":{"fields":{"slug":"/components/tailwind-rating/","title":"Tailwind CSS Rating"}}},{"node":{"fields":{"slug":"/components/tailwind-sidebar/","title":"Tailwind CSS Sidebar"}}},{"node":{"fields":{"slug":"/components/tailwind-stepper/","title":"Tailwind CSS Stepper"}}},{"node":{"fields":{"slug":"/components/tailwind-tabs/","title":"Tailwind CSS Tab"}}},{"node":{"fields":{"slug":"/components/tailwind-table/","title":"Tailwind CSS Table"}}},{"node":{"fields":{"slug":"/docs/adding-custom-template/","title":"Adding Custom Template on Windframe"}}},{"node":{"fields":{"slug":"/docs/adding-elements/","title":"Adding Elements"}}},{"node":{"fields":{"slug":"/docs/adding-ui-library/","title":"Adding UI library in Windframe"}}},{"node":{"fields":{"slug":"/docs/ai-experiments/","title":"AI Experiments"}}},{"node":{"fields":{"slug":"/docs/built-in-templates/","title":"Built in Templates"}}},{"node":{"fields":{"slug":"/docs/canvas-toolbar/","title":"Canvas Toolbar"}}},{"node":{"fields":{"slug":"/docs/creating-new-project/","title":"Creating New Project"}}},{"node":{"fields":{"slug":"/docs/editing-existing-project/","title":"Editing Existing Project"}}},{"node":{"fields":{"slug":"/docs/editing-templates/","title":"Editing Templates"}}},{"node":{"fields":{"slug":"/docs/element-quick-actions/","title":"Element Quick Action"}}},{"node":{"fields":{"slug":"/docs/exporting-project/","title":"Exporting Projects"}}},{"node":{"fields":{"slug":"/docs/history/","title":"History"}}},{"node":{"fields":{"slug":"/docs/import-external-css/","title":"Importing your CSS code into Windframe"}}},{"node":{"fields":{"slug":"/docs/import-tailwind-config/","title":"Importing Tailwind CSS configuration into Windframe"}}},{"node":{"fields":{"slug":"/docs/importing-component/","title":"Import your JSX Components into Windframe"}}},{"node":{"fields":{"slug":"/docs/importing-jsscript/","title":"Importing JS/Script into Windframe"}}},{"node":{"fields":{"slug":"/docs/importing-templates/","title":"Importing HTML Component/Template into Windframe"}}},{"node":{"fields":{"slug":"/docs/index/","title":"Getting Started"}}},{"node":{"fields":{"slug":"/docs/layers/","title":"Layers"}}},{"node":{"fields":{"slug":"/docs/publish-project/","title":"Publishing Projects"}}},{"node":{"fields":{"slug":"/docs/section-code-editor/","title":"Section Code Editor"}}},{"node":{"fields":{"slug":"/docs/windframe-ai/","title":"AI-Generated Templates"}}},{"node":{"fields":{"slug":"/docs/toolbar/","title":"Windframe Toolbar"}}},{"node":{"fields":{"slug":"/Tailwind-css-slider/","title":"Tailwind Slider: Elevate Your Website Design with Dynamic Content"}}},{"node":{"fields":{"slug":"/How-to-add-color-to-Tailwind/","title":"How to add Fonts in Tailwind CSS"}}},{"node":{"fields":{"slug":"/awesome-10-projects-built-with-tailwind/","title":"10 Awesome Project built with Tailwind CSS"}}},{"node":{"fields":{"slug":"/bootstrap-5-all-you-need-to-know/","title":"All you need to know about Bootstrap 5"}}},{"node":{"fields":{"slug":"/Tailwind-width/","title":"Tailwind CSS Width: Complete Guide to Width Classes, Full Width, Fit Content & More"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes/","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/create-animation-with-tailwind-css/","title":"How to create Tailwind CSS Animations"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast/","title":"Bootstrap 5 navbar-How To Create A Beautiful Navbar Using Bootstrap 5."}}},{"node":{"fields":{"slug":"/create-datatable-in-angular-10/","title":"How To Create A Data table Using Angular Bootstrap"}}},{"node":{"fields":{"slug":"/create-bootstrap-charts-using-bootstrap5/","title":"Bootstrap Charts: How To Create Bootstrap 5 Charts with Chart.js (Line, Bar, Pie & Doughnut)"}}},{"node":{"fields":{"slug":"/create-datepicker-with-contrast/","title":"How to create a React datepicker using React Bootstrap."}}},{"node":{"fields":{"slug":"/create-datatable-with-contrast/","title":"How to create a beautiful Bootstrap Data table with Icons"}}},{"node":{"fields":{"slug":"/create-multiselect-with-contrast/","title":"How to create a beautiful React multiselect."}}},{"node":{"fields":{"slug":"/create-forms-with-contrast/","title":"React bootstrap 5 form- How to create React Bootstrap 5 Forms"}}},{"node":{"fields":{"slug":"/create-progress-with-contrast/","title":"React Bootstrap Progress bar-How to create a beautiful React Bootstrap 5 progress bar."}}},{"node":{"fields":{"slug":"/create-select-with-contrast/","title":"How to create a beautiful React Bootstrap select with icons."}}},{"node":{"fields":{"slug":"/create-responsive-sidebar-in-react/","title":"How to create a responsive React Bootstrap Sidebar"}}},{"node":{"fields":{"slug":"/create-stepper-with-contrast/","title":"Bootstrap 5 stepper-How to create a beautiful Bootstrap 5 stepper"}}},{"node":{"fields":{"slug":"/create-tables-with-contrast/","title":"How to create a beautiful React Bootstrap table."}}},{"node":{"fields":{"slug":"/create-tabs-with-contrast/","title":"How to create beautiful React Bootstrap 5 tabs"}}},{"node":{"fields":{"slug":"/create-timepicker-with-contrast/","title":"How to create a React Timepicker using React Bootstrap."}}},{"node":{"fields":{"slug":"/css-animations/","title":"Introduction to CSS Animations"}}},{"node":{"fields":{"slug":"/css-backgrounds/","title":"CSS Backgrounds"}}},{"node":{"fields":{"slug":"/css-borders/","title":"CSS Borders"}}},{"node":{"fields":{"slug":"/css-colors/","title":"CSS Colors"}}},{"node":{"fields":{"slug":"/css-combinators/","title":"CSS Combinators"}}},{"node":{"fields":{"slug":"/css-font/","title":" CSS Fonts"}}},{"node":{"fields":{"slug":"/css-flexbox/","title":"CSS Flexbox"}}},{"node":{"fields":{"slug":"/css-grid/","title":"CSS Grid"}}},{"node":{"fields":{"slug":"/css-height-and-width/","title":"CSS Height And Width"}}},{"node":{"fields":{"slug":"/css-margins/","title":"CSS Margins"}}},{"node":{"fields":{"slug":"/css-icons/","title":"HTML Icons: How to Add Icons to Your HTML Page Using CSS and Icon Libraries"}}},{"node":{"fields":{"slug":"/css-overflow/","title":"CSS Overflow"}}},{"node":{"fields":{"slug":"/css-padding/","title":"CSS Padding"}}},{"node":{"fields":{"slug":"/css-pagination/","title":"Tutorial: CSS Pagination"}}},{"node":{"fields":{"slug":"/css-syntax-and-selector/","title":"CSS Syntax and Selector"}}},{"node":{"fields":{"slug":"/css-text-and-layout/","title":"CSS Text and Layout"}}},{"node":{"fields":{"slug":"/css-transform-translate/","title":"CSS transform and translate"}}},{"node":{"fields":{"slug":"/css-tutorial-1/","title":"Introduction to CSS"}}},{"node":{"fields":{"slug":"/css-website-layout/","title":"Full Website Layout"}}},{"node":{"fields":{"slug":"/css-z-index/","title":"CSS Z-Index"}}},{"node":{"fields":{"slug":"/css.outlines/","title":"CSS Outlines"}}},{"node":{"fields":{"slug":"/differences-between-tailwind-css-and-sass/","title":"Differences between Tailwind CSS and SASS/SCSS"}}},{"node":{"fields":{"slug":"/diffrences-between-tailwind-css-and-bootstrap/","title":"Differences Between Tailwind CSS and Bootstrap"}}},{"node":{"fields":{"slug":"/how-to-add-icons-to-your-bootstrap-5-project/","title":"Bootstrap 5 icons-How to add Icons to your Bootstrap 5 Project"}}},{"node":{"fields":{"slug":"/how-to-add-tailwind-css-colors-and-fonts-to-your-project/","title":"How to add tailwind CSS colors to your project"}}},{"node":{"fields":{"slug":"/how-to-add-tailwind-css-grid-to-your-project/","title":"How to use Tailwind CSS Grid."}}},{"node":{"fields":{"slug":"/how-to-build-tailwindcss-progressbar/","title":"How to build Tailwind Progress Bar."}}},{"node":{"fields":{"slug":"/how-to-build-tailwindcss-timepicker-with-tailwind-element/","title":"How to build Tailwind css timepicker with Tailwind elements"}}},{"node":{"fields":{"slug":"/how-to-create-a-bootstrap5-modal/","title":"How to create a Bootstrap 5 Modal."}}},{"node":{"fields":{"slug":"/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/","title":"How to create a Responsive Navigation bar Using Tailwind CSS"}}},{"node":{"fields":{"slug":"/how-to-create-a-react-modal-using-tailwind-css/","title":"How to create a React Modal using Tailwind CSS."}}},{"node":{"fields":{"slug":"/how-to-create-a-responsive-bootstrap-5-sidebar/","title":"Bootstrap 5 Sidebar-How to create a Responsive Bootstrap 5 Sidebar"}}},{"node":{"fields":{"slug":"/how-to-create-a-responsive-react-sidebar-design-using-tailwind-css/","title":"How to Create a Responsive React Sidebar Design Using Tailwind CSS."}}},{"node":{"fields":{"slug":"/how-to-create-an-angular-bootstrap-sidebar/","title":"How to create a Angular Bootstrap Sidebar"}}},{"node":{"fields":{"slug":"/how-to-create-and-style-a-responsive-form-using-tailwindcss/","title":"Tailwind form-How to create and style a Responsive Form using Tailwind CSS"}}},{"node":{"fields":{"slug":"/how-to-create-beautiful-bootstrap-5-checkbox/","title":"How to create Beautiful Bootstrap 5 Checkboxes and Radios."}}},{"node":{"fields":{"slug":"/how-to-create-beautiful-bootstrap-5-navbars/","title":"How to create Beautiful Bootstrap 5 Navbars"}}},{"node":{"fields":{"slug":"/how-to-create-beautiful-bootstrap-tabs-in-bootstrap-5/","title":"How to create Beautiful Bootstrap Tabs in Bootstrap 5"}}},{"node":{"fields":{"slug":"/how-to-create-react-forms-using-tailwind-css/","title":"How to create Tailwind CSS React Forms."}}},{"node":{"fields":{"slug":"/how-to-create-react-tables-using-tailwind-css/","title":"How to create Tailwind Tables using React."}}},{"node":{"fields":{"slug":"/how-to-create-react-tabs-with-tailwind-css/","title":"How to Create React Tabs with Tailwind CSS"}}},{"node":{"fields":{"slug":"/how-to-create-tailwind-css-dropdown/","title":"How to create Tailwind CSS dropdown"}}},{"node":{"fields":{"slug":"/how-to-create-tailwind-css-components-for-your-website/","title":"How to create Tailwind CSS Components for your Website"}}},{"node":{"fields":{"slug":"/how-to-create-tailwind-css-modal/","title":"How to create Tailwind CSS Modal:A Step-by-Step Guide"}}},{"node":{"fields":{"slug":"/how-to-create-tailwind-css-tables/","title":"How to Create Tailwind CSS Table-Comprehensive Guide with Templates & Examples"}}},{"node":{"fields":{"slug":"/how-to-implement-a-react-step-progress-bar-using-tailwind-css/","title":"How to Implement a React Step Progress Bar Using Tailwind CSS."}}},{"node":{"fields":{"slug":"/how-to-implement-dark-mode-in-tailwind-css/","title":"How to implement dark mode in React using tailwind css."}}},{"node":{"fields":{"slug":"/how-to-install-tailwind-css-in-laravel/","title":"How to install Tailwind CSS with Laravel"}}},{"node":{"fields":{"slug":"/how-to-install-tailwind-css-in-vuejs/","title":"How to Install Tailwind CSS in Vue.js"}}},{"node":{"fields":{"slug":"/how-to-use-tailwind-css-flex/","title":"How to use Tailwind CSS Flex"}}},{"node":{"fields":{"slug":"/how-to-use-tailwind-css-in-HTML/","title":"How to use Tailwind CSS in HTML"}}},{"node":{"fields":{"slug":"/how-to-use-tailwind-css-in-react/","title":"How To Use Tailwind CSS In React."}}},{"node":{"fields":{"slug":"/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/","title":"How to use tailwind css padding, margin and border in your project."}}},{"node":{"fields":{"slug":"/how-to-use-the-tailwind-css-JIT-CDN/","title":"Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN"}}},{"node":{"fields":{"slug":"/html-5-formating/","title":"Html 5 formating"}}},{"node":{"fields":{"slug":"/html-5-layout/","title":"Html 5 Layout"}}},{"node":{"fields":{"slug":"/html-basic-tags-example/","title":"Html 5 Basic Tags Example"}}},{"node":{"fields":{"slug":"/html-editors/","title":"Html Editors"}}},{"node":{"fields":{"slug":"/html-element/","title":"All you need to know about Html Elements"}}},{"node":{"fields":{"slug":"/html-file-path/","title":"HTML File path, Charset and Meta"}}},{"node":{"fields":{"slug":"/html-forms/","title":"HTML Forms"}}},{"node":{"fields":{"slug":"/html-javascript/","title":"Including JavaScript in your HTML project."}}},{"node":{"fields":{"slug":"/html-quotations/","title":"HTML Quotations and comments"}}},{"node":{"fields":{"slug":"/html-responsive/","title":"Creating Responsive HTML web design"}}},{"node":{"fields":{"slug":"/html-table/","title":"HTML Tables, Classes and Ids"}}},{"node":{"fields":{"slug":"/introduction-to-html/","title":"Introducing HTML"}}},{"node":{"fields":{"slug":"/javascript-array-method/","title":"Tutorial: Javascript Array Method"}}},{"node":{"fields":{"slug":"/javascript-arrays/","title":"Tutorial: Javascript Arrays"}}},{"node":{"fields":{"slug":"/javascript-arrow-functions/","title":"Tutorial: Javascript Arrow Functions"}}},{"node":{"fields":{"slug":"/javascript-basics/","title":"Basics of Javascript"}}},{"node":{"fields":{"slug":"/javascript-booleans/","title":"Tutorial: Javascript Boolean"}}},{"node":{"fields":{"slug":"/javascript-class/","title":"Tutorial: Javascript Classes"}}},{"node":{"fields":{"slug":"/javascript-control-flow/","title":"Tutorial: Javascript Control Flow"}}},{"node":{"fields":{"slug":"/javascript-data-type/","title":"Tutorial: Javascript Data Type"}}},{"node":{"fields":{"slug":"/javascript-date-object/","title":"Tutorial: Javascript Date Objects"}}},{"node":{"fields":{"slug":"/javascript-display/","title":"Tutorial: Javascript Data Output"}}},{"node":{"fields":{"slug":"/javascript-events/","title":"Tutorial: Javascript Events"}}},{"node":{"fields":{"slug":"/javascript-for-loop/","title":"Tutorial: Javascript Loop"}}},{"node":{"fields":{"slug":"/javascript-functions/","title":"Tutorial: Javascript Functions"}}},{"node":{"fields":{"slug":"/javascript-how-it-works/","title":"Tutorial: How Javascript Works"}}},{"node":{"fields":{"slug":"/javascript-html-dom-events/","title":"Tutorial: Javascript Dom Events"}}},{"node":{"fields":{"slug":"/javascript-html-dom-methods/","title":"Tutorial: Javascript Dom Methods"}}},{"node":{"fields":{"slug":"/javascript-iteration/","title":"Tutorial: Javascript Array Iteration"}}},{"node":{"fields":{"slug":"/javascript-let-and-const/","title":"Tutorial: Javascript Let And Const"}}},{"node":{"fields":{"slug":"/javascript-math-object/","title":"Tutorial: Javascript Math Object"}}},{"node":{"fields":{"slug":"/javascript-number-methods/","title":"Tutorial: Javascript Number Methods"}}},{"node":{"fields":{"slug":"/javascript-object/","title":"Tutorial: Javascript Objects"}}},{"node":{"fields":{"slug":"/javascript-operator/","title":"Tutorial: Javascript Operator"}}},{"node":{"fields":{"slug":"/javascript-scope/","title":"Tutorial: Javascript Scope"}}},{"node":{"fields":{"slug":"/javascript-sort/","title":"Tutorial: Sorting In Javascript"}}},{"node":{"fields":{"slug":"/javascript-statement/","title":"Tutorial: Javascript statement, syntax and comments"}}},{"node":{"fields":{"slug":"/javascript-string-methods/","title":"Tutorial: Javascript String Methods"}}},{"node":{"fields":{"slug":"/javascript-this-keyword/","title":"Tutorial: Javascript This Keyword"}}},{"node":{"fields":{"slug":"/javascript-tutorial-1/","title":"Introduction to Javascript"}}},{"node":{"fields":{"slug":"/javascript-variables/","title":"Tutorial: Javascript Variables"}}},{"node":{"fields":{"slug":"/setting-up-your-first-project-using-tailwind-css/","title":"How to set up your first Tailwind CSS Project"}}},{"node":{"fields":{"slug":"/tailwind-3.0-is-finally-out/","title":"Tailwind 3.0 is finally available. here are all the major changes"}}},{"node":{"fields":{"slug":"/tailwind-css-10-templates-and-themes/","title":"10 tailwind CSS templates and themes"}}},{"node":{"fields":{"slug":"/tailwind-css-in-nextjs/","title":"How to use and set up Tailwind CSS with Nextjs."}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react/","title":"How to use Bootstrap in React Using a React Library"}}},{"node":{"fields":{"slug":"/what-is-nodejs-and-express/","title":"What is Nodejs, Express and When Should It Be Used."}}},{"node":{"fields":{"slug":"/why-tailwind-css-is-good/","title":"Why is Tailwind CSS better than other CSS framework"}}},{"node":{"fields":{"slug":"/classes/Z-index/","title":"Tailwind CSS Z-index"}}},{"node":{"fields":{"slug":"/classes/index/","title":"Tailwind CSS Classes"}}},{"node":{"fields":{"slug":"/classes/tailwind-align-items/","title":"Tailwind Align Items"}}},{"node":{"fields":{"slug":"/classes/tailwind-align-self/","title":"Tailwind Align Self"}}},{"node":{"fields":{"slug":"/classes/tailwind-animation/","title":"Tailwind Animation"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-attachment/","title":"Tailwind Background Attachment"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-clip/","title":"Tailwind Background Clip"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-color/","title":"Tailwind Background Color"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-image/","title":"Tailwind CSS Background Image"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-origin/","title":"Tailwind CSS Background Origin"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-position/","title":"Tailwind CSS Background Position"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-repeat/","title":"Tailwind CSS Background Repeat"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-size/","title":"Tailwind CSS Background Size"}}},{"node":{"fields":{"slug":"/classes/tailwind-border-collapse/","title":"Tailwind Border Collapse"}}},{"node":{"fields":{"slug":"/classes/tailwind-border-radius/","title":"Tailwind CSS Border Radius"}}},{"node":{"fields":{"slug":"/classes/tailwind-border-spacing/","title":"Tailwind CSS Border Spacing"}}},{"node":{"fields":{"slug":"/classes/tailwind-border-style/","title":"Tailwind CSS Border Style"}}},{"node":{"fields":{"slug":"/classes/tailwind-border-width/","title":"Tailwind CSS Border Width"}}},{"node":{"fields":{"slug":"/classes/tailwind-box-shadow-color/","title":"Tailwind CSS Box Shadow Color"}}},{"node":{"fields":{"slug":"/classes/tailwind-box-shadow/","title":"Tailwind CSS Box Shadow"}}},{"node":{"fields":{"slug":"/classes/tailwind-content/","title":"Tailwind CSS Content"}}},{"node":{"fields":{"slug":"/classes/tailwind-display/","title":"Tailwind CSS Display"}}},{"node":{"fields":{"slug":"/classes/tailwind-fill/","title":"Tailwind CSS Fill"}}},{"node":{"fields":{"slug":"/classes/tailwind-flex-direction/","title":"Tailwind CSS Flex Direction"}}},{"node":{"fields":{"slug":"/classes/tailwind-flex-grow/","title":"Tailwind CSS Flex Grow"}}},{"node":{"fields":{"slug":"/classes/tailwind-flex-shrink/","title":"Tailwind CSS Flex Shrink"}}},{"node":{"fields":{"slug":"/classes/tailwind-flex-wrap/","title":"Tailwind CSS Flex wrap"}}},{"node":{"fields":{"slug":"/classes/tailwind-flex/","title":"Tailwind CSS Flex"}}},{"node":{"fields":{"slug":"/classes/tailwind-floats/","title":"Tailwind CSS Floats"}}},{"node":{"fields":{"slug":"/classes/tailwind-font-family/","title":"Tailwind Font Family"}}},{"node":{"fields":{"slug":"/classes/tailwind-font-size/","title":"Tailwind CSS Font size"}}},{"node":{"fields":{"slug":"/classes/tailwind-font-weight/","title":"Tailwind CSS Font Weight"}}},{"node":{"fields":{"slug":"/classes/tailwind-gap/","title":"Tailwind CSS Gap"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-auto-columns/","title":"Tailwind CSS Grid Auto Columns"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-auto-flow/","title":"Tailwind CSS Grid Auto Flow"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-auto-rows/","title":"Tailwind CSS Grid Auto Rows"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-column-start-end/","title":"Tailwind CSS Grid Column Start/End"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-column/","title":"Tailwind CSS Grid Template Column"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-row-start-end/","title":"Tailwind CSS Grid Row Start/End"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-row/","title":"Tailwind CSS Grid Template Row"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid/","title":"Tailwind Grid"}}},{"node":{"fields":{"slug":"/classes/tailwind-height/","title":"Tailwind Height"}}},{"node":{"fields":{"slug":"/classes/tailwind-hyphens/","title":"Tailwind CSS Hyphens"}}},{"node":{"fields":{"slug":"/classes/tailwind-invisible/","title":"Tailwind CSS Invisibility"}}},{"node":{"fields":{"slug":"/classes/tailwind-justify-content/","title":"Tailwind CSS Justify Content"}}},{"node":{"fields":{"slug":"/classes/tailwind-justify-items/","title":"Tailwind CSS Justify-items"}}},{"node":{"fields":{"slug":"/classes/tailwind-justify-self/","title":"Tailwind CSS Justify Self"}}},{"node":{"fields":{"slug":"/classes/tailwind-letter-spacing/","title":"Tailwind CSS Letter-spacing"}}},{"node":{"fields":{"slug":"/classes/tailwind-line-clamp/","title":"Tailwind CSS Line Clamp"}}},{"node":{"fields":{"slug":"/classes/tailwind-lineheight/","title":"Tailwind CSS Line-height"}}},{"node":{"fields":{"slug":"/classes/tailwind-list-style-position/","title":"Tailwind CSS List Style Position"}}},{"node":{"fields":{"slug":"/classes/tailwind-list-style-type/","title":"Tailwind CSS List Style Type"}}},{"node":{"fields":{"slug":"/classes/tailwind-margin/","title":"Tailwind Margin"}}},{"node":{"fields":{"slug":"/classes/tailwind-max-height/","title":"Tailwind CSS Max-Height"}}},{"node":{"fields":{"slug":"/classes/tailwind-max-width/","title":"Tailwind CSS Max-Width"}}},{"node":{"fields":{"slug":"/classes/tailwind-min-height/","title":"Tailwind CSS Min-Height"}}},{"node":{"fields":{"slug":"/classes/tailwind-min-width/","title":"Tailwind CSS Min-Width"}}},{"node":{"fields":{"slug":"/classes/tailwind-object-fit/","title":"Tailwind CSS Object Fit"}}},{"node":{"fields":{"slug":"/classes/tailwind-object-positions/","title":"Tailwind CSS Object Position"}}},{"node":{"fields":{"slug":"/classes/tailwind-opacity/","title":"Tailwind CSS Opacity"}}},{"node":{"fields":{"slug":"/classes/tailwind-order/","title":"Tailwind CSS Order"}}},{"node":{"fields":{"slug":"/classes/tailwind-overflow/","title":"Tailwind CSS Overflow"}}},{"node":{"fields":{"slug":"/classes/tailwind-overscroll-behaviour/","title":"Tailwind CSS Overscroll Behaviour"}}},{"node":{"fields":{"slug":"/classes/tailwind-padding/","title":"Tailwind Padding"}}},{"node":{"fields":{"slug":"/classes/tailwind-place-content/","title":"Tailwind CSS Place-content"}}},{"node":{"fields":{"slug":"/classes/tailwind-place-items/","title":"Tailwind CSS Place-items"}}},{"node":{"fields":{"slug":"/classes/tailwind-place-self/","title":"Tailwind CSS Place-self"}}},{"node":{"fields":{"slug":"/classes/tailwind-position/","title":"Tailwind CSS Position"}}},{"node":{"fields":{"slug":"/classes/tailwind-rotate/","title":"Tailwind CSS Rotate"}}},{"node":{"fields":{"slug":"/classes/tailwind-scale/","title":"Tailwind CSS Scale"}}},{"node":{"fields":{"slug":"/classes/tailwind-screen-readers/","title":"Tailwind CSS Screen Reader"}}},{"node":{"fields":{"slug":"/classes/tailwind-skew/","title":"Tailwind CSS Skew"}}},{"node":{"fields":{"slug":"/classes/tailwind-stroke-width/","title":"Tailwind CSS Stroke Width"}}},{"node":{"fields":{"slug":"/classes/tailwind-stroke/","title":"Tailwind CSS Stroke"}}},{"node":{"fields":{"slug":"/classes/tailwind-text-align/","title":"Tailwind CSS Text-align"}}},{"node":{"fields":{"slug":"/classes/tailwind-text-color/","title":"Tailwind CSS Text Color"}}},{"node":{"fields":{"slug":"/classes/tailwind-text-decoration-style/","title":"Tailwind CSS Text Decoration Style"}}},{"node":{"fields":{"slug":"/classes/tailwind-text-decoration-thickness/","title":"Tailwind CSS Text Decoration Thickness"}}},{"node":{"fields":{"slug":"/classes/tailwind-text-decoration/","title":"Tailwind CSS Text Decoration"}}},{"node":{"fields":{"slug":"/classes/tailwind-text-indent/","title":"Tailwind CSS Text Indent"}}},{"node":{"fields":{"slug":"/classes/tailwind-transform-origin/","title":"Tailwind CSS Transform Origin"}}},{"node":{"fields":{"slug":"/classes/tailwind-transform/","title":"Tailwind CSS Transform"}}},{"node":{"fields":{"slug":"/classes/tailwind-translate/","title":"Tailwind CSS Translate"}}},{"node":{"fields":{"slug":"/classes/tailwind-vertical-align/","title":"Tailwind CSS Vertical Align"}}},{"node":{"fields":{"slug":"/classes/tailwind-whitespace/","title":"Tailwind CSS Whitespace"}}},{"node":{"fields":{"slug":"/classes/tailwind-width/","title":"Tailwind CSS Width"}}},{"node":{"fields":{"slug":"/classes/tailwind-word-break/","title":"Tailwind CSS Word Break"}}},{"node":{"fields":{"slug":"/classes/tailwind-border-color/","title":"Tailwind Border Color"}}},{"node":{"fields":{"slug":"/unit/first-block-page/","title":"Contrast Headers Blocks Page"}}}]}},"pageContext":{"id":"13b24836-1f6d-5988-9d57-8757150428dd"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","956403285"]}