{"componentChunkName":"component---src-templates-blog-js","path":"/blog/how-to-build-tailwindcss-timepicker-with-tailwind-element/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares"}},"mdx":{"id":"1153325c-aed1-55cb-8b1c-9cc3c9eb07ef","excerpt":"Table of content Introduction Prerequisite What is Tailwind Element ? How to use Tailwind Element Setting Up our project Building Tailwind Timepicker using…","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 build Tailwind css timepicker with Tailwind elements\",\n  \"lastUpdated\": \"18 May 2024\",\n  \"date\": \"2023-08-10T02:16:04+01:00\",\n  \"metaTitle\": \"How to build Tailwind css timepicker with Tailwind elements\",\n  \"metaDescription\": \"The Tailwind Elements timepicker component allows users to enter a time either through text, input or by choosing a time from the clock\",\n  \"type\": \"blog\",\n  \"author\": \"Emmanuel Chinonso\",\n  \"role\": \"Web Developer\",\n  \"authorImage\": \"/blog/author/author_emmanuel.jpg\",\n  \"image\": \"./_/images/how-to-build-tailwind-css-timepicker-with-tailwind-elements.png\",\n  \"tags\": [\"javascript\", \"Programming\", \"Tailwind css\"],\n  \"previousTitle\": \"How to Implement a React Step Progress Bar Using Tailwind CSS\",\n  \"previousPath\": \"how-to-implement-a-react-step-progress-bar-using-tailwind-css\",\n  \"nextTitle\": \"\",\n  \"nextPath\": \"\",\n  \"blogtype\": \"tailwindcss\",\n  \"canonicalUrl\": \"https://windframe.dev/blog/how-to-create-a-beautiful-responsive-navbar-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(\"h2\", null, \"Table of content\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Introduction\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Prerequisite\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"What is Tailwind Element ?\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"How to use Tailwind Element\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Setting Up our project\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Building Tailwind Timepicker using Tailwind Elements\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Conclusion\")), mdx(\"h2\", null, \"Introduction\"), mdx(\"p\", null, \"Tailwind CSS is a popular utility-first CSS framework that allows developers to quickly build\\nresponsive and customizable user interfaces. In this blog post, we will explore how to build a\\ntimepicker component using Tailwind Elements, a free and open-source library of Tailwind CSS\\ncomponents.\"), mdx(\"h2\", null, \"Prerequisite\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Node installation\")), mdx(\"h2\", null, \"What is Tailwind Element\"), mdx(\"p\", null, \"Tailwind Element is a plugin for Tailwind CSS that provides additional components for your projects. This plugin was built by people in \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://mdbootstrap.com/\"\n  }, \"MDBoootstrap\"), \". MDBootstrap is a top quality open source UI kits that helps developers build beautiful customizable UI fast and efficiently.\"), mdx(\"p\", null, \"With these tools, we will create a functional timepicker that you can customize to fit your project's needs.\"), mdx(\"h2\", null, \"How to use the Tailwind elements plugin on our project\"), mdx(\"p\", null, \"The Tailwind Elements timepicker component allows users to enter a time either through text\\ninput or by choosing a time from the clock. It can be embedded into dialogs on mobile devices\\nand is fully responsive. The timepicker component comes with helper\\nexamples for 12-hour and 24-hour timepickers, clock-like UI, min and max time range\\nconditions, and more.\"), mdx(\"p\", null, \"There are two ways we can go about building the application, you can either use the cdn or use the packages to build the tailwindcss timepicker.\"), mdx(\"p\", null, \"In these case, we are going to use vite sever with npm package manager to build out our project.\"), mdx(\"h2\", null, \"Setting Up our project\"), mdx(\"p\", null, \"We are going to set up our project by installing some packages and plugins\"), mdx(\"p\", null, \"Before we start, you need to make sure you have node installed in your machine or check your node version by running the follwing command\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"node -v\\n\")), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"install and set up Vite\\nWe set up vite by running the following command on our terminal\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"npm create vite@latest my-project\\ncd my-project\\n\")), mdx(\"p\", null, \"This will ask you a few questions, such as the version you want to use. In our case we used venila javascript. It will also ask you to name your project and you can call your project anything you like.\"), mdx(\"ol\", {\n    \"start\": 2\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Install Tailwind css\\nWe are going to install tailwind css now by running the following command on our terminal\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"npm install -D tailwindcss postcss autoprefixer\\nnpx tailwindcss init -p\\n\")), mdx(\"p\", null, \"After initializing Tailwind css, we can go ahead to configure the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Tailwind.config.js\"), \" file\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"/** @type {import('tailwindcss').Config} */\\nmodule.exports = {\\n  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],\\n  theme: {\\n    extend: {},\\n  },\\n  plugins: [],\\n};\\n\")), mdx(\"ol\", {\n    \"start\": 3\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Go ahead and add the necessary Tailwind directives on the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"style.css\"), \" file at the root of the application. The file should look like the file below\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"/* style.css*/\\n@tailwind base;\\n\\n@layer base {\\n  html {\\n    @apply text-neutral-800;\\n  }\\n  html.dark {\\n    @apply text-neutral-50;\\n    @apply bg-neutral-800;\\n  }\\n}\\n\\n@tailwind components;\\n@tailwind utilities;\\n\")), mdx(\"p\", null, \"In the application, you can go ahead and link your \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style.css\"), \" file to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.html\"), \" file. This will be at the head tag.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<head>\\n  <link rel=\\\"stylesheet\\\" href=\\\"style.css\\\" />\\n</head>\\n\")), mdx(\"ol\", {\n    \"start\": 5\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"installing the tailwind element plugin to our application.\\nIn order to use the Tailwind element plugin on our application, we have to first install. This is done by simply running the following command on our terminal.\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"npm install tw-elements\\n\")), mdx(\"ol\", {\n    \"start\": 6\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Updating the tailwind.config.js file\")), mdx(\"p\", null, \"To run this plugin we must update our \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tailwind.config.js\"), \" file by adding file patterns that can load dynamic components classes to the content array and also extend our plugin by adding the Tailwind element.\\nOur file should look like the following\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"/** @type {import('tailwindcss').Config} */\\nmodule.exports = {\\n  content: [\\n    './index.html',\\n    './src/**/*.{js,ts,jsx,tsx}',\\n    './node_modules/tw-elements/dist/js/**/*.js',\\n  ],\\n  theme: {\\n    extend: {},\\n  },\\n  plugins: [require('tw-elements/dist/plugin.cjs')],\\n  darkMode: 'class',\\n};\\n\")), mdx(\"p\", null, \"we can save our file now.\"), mdx(\"h2\", null, \"Building the Tailwind timepicker with Tailwind elements\"), mdx(\"p\", null, \"Now that we are done with our setup the next step will be to build our tailwind timepicker with the installed tailwind element plugin.\"), mdx(\"p\", null, \"In our index.html file we will now add some tags and classes.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n  <head>\\n    <meta charset=\\\"UTF-8\\\" />\\n    <link rel=\\\"icon\\\" type=\\\"image/svg+xml\\\" href=\\\"/vite.svg\\\" />\\n    <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\" />\\n    <title>Vite App</title>\\n    <link rel=\\\"stylesheet\\\" href=\\\"style.css\\\" />\\n  </head>\\n  <body>\\n    <div class=\\\"flex justify-center mt-10\\\">\\n      <div\\n        class=\\\"relative\\\"\\n        id=\\\"timepicker-with-button\\\"\\n        data-te-timepicker-init\\n        data-te-input-wrapper-init\\n      >\\n        <input\\n          type=\\\"text\\\"\\n          class=\\\"peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0\\\"\\n          id=\\\"form4\\\"\\n        />\\n        <label\\n          for=\\\"form4\\\"\\n          class=\\\"pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary\\\"\\n          >Select a time</label\\n        >\\n        <button\\n          tabindex=\\\"0\\\"\\n          type=\\\"button\\\"\\n          class=\\\"timepicker-toggle-button absolute right-1.5 top-1/2 ml-auto h-4 w-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer border-none bg-transparent text-neutral-700 outline-none transition-all duration-[300ms] ease-[cubic-bezier(0.25,0.1,0.25,1)] hover:fill-[#3b71ca] focus:text-[#3b71ca] dark:text-white dark:hover:text-[#3b71ca] dark:focus:text-[#3b71ca]\\\"\\n          data-te-toggle=\\\"timepicker-with-button\\\"\\n          data-te-timepicker-toggle-button\\n        >\\n          <span data-te-timepicker-icon>\\n            <svg\\n              xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n              fill=\\\"none\\\"\\n              viewBox=\\\"0 0 24 24\\\"\\n              stroke-width=\\\"1.5\\\"\\n              stroke=\\\"currentColor\\\"\\n              class=\\\"h-5 w-5\\\"\\n            ><path\\n                stroke-linecap=\\\"round\\\"\\n                stroke-linejoin=\\\"round\\\"\\n                d=\\\"M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5\\\"\\n              /></svg>\\n          </span>\\n        </button>\\n      </div>\\n    </div>\\n  </body>\\n</html>\\n\")), mdx(\"p\", null, \"This code creates a text input field with the form-input class and the data-timepicker attribute,\\nwhich tells Tailwind Elements to apply the timepicker component to this input field.\"), mdx(\"p\", null, \"We can customize the timepicker component by adding additional attributes to the input field.\"), mdx(\"p\", null, \"For example, we can set the time format to 12-hour or 24-hour by adding the data-time-format\\nattribute with the value 12h or 24h, respectively. In this case we used the 12-hour attribute.\\nWe also added a clock-like UI to the timepicker component by adding the data-time-clock\\nattribute.\"), mdx(\"p\", null, \"Finally, we can go ahead and create a main.js file and link it to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.html\"), \" file. On the file we have the following code.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"/*main.js*/\\n\\nimport { Input, Timepicker, initTE } from 'tw-elements';\\n\\ninitTE({ Input, Timepicker });\\n\")), mdx(\"p\", null, \"The code above imported the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Input, Timepicker, initTE\"), \" classes from the tailwind elements plugin and it initialized thr time picker function and the input field and time picker on our html file.\\nThe application should look like the image below.\"), 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\": \"850px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/54eb2cc599073738354dc966d6349582/ae694/timepicker.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\": \"16.602316602316602%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAPUlEQVQI15XMWQoAIAhAQe9/YME9lIiIFnrghyID0XP3moyZAxGDiOomImFm4+8W7MCEVlBV/8AZPu0vLGv+0u5OiQg/4gAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Tailwind Timepicker\",\n    \"title\": \"Tailwind Timepicker\",\n    \"src\": \"/static/54eb2cc599073738354dc966d6349582/ae694/timepicker.png\",\n    \"srcSet\": [\"/static/54eb2cc599073738354dc966d6349582/a2ead/timepicker.png 259w\", \"/static/54eb2cc599073738354dc966d6349582/6b9fd/timepicker.png 518w\", \"/static/54eb2cc599073738354dc966d6349582/ae694/timepicker.png 850w\"],\n    \"sizes\": \"(max-width: 850px) 100vw, 850px\",\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, \"And when you click the icon the image below should display\"), 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/155175028d291ffb1169e7c0cc746134/e4611/Tailwind-elements-timepicker.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"54.05405405405405%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABXUlEQVQoz52TzUrDQBSF+xy+ghuXPocgCIJrn8CtuBDFoJI0ySTxh9q1VKkiSI2RLgq2UHctiFBqSExMaZWkMS7KMTOJUqqi7cBhbubc+3EIMxlVVTEsRVFixTXd429RIhCyImSiQJIJCPXUpIf1jcxnRg8SJQP7moL8noSclugorg81koKUVH8AaUKa4iAeXOVzmFs/weJmAUtbBcxvnGJlJ8+8fyf8BNI0y9vHmFprYIZrYHa3iWnuAQvcOUtLxgFqmoasIODisgSvP8C96aHZdtEJByhXbplHe376Xb8CeV7AjXGN97c+PNdB13Px8uqjWq1BmARIh0qlK3R7PTx7HTy5Hu5aHejlCiQxC3USoK7rCIIAlmXBtm30fR+1WnWyhDzPwzAM0BVFEcIwZHW9Xmfe2EBRFFEsnsG0bLQfTbTaJhzHZampNxaQ6usKkfh1EDkVvX/kW9+wPgBwnn8scIc41QAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Tailwind Timepicker\",\n    \"title\": \"Tailwind Timepicker\",\n    \"src\": \"/static/155175028d291ffb1169e7c0cc746134/e3189/Tailwind-elements-timepicker.png\",\n    \"srcSet\": [\"/static/155175028d291ffb1169e7c0cc746134/a2ead/Tailwind-elements-timepicker.png 259w\", \"/static/155175028d291ffb1169e7c0cc746134/6b9fd/Tailwind-elements-timepicker.png 518w\", \"/static/155175028d291ffb1169e7c0cc746134/e3189/Tailwind-elements-timepicker.png 1035w\", \"/static/155175028d291ffb1169e7c0cc746134/e4611/Tailwind-elements-timepicker.png 1298w\"],\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, \"And that's it! we have built a customizable and responsive\\ntimepicker component using Tailwind Elements.\"), mdx(\"h2\", null, \"Conclusion\"), mdx(\"p\", null, \"In conclusion, Tailwind CSS and Tailwind Elements provide a powerful and flexible toolkit for\\nbuilding modern and responsive user interfaces. By leveraging the utility-first classes and\\npre-built components, developers can save time and focus on building great user experiences. You can also check out \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://tailwind-elements.com/docs/standard/forms/timepicker/\"\n  }, \"Tailwind elements docs here.\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"How to build Tailwind css timepicker with Tailwind elements","date":"August 10, 2023","image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACSElEQVQoz2OwT51kF9NXPW/7nNMXJ+48kda8zCN5kopbg7Z3ExDpBbTqB7bpB7RpezdreTdpeYEQRAqIGKY8epS9bI9xYFtwwezAjGlGQe36fs1xqb16QKXeTaYh7QaBbUZBbYZ+zbo+Tcb+LQZ+IFOgmudt3r3m0GmfxD5D/9bCRTvLNx+2CO+cvGyrZVS3jldjbm5fWmZvdHJXfGp3fFpPTm6fV3SHmkejjg9Ys0Nwi61/c0DJ7P4L1+a/f1mx7aiBf0vH+oM2sb1ang3RKd1AzckZPYnpPRFJ3TEp3dbBrWqejToQmzV8mpUdqrNmbZ3x8lnzjqOVU1aFZU1yC27V8mrU9WlOyejNyOqD6M/MBjqhOykdyO6FagZ6qaZ78cQ1O4vmbg4on+NSOHvZtEW7p83T8WnW821OTOtJz+pLz+oFmuId3QEUsQxqtQhqhfrZNKp73Y7d0/sXJBZNXzJvZV3Z5OS0PveoLg3PRj3fJqCdOTkgzUAyML5T3bNRw6tJAxbgDLZR3etXbMgun6Hn3dxaMSU2tVfRpV7NvR5oMzB4ncPbQCii3Tm83Ta0DRhOQAeDQgsSYPZh7Z+3rJ/QOEvapV4OiJxr3dMmT193NDh3popbnVlcv2F4t35Ip15Ih2FYl1lkj0lEt0l4p2FIO0gzEKdl9rhEtKm41QdmTJk8dfOJ3WevfvwUWzJPyaXWNKxTz68FZCHYTm1UBNKs5N6o6d2s4lTTNnPr36v37x27dvzKQ9Pgdk3PRm2vRmCwa2NogyAA/PQVIDCMdokAAAAASUVORK5CYII=","aspectRatio":1.7730496453900708,"src":"/static/222b07ff8c18d470ef99f2f3ce04f022/30425/how-to-build-tailwind-css-timepicker-with-tailwind-elements.png","srcSet":"/static/222b07ff8c18d470ef99f2f3ce04f022/84249/how-to-build-tailwind-css-timepicker-with-tailwind-elements.png 250w,\n/static/222b07ff8c18d470ef99f2f3ce04f022/9d7e9/how-to-build-tailwind-css-timepicker-with-tailwind-elements.png 500w,\n/static/222b07ff8c18d470ef99f2f3ce04f022/30425/how-to-build-tailwind-css-timepicker-with-tailwind-elements.png 1000w,\n/static/222b07ff8c18d470ef99f2f3ce04f022/4c84e/how-to-build-tailwind-css-timepicker-with-tailwind-elements.png 1440w","sizes":"(max-width: 1000px) 100vw, 1000px"}}},"imageExternal":null,"lastUpdated":"18 May 2024","author":"Emmanuel Chinonso","role":"Web Developer","authorImage":"/blog/author/author_emmanuel.jpg","metaTitle":"How to build Tailwind css timepicker with Tailwind elements","metaDescription":"The Tailwind Elements timepicker component allows users to enter a time either through text, input or by choosing a time from the clock","previousTitle":"How to Implement a React Step Progress Bar Using Tailwind CSS","previousPath":"how-to-implement-a-react-step-progress-bar-using-tailwind-css","nextTitle":"","nextPath":"","blogtype":"tailwindcss"},"fields":{"slug":"/how-to-build-tailwindcss-timepicker-with-tailwind-element/"}},"previous":null,"next":null},"pageContext":{"id":"1153325c-aed1-55cb-8b1c-9cc3c9eb07ef"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3706406642","3706406642","4045616534","4045616534","956403285","956403285"]}