{"componentChunkName":"component---src-templates-blog-js","path":"/blog/how-to-create-react-forms-using-tailwind-css/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares"}},"mdx":{"id":"c15016ba-4abd-53da-a588-2ee6041a37b0","excerpt":"Tailwind React Form Forms have been used throughout modern history, whether they be physical forms or virtual forms. They have been used to collect information…","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 React Forms.\",\n \"lastUpdated\": \"19 May 2024\",\n \"date\": \"2021-01-10T02:16:04+01:00\",\n \"metaTitle\": \"Tailwind React Form\",\n \"metaDescription\": \"Tailwind React Forms- Creating react forms with Tailwind CSS is quite simple, forms have a wide range of utilities usually for signing up users with sign up forms and signing in users with sign in forms.\",\n \"type\": \"blog\",\n \"author\": \"Amarachi Iheanacho\",\n \"role\": \"Technical Writer\",\n \"authorImage\": \"/blog/author/author_amarachi.jpg\",\n \"image\": \"./_/images/react-forms-tailwindcss.png\",\n \"tags\": [\"frontend\", \"reactjs\", \"tailwindcss\"],\n \"previousTitle\": \"How to create and style a Responsive Form using Tailwind CSS\",\n \"previousPath\": \"how-to-create-and-style-a-responsive-form-using-tailwindcss \",\n \"nextTitle\": \"How to create Tailwind Tables using React\",\n \"nextPath\": \"how-to-create-react-tables-using-tailwind-css\",\n \"blogtype\": \"reactjs\",\n \"canonicalUrl\": \"https://windframe.dev/blog/how-to-create-react-forms-using-tailwind-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(\"h1\", null, \"Tailwind React Form\"), mdx(\"p\", null, \"Forms have been used throughout modern history, whether they be physical forms or virtual forms. They have been used to collect information for various reasons, whether it be government forms, or health or pension forms, and all have that same underlying rule.\"), mdx(\"p\", null, \"React Tailwind forms are no different. They are usually found on a web application and they allow you to keep in touch with your users, use the data collected from the forms to better satisfy your users, and increase the chances of better decision-making.\"), mdx(\"p\", null, \"In this article, we are going to walk you through building a React Tailwind form.\"), mdx(\"h2\", null, \"Table of Content\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Prerequisites\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"What is TailwindCSS\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Creating our React Project\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Installing TailwindCSS\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Creating Tailwind CSS form in our App.js\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Conclusion\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Resources\")), mdx(\"h2\", null, \"Prerequisities\"), mdx(\"p\", null, \"To make the most of this article, you must have the following:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"A basic understanding of HTML.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"A basic understanding of CSS.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"A basic understanding of React.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Node and its package manager, npm,\")), mdx(\"p\", null, \"Run the command\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"node -v\\n npm -v\\n\")), mdx(\"p\", null, \"To verify we have them installed, or install them from \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://nodejs.org/en/\"\n }, \"here\"), \".\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Alternatively, we can use another package manager, \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://yarnpkg.com/\"\n }, \"Yarn\"), \".\")), mdx(\"h2\", null, \"What is Tailwind CSS\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://tailwindcss.com/\"\n }, \"Tailwind CSS\"), \", according to the documentation on their website, tailwind CSS is a utility-first CSS framework. Tailwind CSS helps developers bring designs to life, it is fast and easy to use, with its custom class names that gift our application with ready-to-use styles.\"), mdx(\"h2\", null, \"Creating our React project\"), mdx(\"p\", null, \"To create a new react project, we go to our terminal, cd in the directory we want, and then run this command \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"npx create-react-app project-name\"), \".\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"cd Documents\\nnpx create-react-app project-name\\n\\n\")), mdx(\"h2\", null, \"Installing Tailwind CSS\"), mdx(\"p\", null, \"To have tailwind CSS available in your project, cd into the project you created earlier\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"cd project-name\\n\\n\")), mdx(\"p\", null, \"next run\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"npm install -D tailwindcss postcss autoprefixer\\n\\n\")), mdx(\"p\", null, \"This helps to install the tailwind CSS and its peer dependencies, we then generate our \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tailwind.config.js\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"postcss.config.js\"), \" files by running this command:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"npx tailwindcss init -p\\n\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Configuring your templates path\")), mdx(\"p\", null, \"To configure your paths go to your \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tailwind.config.js\"), \", and edit your \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"module.exports\"), \" object, add the paths to your template files in your \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"content\"), \" array.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"module.exports = {\\n content: ['./src/**/*.{js,jsx,ts,tsx}'],\\n theme: {\\n extend: {},\\n },\\n plugins: [],\\n};\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Next add the Tailwind directives to your CSS\")), mdx(\"p\", null, \"Add the tailwind directives in your \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"./src/index.css\"), \" file.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \"@tailwind base;\\n@tailwind components;\\n@tailwind utilities;\\n\")), mdx(\"p\", null, \"After this, we run our project\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"npm run start\\n\\n\")), mdx(\"p\", null, \"You should see the image below on your browser when you go to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"http://localhost:3000/\"), \".\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/blog/images/REACT.png\",\n \"alt\": \"React Bootstrap Forms\"\n })), mdx(\"h2\", null, \"Creating Tailwind CSS Form in our Appjs\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Simple no labels Tailwind CSS Form\")), mdx(\"p\", null, \"This \\\"simple no labels\\\" form can also be referred to as the default form. Similar to forms built with traditional CSS, Tailwind CSS forms consist of input elements and labels to differentiate the input elements and what information goes into the input elements.\"), mdx(\"p\", null, \"In the form below, we are going to use a lock icon in our buttons, so to be able to use this in our code, we have to install Heroicon in our project. To do that, we have to run the command below.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"\\nnpm install @heroicons/react\\n\\n\\n\")), mdx(\"p\", null, \"Next, we import the icon we want \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"LockClosedIcon\"), \" from \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"@heroicons/react/solid\"), \".\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"\\nimport './App.css';\\n\\n\\nimport { LockClosedIcon } from '@heroicons/react/solid'\\n\\nexport default function App() {\\n return (\\n\\n
\\n
\\n
\\n \\n

Sign in to your account

\\n

\\n Or{' '}\\n \\n start your 14-day free trial\\n \\n

\\n
\\n
\\n \\n
\\n
\\n \\n \\n
\\n
\\n \\n \\n
\\n
\\n\\n
\\n
\\n \\n \\n
\\n\\n
\\n \\n Forgot your password?\\n \\n
\\n
\\n\\n
\\n \\n \\n \\n \\n Sign in\\n \\n
\\n
\\n
\\n
\\n \\n )\\n}\\n\\n\")), mdx(\"p\", null, \"With this, we have created our react Tailwind form that looks a lot like the image below.\"), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n \"className\": \"min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8\"\n }, \"\\n \", mdx(\"div\", {\n parentName: \"div\",\n \"className\": \"max-w-md w-full space-y-8\"\n }, \"\\n \", mdx(\"div\", {\n parentName: \"div\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"div\",\n \"className\": \"mx-auto h-12 w-auto text-indigo-500\",\n \"src\": \"https://img.icons8.com/?size=100&id=2sZBBqeE2WM4&format=png&color=#673ab7\",\n \"alt\": \"Workflow\"\n }), \"\\n \", mdx(\"h2\", {\n parentName: \"div\",\n \"className\": \"mt-6 text-center text-3xl font-extrabold text-gray-900\"\n }, \"Sign in to your account\"), \"\\n \", mdx(\"p\", {\n parentName: \"div\",\n \"className\": \"mt-2 text-center text-sm text-gray-600\"\n }, \"\\n Or\\n \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#\",\n \"className\": \"font-medium text-indigo-600 hover:text-indigo-500\"\n }, \"\\n start your 14-day free trial\\n \"), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"form\", {\n parentName: \"div\",\n \"className\": \"mt-8 space-y-6 gap-3\",\n \"action\": \"#\",\n \"method\": \"POST\"\n }, \"\\n \", mdx(\"input\", {\n parentName: \"form\",\n \"type\": \"hidden\",\n \"name\": \"remember\",\n \"defaultvalue\": \"true\"\n }), \"\\n \", mdx(\"div\", {\n parentName: \"form\",\n \"className\": \"flex flex-col justify-center gap-2\"\n }, \"\\n \", mdx(\"div\", {\n parentName: \"div\"\n }, \"\\n \", mdx(\"label\", {\n parentName: \"div\",\n \"htmlFor\": \"email-address\",\n \"className\": \"sr-only\"\n }, \"\\n Email address\\n \"), \"\\n \", mdx(\"input\", {\n parentName: \"div\",\n \"id\": \"email-address\",\n \"name\": \"email\",\n \"type\": \"email\",\n \"autoComplete\": \"email\",\n \"required\": true,\n \"className\": \"appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm\",\n \"placeholder\": \"Email address\"\n }), \"\\n \"), \"\\n \", mdx(\"div\", {\n parentName: \"div\"\n }, \"\\n \", mdx(\"label\", {\n parentName: \"div\",\n \"htmlFor\": \"password\",\n \"className\": \"sr-only\"\n }, \"\\n Password\\n \"), \"\\n \", mdx(\"input\", {\n parentName: \"div\",\n \"id\": \"password\",\n \"name\": \"password\",\n \"type\": \"password\",\n \"autoComplete\": \"current-password\",\n \"required\": true,\n \"className\": \"appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm\",\n \"placeholder\": \"Password\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"div\", {\n parentName: \"form\",\n \"className\": \"flex items-center justify-between\"\n }, \"\\n \", mdx(\"div\", {\n parentName: \"div\",\n \"className\": \"flex items-center gap-2\"\n }, \"\\n \", mdx(\"input\", {\n parentName: \"div\",\n \"id\": \"remember-me\",\n \"name\": \"remember-me\",\n \"type\": \"checkbox\",\n \"className\": \"h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded\"\n }), \"\\n \", mdx(\"label\", {\n parentName: \"div\",\n \"htmlFor\": \"remember-me\",\n \"className\": \"ml-2 block text-sm text-gray-900\"\n }, \"\\n Remember me\\n \"), \"\\n \"), \"\\n \", mdx(\"div\", {\n parentName: \"div\",\n \"className\": \"text-sm\"\n }, \"\\n \", mdx(\"a\", {\n parentName: \"div\",\n \"href\": \"#\",\n \"className\": \"font-medium text-indigo-600 hover:text-indigo-500\"\n }, \"\\n Forgot your password?\\n \"), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"div\", {\n parentName: \"form\"\n }, \"\\n \", mdx(\"button\", {\n parentName: \"div\",\n \"type\": \"submit\",\n \"className\": \"group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500\"\n }, \"\\n \", mdx(\"span\", {\n parentName: \"button\",\n \"className\": \"absolute left-0 inset-y-0 flex items-center pl-3\"\n }, \"\\n \", mdx(\"lockclosedicon\", {\n parentName: \"span\",\n \"className\": \"h-5 w-5 text-indigo-500 group-hover:text-indigo-400\",\n \"aria-hidden\": \"true\"\n }, \"\\n \")), \"\\n Sign in\\n \"), \"\\n \"), \"\\n \"), \"\\n \"), \"\\n \"), mdx(\"p\", null, \"Sometimes as a developer you might not want to write elaborate classes as they might be hard to keep up with, another UI library we could use is Contrast. Check out their documentation \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/docs/contrast/react/index\"\n }, \"here\"), \" to learn more about it.\"), mdx(\"h2\", null, \"Other React Tailwind Forms\"), mdx(\"h3\", null, \"Tailwind Signup Form\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"import React from \\\"react\\\"\\n\\n\\nexport default function FormExample5 = () => {\\n return (\\n
\\n
\\n

\\n Sign UP\\n

\\n
\\n
\\n \\n Firstname\\n \\n \\n
\\n
\\n \\n Lastname\\n \\n \\n
\\n
\\n \\n Email\\n \\n \\n
\\n
\\n \\n Password\\n \\n \\n
\\n
\\n \\n
\\n
\\n\\n

\\n {\\\" \\\"}\\n Already have an account?{\\\" \\\"}\\n \\n Sign in\\n \\n

\\n
\\n
\\n );\\n}\\n\")), mdx(\"formExample5\", null), mdx(\"h3\", null, \"Tailwind Contact Form\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"import React from 'react';\\n\\nconst FormExample6 = () => {\\n return (\\n
\\n
\\n

\\n Contact Form\\n

\\n
\\n
\\n \\n
\\n
\\n \\n
\\n
\\n \\n
\\n\\n
\\n \\n Contact Us\\n \\n
\\n
\\n
\\n
\\n
\\n );\\n};\\n\\nexport default FormExample6;\\n\")), mdx(\"formExample6\", null), mdx(\"h2\", null, \"Conclusion\"), mdx(\"p\", null, \"In this article, we discussed what Tailwind CSS is, and how to install it in your project. Finally, we created a form using the template provided by tailwind CSS in their documentation.\"), mdx(\"h2\", null, \"Resources\"), mdx(\"p\", null, \"You may also find the following resources useful:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/Iheanacho-ai/devwares-form\"\n }, \"Link to the Github Code\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://tailwindcss.com/docs/installation\"\n }, \"Tailwind Docs\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://www.devwares.com/product/bootstrap-contrast-pro\"\n }, \"Get Contrast PRO\"))));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"How to create Tailwind CSS React Forms.","date":"January 10, 2021","image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAACXUlEQVQoz2PQhgIdTS1NB0MzQx0DIENPV1dRUXH1gkmfHp19eefk2TX9+ydkb+7J7ckN78wKnlGTPqsuc/vMBgaITh1tTRUN1zz7giqnODVNDT1dPaDmtYsmf3128fX9Mxc3TTk1u3Rte1aKt01VjEd3fvSE4vidk0shmnW1tRX0tPJ0Ve/Y6kfoaKvp6uopKSoBNX97fundo/PnNkzZ3JV5cFrJ7PLYvFDn7sLoDX3FB6cVM4Dt1QW6Wl/P3sY8X1fXWltbU09PH2jz1pWzvr288u3l1aUTqmNcTHf1ZTcmemiryC/tLtnaX7ijOx2kWUNDE4h0dDRNTbWA7geyIWDWxNanN469vHt6dldlsrfNxMq0vqZSJ2ONKeUJc1vyS1JCGXR0dCzMzc3NTE1NTMzNLa2sLK2tLC0szHV1dXh5eRfN6Lp4ZGNjSVpFVnRHS31IoK+liYGVqZGdmUF5YSZQs667u4unu6u7m4uPl6e3l4efL5Bw19XR4efnTwrz3rpoQm5iaHVBsoW5qaaSrJ+7U12whZmiqLGhHlCztpmZKdBqoHXOTo6WFuZAi4FcYGxlxAS1FyWunNLcXJrZXpVbmZuUGhUUFegV7Gbr6WwX5eMI8jPQexoaGlraWkBtQF+oqwN5mkCb85IjowM9Q3xd3R2sTQ10XOyto8OD1JQVJMXF+Pj4HMz0IKENAhBTIFxIuqkuzDA10mViZubk4uLj45WRkZaRlWNgYAjydc9Jj2NiYmLQxgG0tLT83ewMtNVFhIXlJUWMdDRtLU3EhAW5ubhS4sI66or5eLkByqfNBxt1giIAAAAASUVORK5CYII=","aspectRatio":1.7730496453900708,"src":"/static/dd62ce483067e1025dc1e5a00a3aa34b/b40db/react-forms-tailwindcss.png","srcSet":"/static/dd62ce483067e1025dc1e5a00a3aa34b/84249/react-forms-tailwindcss.png 250w,\n/static/dd62ce483067e1025dc1e5a00a3aa34b/9d7e9/react-forms-tailwindcss.png 500w,\n/static/dd62ce483067e1025dc1e5a00a3aa34b/b40db/react-forms-tailwindcss.png 691w","sizes":"(max-width: 691px) 100vw, 691px"}}},"imageExternal":null,"lastUpdated":"19 May 2024","author":"Amarachi Iheanacho","role":"Technical Writer","authorImage":"/blog/author/author_amarachi.jpg","metaTitle":"Tailwind React Form","metaDescription":"Tailwind React Forms- Creating react forms with Tailwind CSS is quite simple, forms have a wide range of utilities usually for signing up users with sign up forms and signing in users with sign in forms.","previousTitle":"How to create and style a Responsive Form using Tailwind CSS","previousPath":"how-to-create-and-style-a-responsive-form-using-tailwindcss ","nextTitle":"How to create Tailwind Tables using React","nextPath":"how-to-create-react-tables-using-tailwind-css","blogtype":"reactjs"},"fields":{"slug":"/how-to-create-react-forms-using-tailwind-css/"}},"previous":null,"next":null},"pageContext":{"id":"c15016ba-4abd-53da-a588-2ee6041a37b0"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3706406642","3706406642","4045616534","4045616534","956403285","956403285"]}