{"componentChunkName":"component---src-templates-windframedocs-js","path":"/windframe/docs/import-external-css/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"f9cccbf8-2e5c-5fb9-9ed6-a0305b867bb6","title":"Importing your CSS code into Windframe","slug":"/docs/import-external-css/"},"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 your CSS code into Windframe\",\n  \"metaTitle\": \"Importing External or Custom CSS File into Windframe\",\n  \"metaDescription\": \"How to Import External CSS File into Windframe.\",\n  \"canonicalUrl\": \"https://windframe.dev/docs/import-external-css\"\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(\"p\", null, \"In Windframe, you can add your own CSS rule sets seamlessly blending your custom designs or styles into your projects with minimal effort.\"), mdx(\"p\", null, \"Please note that importing your custom CSS code may override or conflict with existing styles in your Windframe project. It's important to review and test your design after the import to ensure that the styles are applied correctly, against unintended changes which may not align with your design preferences.\"), mdx(\"p\", null, \"Follow the steps below to import an external CSS file into Windframe:\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Step 1:\"), \" Open \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor\"\n  }, \"Windframe's editor\"), \".\"), 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/29fb6ee604155d6717e3f8764d5eef08/c88ae/Windframe-editor.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.66795366795367%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACKklEQVQoz5WSS08TURTH5wtoo0yxUmgLLe20M1NoGfqihfogEGOI7HSjAuJ74SM+EumCBBP9AMatiZ9C40KrQaypWnVlbEOC2k5caAqUvqZ/7xwmRhKN4SQn/zvn3vzmf8893Mj4BERlBP7wPvRFDkAIxOHui6HXH4UUSiKy/zACQ6NUc0phuOQwfQ8MjyMYH4WSGINPSRLDy5LzysdgtvlgdQ2A7xLR1imCN1Jf77b6SNuYOsUEAw+jwxmApSfANAhrr4JOt0Lq8IXAeeQx8DYJk0dn8CqTxdP0Ip49f0mZJl2k1Ouvszlk335A+sUS3uU+YurMZfB2GT1SFHYvcy8p4NxyBGZWnL14HduNufm7MO0VGDAGm2AA27sktDv8mDp7hQ7V63U0m01omgZVLeHL1yKWl1dQKBRQrdWorqseN+YWYOrwGsAQPME4ON7o0fS5q3RIh+lRqVRQyH/GvftP8ODhEjKZ96huVGiv0WiQ3kzd3gJ0SBFw1u5+7Njjxsz5rcBms4bsm0949DiHkqriW1H9DfoXsJu1j7Ow/u20eDD9B7DVarHUkM+vQC0V8fPH981WaJt79b8Cw8xhGJyZXdekA40r63/XtBZptbqB9fVVrK2tolwuE4iADE49TC0YjxKFzTMIuzioOxTI4akL17b9yrfm72AXM+SUYwyWgEOOgvP3z7I5FNjEH6I+nmSz9b88cfoSGYgfPMJgQ3CJCuSJFDzJ4/gFXqc9sAPCYY4AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"windframe canvas\",\n    \"title\": \"windframe canvas\",\n    \"src\": \"/static/29fb6ee604155d6717e3f8764d5eef08/e3189/Windframe-editor.png\",\n    \"srcSet\": [\"/static/29fb6ee604155d6717e3f8764d5eef08/a2ead/Windframe-editor.png 259w\", \"/static/29fb6ee604155d6717e3f8764d5eef08/6b9fd/Windframe-editor.png 518w\", \"/static/29fb6ee604155d6717e3f8764d5eef08/e3189/Windframe-editor.png 1035w\", \"/static/29fb6ee604155d6717e3f8764d5eef08/c88ae/Windframe-editor.png 1541w\"],\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:\"), \" Click on the \\\"import\\\" button to access the import options available on Windframe. You can find this in the left sidebar and the canvas toolbar\"), 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 3:\"), \" Select \\\"Add Custom CSS\\\" on the 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/16adc8c7ebce257c9bb88e03a8d7609d/6edca/add-external-css.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\": \"47.87644787644788%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACLElEQVQoz31STW8SURSdpbppujG0CEyhw8cgUKCMOIU2IAltNLFJ06WuTNf+Bze6dGfS6M6FC02/pOHDVrBNazUk4qZWClOrfMgCipQCAxyfA0GJ0Zuc917ePfe8d28OxfvvgmZd0Juc0JknwJh4KBgblIwdilEb1HoOY04fzJwXI3oHZCoThmgWWuN1eDz3oTP5MGrkwFrdMFhcoPTGO9BcvgrH1A2MGJyQkwI5bYFcY+vDsHoMSi0H3jsHKz8NNcuTxyehNvKQM+NQ6By4pHWAUumtsE3MwO2fh43z4e16CML+AT4nU0ilj3CYOiL7McEXpIVjZHMFfM3kyL2A/PcCnj57gWHSCc06oTJcAUUTVde1m4hu7eB9/APa+B3lcpmsLaBdw1m1QvY/s53YjG5jSGOVxCTBC4M0vDPzPUKr1SJ1bVQqpxCEQ4QjcSw+foNYLI5EItHjNBqidA5GXvcLnieCLt8sqtWzHrnzuxPsk9YfLW5gde0jtnc+IZvNSLlfDzabTekcehXtFxyU6STBWq3eJ9hqNrD37gC7ewKKxQzKJ0WUSqV/CnZm6AQ1cJEhM5zFabUqEUVRlMii2EAymUY+n0Mh/w0/yAhq9VovX683ui1vQqYmPyT2UjAWUOcGlJjyz+H/0e7i74ht7RK72KExT0LrvkV8yC4Q03rwfHkdK4EwltaCWH4Z6iIs3a0EIl2Ee7ml1SACoQ3ce/CQeJKDbnwa9ttP8BOZHTHMDHDyOgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"custom css\",\n    \"title\": \"custom css\",\n    \"src\": \"/static/16adc8c7ebce257c9bb88e03a8d7609d/e3189/add-external-css.png\",\n    \"srcSet\": [\"/static/16adc8c7ebce257c9bb88e03a8d7609d/a2ead/add-external-css.png 259w\", \"/static/16adc8c7ebce257c9bb88e03a8d7609d/6b9fd/add-external-css.png 518w\", \"/static/16adc8c7ebce257c9bb88e03a8d7609d/e3189/add-external-css.png 1035w\", \"/static/16adc8c7ebce257c9bb88e03a8d7609d/6edca/add-external-css.png 1351w\"],\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:\"), \" Paste your CSS code in the area provided amd click on \\\"Import CSS\\\"\"), 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/47764aca108d930ddbe87e511140d689/d2f5c/paste-external-css.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\": \"47.490347490347496%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAB1ElEQVQoz22S7WvTUBTGs67N+6VdljRp15a1NGnTt6RN0xVBQQaKY6Dsk8gYG84X3ItW5jpR/CSCX/2HH8+9bceUfXjuObm555fn5B7JZEVohoOsoiErq8gpOphVhZavQGVlSLKFNWUTGdWmfBNSzoKU3YBseNB0h84bkFUDimZCJUmabtEmIyiDXXShswL2D47w8/cf3Hz/hdMP13h1MsPh6xlO3n7G8ZsZ3l98xfTRHlh+AwXLFia4OFjSDJOcaXC9MqbTKeL+AHvPDjC7+oazyy84+3SDd+dzgsxxQfn5x2tczX9g9+kLRHGMdjsU9SuXEl/W1mU4bgkPkgQPIzpUC+BVA5SWKtcWWj17VR+lWgtJMkaz6d8BkkNhM5ODU/SQpmP66hD1VoxutIPOYHKv+LtGEGFEBnw/+BcoFgLaS2DMgX6Edm+MVjdZxrta7NX9ATn8HyguhSGTVW6B3GEjiIUTXnyfVsDRKLltOUdTIisqb1mHJK3DdlxM0hTD4QiV7Q4V9EVh2CdRXOWLmIqW03QiLoUzZL0ANU9jZjIPhmnDLZXFPwk7XTx+8hwvD09RbfSxtd1Fpd4jUU5xS+Q9upQQPZqIVtiByUwUmzvwdy/xF0FbAz5kyQEtAAAAAElFTkSuQmCC')\",\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/47764aca108d930ddbe87e511140d689/e3189/paste-external-css.png\",\n    \"srcSet\": [\"/static/47764aca108d930ddbe87e511140d689/a2ead/paste-external-css.png 259w\", \"/static/47764aca108d930ddbe87e511140d689/6b9fd/paste-external-css.png 518w\", \"/static/47764aca108d930ddbe87e511140d689/e3189/paste-external-css.png 1035w\", \"/static/47764aca108d930ddbe87e511140d689/d2f5c/paste-external-css.png 1363w\"],\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:\"), \" After the import is completed, you will see the styles from your CSS code applied to your elements in the Windframe editor.\"));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{},"parent":{"__typename":"File","relativePath":"docs/import-external-css.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Importing External or Custom CSS File into Windframe","metaDescription":"How to Import External CSS File into Windframe."}},"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":"f9cccbf8-2e5c-5fb9-9ed6-a0305b867bb6"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","956403285"]}