{"componentChunkName":"component---src-templates-blog-js","path":"/blog/how-to-create-tailwind-css-modal/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares"}},"mdx":{"id":"2978fc41-8153-5500-b364-16114ec1cb43","excerpt":"Tailwind Modals Modal windows or pop-ups are a popular UI element used in modern web design to provide extra information or interaction. They are an effective…","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\": \"How to create Tailwind CSS Modal:A Step-by-Step Guide\",\n \"lastUpdated\": \"17 May 2024\",\n \"date\": \"2021-01-10T02:16:04+01:00\",\n \"metaTitle\": \"How to create Tailwind CSS Modal\",\n \"metaDescription\": \"Tailwind CSS Modals are effective way of grabbing user attention without taking them away from the current page. In this article, we will guide you on how to create a modal using Tailwind CSS, a popular utility-first CSS framework.\",\n \"type\": \"blog\",\n \"author\": \"Emmanuel Chinonso\",\n \"role\": \"Technical Writer/Web developer\",\n \"authorImage\": \"/blog/author/author_emmanuel.jpg\",\n \"image\": \"./_/images/create-tailwind-css-modal.png\",\n \"tags\": [\"tailwind css\", \"bootstrap\", \"bootstrap 5 alpha\"],\n \"previousTitle\": \"How to create Tailwind CSS dropdown\",\n \"previousPath\": \"how-to-create-tailwind-css-dropdown\",\n \"nextTitle\": \"How to Create Tailwind CSS table\",\n \"nextPath\": \"how-to-create-tailwind-css-tables\",\n \"blogtype\": \"tailwindcss\",\n \"canonicalUrl\": \"https://windframe.dev/blog/how-to-create-tailwind-css-modal\"\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(\"h1\", null, \"Tailwind Modals\"), mdx(\"p\", null, \"Modal windows or pop-ups are a popular UI element used in modern web design to provide extra information or interaction. They are an effective way of grabbing user attention without taking them away from the current page. In this article, we will guide you on how to create a modal using Tailwind CSS, a popular utility-first CSS framework.\"), mdx(\"h2\", null, \"Table of content\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Introduction\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"What is a modal dialog\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Prerequisites\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Add Tailwind CSS to your Project\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Linking HTML page to Tailwind CSS\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Create the button\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Adding an overlay effect\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Create the modal dialog\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Adding functionality\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Conclusion\")), mdx(\"h2\", null, \"Introduction\"), mdx(\"p\", null, \"Tailwind CSS is a self-described utility-first CSS framework. It is used for building beautiful user interfaces. It is non-opinionated and therefore easy to style.\"), mdx(\"p\", null, \"If you do not have Tailwind CSS already installed in your HTML project, check out our article \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/how-to-use-tailwind-css-in-HTML\"\n }, \"here\"), \" to figure out how to install the Tailwind CSS and use it in your projects.\\nApart from learning how to install Tailwind in your project, we are going to build a Tailwind Modal to help you kick off your development.\"), mdx(\"h2\", null, \"Tailwind modal: What is a modal dialog\"), mdx(\"p\", null, \"A modal is simply a popup window that appears on top of the main content of a web application. Modal dialog always seeks user interaction. there can also be used to give critical warnings to users to prevent errors.\"), mdx(\"p\", null, \"Throughout the Tailwind CSS tutorial, we are going to use Tailwind CSS, HTML, and JavaScript to build our Tailwind modal dialog.\\nThe Tailwind CSS modal popup window will look like the image below\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/blog/images/create-tailwind-css-modal3.png\",\n \"alt\": \"Tailwind CSS Modal\"\n })), mdx(\"h2\", null, \"Prerequisite\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Latest version of Tailwind CSS\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Knowledge of HTML\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Knowledge of CSS\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Knowledge of JavaScript\")), mdx(\"h2\", null, \"Add Tailwind CSS to your Project\"), mdx(\"p\", null, \"Before we can go on, it is assumed you have Tailwind CSS installed on your system. If you haven\\u2019t, you can check out how to do this \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/how-to-use-tailwind-css-in-HTML/\"\n }, \"How to use TailwindCSS in HTML\"), \".\"), mdx(\"h2\", null, \"Linking HTML page to Tailwind CSS\"), mdx(\"p\", null, \"The first step to building our Tailwind modal after installation of the Tailwind CSS is to link the Html to the Tailwind CSS like the code below.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Code:\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n\\n \\n \\n \\n \\n modal dialog\\n \\n \\n\\n\")), mdx(\"h2\", null, \"Creating a button for Tailwind Modal\"), mdx(\"p\", null, \"Once your Tailwind CSS stylesheet is correctly linked. The next thing we are going to do is to create a button for our Tailwind Modal.\\nTo do this, we wrapped our button under a \\u201Cdiv\\u201D container and added instructions on our page to click on the button. You can see the code below\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Code:\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n

\\n click here to open the modal\\n

\\n \\n Open Modal\\n \\n
\\n\")), mdx(\"p\", null, \"In the code above, we created the button and styled it with Tailwind CSS styles. At this point, Our Tailwind modal popup will look like the image below.\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/blog/images/create-tailwind-css-modal2.png\",\n \"alt\": \"Tailwind CSS Modal\"\n })), mdx(\"h2\", null, \"Overlap effect for Tailwind modal\"), mdx(\"p\", null, \"We can go ahead to create an overlapping effect. The overlap effect makes sure the user attends to the Tailwind modal dialog box first before continuing with the site.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Code:\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"