{"componentChunkName":"component---src-templates-windframedocs-js","path":"/windframe/docs/importing-templates/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"d06f536e-50c9-5209-8ce7-171dc3d1020c","title":"Importing HTML Component/Template into Windframe","slug":"/docs/importing-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\": \"Importing HTML Component/Template into Windframe\",\n  \"metaTitle\": \"Importing templates into Windframe\",\n  \"metaDescription\": \"How to import other templates and designs into Windframe and use.\",\n  \"canonicalUrl\": \"https://windframe.dev/docs/importing-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(\"iframe\", {\n    width: \"560\",\n    height: \"315\",\n    src: \"https://www.youtube.com/embed/48VBbmYH6PA\",\n    title: \"How to import templates and components in Windframe\",\n    frameBorder: \"0\",\n    allow: \"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\",\n    allowFullScreen: true\n  }), mdx(\"p\", null, \"Windframe allows you to import your HTML components/template directly into the editor. This feature empowers you to edit your design using the editor. These HTML components can be added to the editor by pasting their content or importing their respective files into the canvas.\"), mdx(\"h2\", null, \"How to Import Templates and Component into Windframe\"), mdx(\"p\", null, \"Here is a step-by-step guide on how to import HTML components/template code or file into Windframe. Before starting this process, ensure that your HTML code has valid syntax to ensure proper parsing.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Step 1:\"), \" On Windframe's editor, click on the import button.\"), 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/419ae0f19685287df8fe7a9db63ba11b/e8814/import-options.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\": \"58.687258687258684%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAA7DAAAOwwHHb6hkAAACOUlEQVQoz52TTU8TURSG+xdKhTIWOv0ASqfTQdJKW6yiJILGuNKVG7daYxTjRtTEn2DiyoWJv8EYNX6UQvhSW6RC1B1sTMfWUkgdhU6nr+fecVqbsDCe5M29mfve555z7h1bfOw0QtET6PYOwT0QhTg4wuddbpkURmevDDFwGIPDY/BKcf7N4QpyMY8vFIcnlEC/coTvtY2MTkPyjiPsD8MXiELwDRHwEI0tOT10gBjmI1tTYqegxCcIEEMvHSZRIgHa62ZAOXIWUvg4BDrtwsUUVvPrmF98h8Xl7L5aWHqP/NpnrJKW3ubwcf0LHj18DJdHgZ8qsEnDSfTJCRygDK7evIv/idmFZdipNV4q3ebuj0AQFTipb5ev3+KGWq2Ger2ORgPQNA2lUgk7O1soFgsol8v0vUHrBvexePVmFg4LyGACpdtFSk1Nc4MJa/B5ofAVuZU13H+QwbMXeWSzH5ognXwsXs/MocMC+oMxflv2HglXbtxuAs3RoOxUPHmaI61QfzexsbEJwzDafG3AAXkUTnoKdlc70MpQVVXMZD5RqSp+VLd5C1iYZe8DPEi96+wJoYOUmjKBum4CmarVKr6Xitje+oZKpcKBuq7zNTZyYHqu1UMPvSEGNEu+0zy9GWxOMowGL9Uw6n8tmb50Zr6VIQN205NhwEvXzFvWtJ/4tbvHtWtpj6nGZa0xH4vnL9NwuP8AE4l7EPsmIfgVBCPjODZ5HsmT55Cc+AeRj/kjR8/wP0akC/4Nd5KPdR2JAI8AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"editor\",\n    \"title\": \"editor\",\n    \"src\": \"/static/419ae0f19685287df8fe7a9db63ba11b/e3189/import-options.png\",\n    \"srcSet\": [\"/static/419ae0f19685287df8fe7a9db63ba11b/a2ead/import-options.png 259w\", \"/static/419ae0f19685287df8fe7a9db63ba11b/6b9fd/import-options.png 518w\", \"/static/419ae0f19685287df8fe7a9db63ba11b/e3189/import-options.png 1035w\", \"/static/419ae0f19685287df8fe7a9db63ba11b/e8814/import-options.png 1392w\"],\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, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Step 2:\"), \" Select the \\\"Add HTML Code\\\" option from the dropdown menu displayed.\"), 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/ff07e2b1cd53fe1ff96195666cc47ea6/8b84a/selecting-html.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/Ca1DAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACKElEQVQoz5WTW08TQRTH9yMYEei23e4W2+2Fbnd7BdtQgoFIfAETE/EBhRiJaGKa6ItPvvpg9MnP4QUV01Q/gJfEaIglSluhVmUJSC2pvWz/nh2bKBhN2OTkZGbO/Ob/PzPLRYcmYPWMgpcUCO4oeFcYh+x+dAsBdNn8kHwDcClJWPtCbHyA96DH0Q+rU4XNpcKnnkQochl8nwb74TC4SCwNyZ2CljyGYHgEshyB4I1D9MQo4uwQwR2BQ45C8g4gPjyBUGKcHeIODkHwRGCTNThojxmcTx2DHEwhMToJJTqCpwuL+FQqYyX/EfnCKgrFtU5eZbn8eR2l8hc2/rquY3LqHLpFFc7+IxDJDadEh+H0xtBLFm7cuoP9fqdnL+EgtccEMoUWh0L90Aio4XHmGSuqNxpot9uo1WooldbwLlfE8vIK8vkCmzcMA81mk9WeOjuPrg6QKbSIBKSG9pDCuwtPWFGz1WJ5e3sLz1+8wc3bWdx78BpLSzkCGmjTWqtlsJqpvUA5kIBFDDLZ9x9ldgF3dirIZN/i5ascNjZ06LrO5k2VLeMfQPP6e8n2LmDHjmn5/YcitjZ1VCrf0KBWmHYZsHPoX0BeJLuCwib/BJqbmgSo13+Q0u+oVqss/gd00FPjJI8C3kkK7QE8XMzu/5ZnLnaAg3AqKXDJ5HVI8lH6Q1SMnziD2fmrmD6fxvRc+lfeG3O/12YuXIE6OEYPO0YPPwz/8Wv4CQPVQuFmxQ/cAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"selecting\",\n    \"title\": \"selecting\",\n    \"src\": \"/static/ff07e2b1cd53fe1ff96195666cc47ea6/e3189/selecting-html.png\",\n    \"srcSet\": [\"/static/ff07e2b1cd53fe1ff96195666cc47ea6/a2ead/selecting-html.png 259w\", \"/static/ff07e2b1cd53fe1ff96195666cc47ea6/6b9fd/selecting-html.png 518w\", \"/static/ff07e2b1cd53fe1ff96195666cc47ea6/e3189/selecting-html.png 1035w\", \"/static/ff07e2b1cd53fe1ff96195666cc47ea6/8b84a/selecting-html.png 1531w\"],\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, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Step 3:\"), \" A popup modal will display on the screen with two options. You can either choose to paste the html component or to upload the code file. In this case, we will paste the component we copied.\"), 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/81f57c4650005911b8a7ea022cfbb304/d0ab7/options.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/Ca1DAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAB8klEQVQoz5WSy4vTUBSH67R5NW3Tjmkn6SttHk3SJE2a9IldjCtdKYjgjIJLUXEhiAs3bgSRWeof/PPc2zjOICguPg5c7vnu795zK2K9DUFSIMp1qnXURAVSXeOISgtKo8NrVVQ5NbFBe5t8r6Q0oKomJFnjDrZWEaRmKVQhkExRO3DmO4zdHHf7AXRiMF3A8nLOZFbAGEd0YKsMIXORKKlHITulKsgw+0MslxmCeYKHj17g4uVbPH3+Ck8uX6M4PIbl72HPD7DDezAnGeIkxWRqU+8xDJOzWpFklV9zMBpjt9siilO8efcRX779wKfPV/h69R3nD55BM1KcTffojgr0RinyYgXX9XBSk0thmZDJuHA4xmazRpRk0AczGCMPJnE2dGHPEoRxgSDKESYFHD9FtqTqujgRfgt5wpvCHQk3lHAXLLFMtwiJiNVkDT9awY9XCAjbz/4uZG/IhFsSLijhfEZvRI1+xFId8Uv+S/jrytMgR8BTFX/wTyGTXQvXTJjCckJqzHkzTxgfYcKwFKZZDse5IeRfpxwKWxyOLOxpyotshe3hA+zgnKYZwLQSGFZ8G/qHxWoDz5tdT1mgf1iTGuzbaDQUGS3tFIY5gN4z0dEdNDQTSlNHvdW9TbMLlWrP6KN9qh9F1TtoT7aw77/HT7R3KKj75fOOAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Code options\",\n    \"title\": \"Code options\",\n    \"src\": \"/static/81f57c4650005911b8a7ea022cfbb304/e3189/options.png\",\n    \"srcSet\": [\"/static/81f57c4650005911b8a7ea022cfbb304/a2ead/options.png 259w\", \"/static/81f57c4650005911b8a7ea022cfbb304/6b9fd/options.png 518w\", \"/static/81f57c4650005911b8a7ea022cfbb304/e3189/options.png 1035w\", \"/static/81f57c4650005911b8a7ea022cfbb304/d0ab7/options.png 1532w\"],\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, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Step 4:\"), \" Alternatively, If you have the component in a file, select the file from your computer to import it.\"), 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/4a4ccdca1cbeeceb26083918a627adcb/dd507/upload-html-file.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/Ca1DAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAB60lEQVQoz4WSSY/TQBCFrYmdXrzETpx1EBqyuOMkY8d2QpCQ5sKc4DRcBiRAYjkMIEVcOMBv4D8/qttJLjOCw1Opu6u+ftVdFvc6sJsSDpdoOBxnpIbDjBwmwYRLUZgzLbvJzdrmwtRwGVNOBJvptQuL8RANSmoKD9ILINwAjC5hXowGJTZECEdGZo/7XchWHzyg6EeU3zIgm0kD09Fi0iOgQNTpoiwLZFmOZXmFfHeNJ+lTXKQ7DKcVWsMU0fnCyB8oJIsceZYRyDsBjUPdVg3sYbPZoCgKjFfPke5eYvXsFS7ya1QvbnH34zc+fv2Ju/0v3H74hnRVYL1en5ydgOZtDg6rqiJgSQ7mYL1LiEEOuz3HJLvCuy97vH7/HW8/7XHz5nMNzPP7QJtgR+DmAIxGCYL+DC2tQQIRj2G7I7jeCJyiJUdQ1PKDDvWPndnctHx0GA4TeL0ZfAL6FN3+FI9pb6JFl7XpErXUwPzhlvWomDc8OhwqgikEg1p+PyGnCucE6lLUl9UO/wk8vmFBxeSqOzWFR7kkcYgynpyANkH0k2monl1LD6oGtuMettut+enF5RpzaildkZb3pc/Kqp4IrudW+miSRDiAJWSXgAxB2MEsUUZK/V+JmmM8mcKnuiBs08DHeHTzB38BupUgg9z8YhAAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"upload-file\",\n    \"title\": \"upload-file\",\n    \"src\": \"/static/4a4ccdca1cbeeceb26083918a627adcb/e3189/upload-html-file.png\",\n    \"srcSet\": [\"/static/4a4ccdca1cbeeceb26083918a627adcb/a2ead/upload-html-file.png 259w\", \"/static/4a4ccdca1cbeeceb26083918a627adcb/6b9fd/upload-html-file.png 518w\", \"/static/4a4ccdca1cbeeceb26083918a627adcb/e3189/upload-html-file.png 1035w\", \"/static/4a4ccdca1cbeeceb26083918a627adcb/dd507/upload-html-file.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, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Step 5:\"), \" once you have paste your component, you can click the \\\"Import\\\" button below the model\"), 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/6e3094b7eaedf53d124470e3f29d8951/7f15f/paste-code.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,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACB0lEQVQoz3WSTY/SUBSGQSht+RpgOiPfA4XSQmkLhZZSvsaZuHDjLzHxF7hy4cJJTIwrY+JPfbwtM9GJuniTc5ve577vOSdTLGkUlAvyskquoJLJSeTVKu3hHK1rUns5otEan9U2Ul12TOSKRjZfQJLLSEpZ3C+myihqXQCrvJAU6pfX6PqI7sBgc/sWf/cGO7jH8O8ZeSf0+Y6xs2cwi2n2TQbDIUqpkoIkpZQqo5bKyMWyeE2h0+sTbyNs1+fDxwcevv3k89cffPrynd78FWp7RfUmQm0t0M0FYbCiWKmlyRJY6rCQkMWHxGGr02OzCZlMXYzFhvnmgLnaMg1jod1Z65iRE2JYLv5y+QyYOpSS7H8AIwE0Zy5OuCc4vcaJDtjRHic+4Ip6LoCmtxGPevj+P4CKKpoqBpLNy7SfgLaHJdy4x9tUzv6Eczhh747p2VxvMf4HPDtUngOFQ9PfsjzeYScxReyZcGavRe1HTNwQy17+jvw4lHwCTHqYk87Ap8jG1MFcRrh+jOWssdyAqRcyE1FNe4U1D/BWEYuFJ4AXZ4ePxjKyWkojZwQwmfI2jlg7K067d1wNfbTejKu+2MmenSqpG12byWxJEKyp1BpiSyoUktaVtaSHGrJY7Kwko103saZT7JGBMXRo9ce0e/pfanZ1Brr4ZzKhWtcoCZflRpPW3Xt+AVdME1rjxq67AAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"paste-code\",\n    \"title\": \"paste-code\",\n    \"src\": \"/static/6e3094b7eaedf53d124470e3f29d8951/e3189/paste-code.png\",\n    \"srcSet\": [\"/static/6e3094b7eaedf53d124470e3f29d8951/a2ead/paste-code.png 259w\", \"/static/6e3094b7eaedf53d124470e3f29d8951/6b9fd/paste-code.png 518w\", \"/static/6e3094b7eaedf53d124470e3f29d8951/e3189/paste-code.png 1035w\", \"/static/6e3094b7eaedf53d124470e3f29d8951/7f15f/paste-code.png 1530w\"],\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, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Step 6:\"), \" Once your code is displayed, you can start editing and customizing your design using the available tools and options in the editor.\\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/609d78f564b1a1c603cf6a9f06567100/2a077/start-editing.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\": \"49.80694980694981%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACSklEQVQoz5WRXUhTYRjHd1WRFVmZbmvq1OncdNOLuYmGEV5FRDcFdWEQURcFXnTRVXQT9IUZyvAj/MiPILrMi4oMpIIKxFKnZ2mGOhMs02lz58y5X+/ezQi86sD/fd5zeN/f+f+fR1fiuYAp/yjpllJSM4vZdiCX7WkWobwt2nEwnz2HikjRW8XeIqs+34WhwIU+KZ3DdY6swmr2mR2cOX+FhqZ2btd5uVvfJHVns973Utf4kO4nz2hq66GhuYOb9xrJtJdjsJZhLHRL6YrdR7A4K9httNPe+5T/eUKhEDnOw2QIl3FYHKwziZeMnBL2irgNLZ3y4MaGKtZofIemaUIRNHVR1BCRaAw1si7PTc/OYXZWyqh/HWaLJd3slMDG1i550KeEaesK0/c8KC7NJsDqEsHgMsGVFZaDQbRIhJnAvHBYSca/QLPdQ1qWgxSDjZbObuECai4tcfzUL/pfKnibZ1G+xKTjldU16VZVNWKxhMMtwGybm/2mInbqbXQ+7sE3DifPzlPvDeAbUbhYO0FL+28JXI+Gk92LJSIH5hI9TAINicjlpBpt7BJqfdTNz0WovTbG5avfRQum6Hvxg8EhTcDWGfwUZmhYE1XFPwlT0wHZw82hGOVQChwisgCKyM0dvfLPk1Pw7sMqk9++shpakN8iYkav34SlXg2s8fZ9FGVigbzSKjmUuDu91YOuouo6efYTwmEBN249YHpmTvRsXED9jCkTfB71M+zzMzKmCIAvqVHG/Qr9Ax8pdFeTXeQmt+wYuafr+AOayhHD7wnwqwAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"your code\",\n    \"title\": \"your code\",\n    \"src\": \"/static/609d78f564b1a1c603cf6a9f06567100/e3189/start-editing.png\",\n    \"srcSet\": [\"/static/609d78f564b1a1c603cf6a9f06567100/a2ead/start-editing.png 259w\", \"/static/609d78f564b1a1c603cf6a9f06567100/6b9fd/start-editing.png 518w\", \"/static/609d78f564b1a1c603cf6a9f06567100/e3189/start-editing.png 1035w\", \"/static/609d78f564b1a1c603cf6a9f06567100/2a077/start-editing.png 1533w\"],\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":"#how-to-import-templates-and-component-into-windframe","title":"How to Import Templates and Component into Windframe"}]},"parent":{"__typename":"File","relativePath":"docs/importing-templates.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Importing templates into Windframe","metaDescription":"How to import other templates and designs into Windframe and use."}},"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":"d06f536e-50c9-5209-8ce7-171dc3d1020c"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","956403285"]}