{"componentChunkName":"component---src-templates-blog-js","path":"/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares"}},"mdx":{"id":"98ad7489-5349-58f8-8069-3129bf5a3859","excerpt":"Introduction If you’re looking for a way to track user progress through a process, one of the best options is to create a step progress bar. Step progress bars…","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 Implement a React Step Progress Bar Using Tailwind CSS.\",\n \"lastUpdated\": \"6 May 2024\",\n \"date\": \"2023-03-10T02:16:04+01:00\",\n \"metaTitle\": \"How to Implement a React Step Progress Bar Using Tailwind CSS\",\n \"metaDescription\": \"Step progress bars provide a visual representation of how far along a user is in a process, such as filling out a form or completing a task. With Tailwind CSS, you can easily create a React step progress bar that’s visually appealing and easy to customize.\",\n \"type\": \"blog\",\n \"author\": \"Emmanuel Ovuoba\",\n \"role\": \"Technical Writer/Web developer\",\n \"authorImage\": \"/blog/author/author_emmanuel.jpg\",\n \"image\": \"./_/images/tailwind-step-progress.png\",\n \"tags\": [\"tailwind css\", \"react\", \"web development\"],\n \"previousTitle\": \" How to implement dark mode in React using tailwind css.\",\n \"previousPath\": \"how-to-implement-dark-mode-in-tailwind-css\",\n \"nextTitle\": \"How to build Tailwind css timepicker with Tailwind elements\",\n \"nextPath\": \"how-to-build-tailwindcss-timepicker-with-tailwind-element\",\n \"blogtype\": \"tailwindcss\",\n \"canonicalUrl\": \"https://windframe.dev/blog/how-to-implement-a-react-step-progress-bar-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, \"Introduction\"), mdx(\"p\", null, \"If you\\u2019re looking for a way to track user progress through a process, one of the best options is to create a step progress bar. Step progress bars provide a visual representation of how far along a user is in a process, such as filling out a form or completing a task. With Tailwind CSS, you can easily create a React step progress bar that\\u2019s visually appealing and easy to customize.\\nWe are going to build a progress bar here as an example. Our tailwind progress bar will 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\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/eea71c58631409a0989410794ffcded4/29007/progress-bar.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\": \"18.532818532818535%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAnUlEQVQY03XO2QrCMBCF4b7/u4lLinupbRN64Y1SbTJxym+kqODC4ePAzM3JZouK6bxiMi3Z7I50pwg+QJ94QXXgpvqXfsjqYk21X1En5XbJYWNwRY7bG2y5pPMXbjEiksQf0j2Et+wqjkuwI3lwdOHJEnpH9C1BBB8HQtTUOrYoklYN6CuZzT3W/Nekf2166ly+VEZot8LZRk7N6A4CtDAqesqE+wAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"Tailwind progress bar\",\n \"title\": \"Tailwind progress bar\",\n \"src\": \"/static/eea71c58631409a0989410794ffcded4/e3189/progress-bar.png\",\n \"srcSet\": [\"/static/eea71c58631409a0989410794ffcded4/a2ead/progress-bar.png 259w\", \"/static/eea71c58631409a0989410794ffcded4/6b9fd/progress-bar.png 518w\", \"/static/eea71c58631409a0989410794ffcded4/e3189/progress-bar.png 1035w\", \"/static/eea71c58631409a0989410794ffcded4/44d59/progress-bar.png 1553w\", \"/static/eea71c58631409a0989410794ffcded4/29007/progress-bar.png 1600w\"],\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(\"h2\", null, \"Setting up the Application\"), mdx(\"p\", null, \"To get started, we need to create a new React project using Create React App. Open your terminal and run the following command:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"npx create-react-app progress-bar\\n\")), mdx(\"p\", null, \"Once the project is created, navigate to the project directory and install the Tailwind CSS dependencies:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"cd my-app\\nnpm install tailwindcss postcss-cli autoprefixer\\n\")), mdx(\"p\", null, \"Next, create a new configuration file for Tailwind CSS\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"npx tailwindcss init\\n\")), mdx(\"p\", null, \"This will create a tailwind.config.js file in your project directory.\"), mdx(\"h3\", null, \"Configure Tailwind CSS\"), mdx(\"p\", null, \"Open the tailwind.config.js file and add the following code to it:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"module.exports = {\\n purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\\n darkMode: false,\\n theme: {\\n extend: {},\\n },\\n variants: {\\n extend: {},\\n },\\n plugins: [],\\n};\\n\")), mdx(\"p\", null, \"This code sets up Tailwind CSS to purge unused styles in production, defines a light theme, and configures variants and plugins.\"), mdx(\"h2\", null, \"Creating the Progress Bar\"), mdx(\"p\", null, \"We are now ready to build our application. First, we have to create the component for the progress bar.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"const ProgressBar = () => {\\n return (\\n \\n
Dark
\\n
\\n
Blue
\\n
\\n
Red
\\n
\\n
Green
\\n
\\n
Yellow
\\n
\\n
Indigo
\\n
\\n
Purple
\\n
\\n