{"componentChunkName":"component---src-templates-blog-js","path":"/blog/how-to-use-tailwind-css-in-react/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares"}},"mdx":{"id":"ff5cbaa6-739a-52a2-a347-f7448d7b8b2e","excerpt":"Tailwind CSS In React Tailwind CSS has become a popular choice for developers and designers alike due to its utility-first approach. If you're working with…","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 Use Tailwind CSS In React.\",\n  \"lastUpdated\": \"20 May 2024\",\n  \"date\": \"2021-01-10T02:16:04+01:00\",\n  \"metaTitle\": \"How To Use Tailwind CSS In React.\",\n  \"metaDescription\": \"Learn how to seamlessly integrate Tailwind CSS with React. This step-by-step guide covers everything from setup to advanced techniques, making it perfect for designers, developers, and tech newbies.\",\n  \"type\": \"blog\",\n  \"author\": \"Amarachi Iheanacho\",\n  \"role\": \"Technical Writer\",\n  \"authorImage\": \"/blog/author/author_amarachi.jpg\",\n  \"image\": \"./_/images/react-tables-index.png\",\n  \"tags\": [\"CSS\", \"reactjs\", \"tailwindcss\"],\n  \"previousTitle\": \"How to use Tailwind CSS in HTML\",\n  \"previousPath\": \"how-to-use-tailwind-css-in-HTML\",\n  \"nextTitle\": \"How to use tailwind css padding, margin and border in your project.\",\n  \"nextPath\": \"how-to-use-tailwind-css-padding-margin-and-border-in-your-project\",\n  \"blogtype\": \"tailwindcss\",\n  \"canonicalUrl\": \"https://windframe.dev/blog/how-to-use-tailwind-css-in-react\"\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 CSS In React\"), mdx(\"p\", null, \"Tailwind CSS has become a popular choice for developers and designers alike due to its utility-first approach. If you're working with React, integrating Tailwind CSS can streamline your workflow, helping you build responsive and aesthetically pleasing UIs quickly and efficiently. This guide is designed for designers, developers, and newbies in technology who want to harness the power of Tailwind CSS in their React projects.\"), mdx(\"h2\", null, \"Table of Content\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Step 1: Create a React Project\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Step 2: Install Tailwind CSS\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Step 3: Create Tailwind Configuration Files\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Step 4: Configure tailwind.config.js\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Step 5: Create Stylesheet Entry Point\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Step 6: Import Tailwind CSS Styles\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Step 7: Start Your React Project\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Conclusion\")), mdx(\"p\", null, \" \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Prerequisites\")), mdx(\"p\", null, \"Before we dive into using Tailwind CSS in React, make sure you have the following installed:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Node.js: This will provide the npm package manager, which we will use to install dependencies.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Create React App: A convenient tool for setting up a new React project with all the necessary configurations.\\nor \")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"vite (for the development environment)\"))), mdx(\"p\", null, \"If you don't have these installed, you can follow the official documentation for \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://nodejs.org/\"\n  }, \"Node.js\"), \" and \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://create-react-app.dev/\"\n  }, \"Create React App\"), \" to get started.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Getting Started\"), \"\\nIn these project we will use create react app for our installations.\\nOnce you have the prerequisites set up, follow these steps to start using Tailwind CSS in your React project:\"), mdx(\"h2\", null, \"Step 1: Create A React App\"), mdx(\"p\", null, \"If you don\\u2019t have a React project set up, you can create one using Create React App (CRA). Open your terminal and run:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"npx create-react-app my-tailwind-react-app\\n\")), mdx(\"p\", null, \"This will create a new React project in a directory called \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"my-tailwind-app\"), \".\\nReplace \\\"my-tailwind-react-app\\\" with your desired project name.\"), mdx(\"h2\", null, \"Step 2: Install Tailwind CSS\"), mdx(\"p\", null, \"Next, you need to install Tailwind CSS along with its dependencies.\\nUse the following command to navigate to your project directory:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"cd my-tailwind-react-app\\n\")), mdx(\"p\", null, \"Now, Install Tailwind CSS and its dependencies using npm:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"npm install tailwindcss postcss autoprefixer\\n\")), mdx(\"h2\", null, \"Step 3: Create Tailwind Configuration Files\"), mdx(\"p\", null, \"Generate the configuration files for Tailwind CSS:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"npx tailwindcss init -p\\n\")), mdx(\"p\", null, \"This command creates a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tailwind.config.js\"), \" file and a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"postcss.config.js\"), \" file in your project root.\"), mdx(\"h2\", null, \"Step 4: Configure tailwind.config.js\"), mdx(\"p\", null, \"Open the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tailwind.config.js\"), \" file in your code editor. Customize the configuration based on your project requirements. For example:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// tailwind.config.js\\nmodule.exports = {\\n  content: [\\n    \\\"./index.js\\\",\\n    \\\"./src/**/*.{js,ts,jsx,tsx}\\\",\\n    // other configurations\\n  ],\\n  theme: {\\n    extend: {},\\n  },\\n  plugins: [],\\n}\\n\")), mdx(\"h2\", null, \"Step 5: Create Stylesheet Entry Point\"), mdx(\"p\", null, \"Create a new CSS file, for example, src/styles/tailwind.css, and include the following:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"/* src/styles/tailwind.css */\\n@import 'tailwindcss/base';\\n@import 'tailwindcss/components';\\n@import 'tailwindcss/utilities';\\n\")), mdx(\"h2\", null, \"Step 6: Import Tailwind CSS Styles\"), mdx(\"p\", null, \"Import the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/styles/tailwind.css\"), \" file into your \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/index.css\"), \":\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"/* src/index.css */\\n/* ... other imports */\\nimport './styles/tailwind.css';\\n\")), mdx(\"h2\", null, \"Step 7: Start Your React Project\"), mdx(\"p\", null, \"Now that everything is set up, start your React development server:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"npm start\\n\")), mdx(\"p\", null, \"Visit http://localhost:3000 in your browser, and you should see your React project with Tailwind CSS styles applied.\"), mdx(\"h2\", null, \"Step 8: Using Tailwind CSS Classes in React Components\"), mdx(\"p\", null, \"We are going to create a simple React Card Component to demonstrate that Tailwind css works on our application. To do this, we must first open our \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"App.js\"), \" file, delete the code there, and write the code below.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Code:\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"function App() {\\n  return (\\n    <section className=\\\"App h-screen w-full flex justify-center items-center bg-purple-500\\\">\\n      <div className=\\\"w-full max-w-md bg-white-800\\\">\\n        <div\\n          className=\\\"rounded-t-xl bg-white px-6 py-6 md:p-6 text-lg md:text-xl leading-8 \\n          Md:leading-8 font-semibold\\\"\\n        >\\n          <p className=\\\"text-purple-900 text-xl md:text-xl font-black text-center pb-2\\\">\\n            Tailwind CSS\\n          </p>\\n\\n          <p\\n            className=\\\"text-indigo-700 text-base md:text-base italic \\n          font-normal text-center\\\"\\n          >\\n            \\\"A utility-first CSS framework for rapid UI development. \\\"\\n          </p>\\n        </div>\\n\\n        <div\\n          className=\\\"flex items-center space-x-4 p-6 md:px-6 md:py-6 \\n        bg-gradient-to-tr from-purple-700 to-indigo-700 rounded-b-xl \\n        leading-6 font-semibold text-white\\\"\\n        >\\n          <div\\n            className=\\\"flex-none w-14 h-14 bg-white rounded-full shadow-2xl \\n          items-center justify-center\\\"\\n          >\\n          \\n            <svg\\n              height=\\\"54\\\"\\n              preserveAspectRatio=\\\"xMidYMid\\\"\\n              width=\\\"54\\\"\\n              xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n              viewBox=\\\"0 0 256 153.6\\\"\\n            >\\n              <linearGradient id=\\\"a\\\" x1=\\\"-2.778%\\\" y1=\\\"32%\\\" y2=\\\"67.556%\\\">\\n                <stop offset=\\\"0\\\" stop-color=\\\"#2298bd\\\" />\\n                <stop offset=\\\"1\\\" stop-color=\\\"#0ed7b5\\\" />\\n              </linearGradient>\\n              <path\\n                d=\\\"M128 0C93.867 0 72.533 17.067 64 51.2 76.8 34.133 91.\\n                733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.\\n                318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.\\n                067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2.\\n                434-16.697-9.499-24.401-17.318C174.249 14.743 159.\\n                725 0 128 0zM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.\\n                067 27.733-23.467 44.8-19.2 9.737 2.434 16.697 9.499 24.\\n                401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0\\n                 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.\\n                2-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543\\n                 95.725 76.8 64 76.8z\\\"\\n                fill=\\\"url(#a)\\\"\\n              />\\n            </svg>\\n          </div>\\n\\n          <div className=\\\"flex-auto text-base md:text-base font-thin\\\">\\n            Created By\\n            <br />\\n            <span className=\\\"text-xl md:text-xl text-purple-200 font-black\\\">Adam Wathan</span>\\n          </div>\\n        </div>\\n      </div>\\n    </section>\\n  );\\n}\\n\\nexport default App;\\n\")), mdx(\"p\", null, \"Your browser should look similar to the image below.\"), mdx(\"section\", {\n    className: \"App h-screen w-full flex justify-center items-center bg-purple-500\"\n  }, mdx(\"div\", {\n    className: \"w-full max-w-md bg-white-800\"\n  }, mdx(\"div\", {\n    className: \"rounded-t-xl bg-white px-6 py-6 md:p-6 text-lg md:text-xl leading-8  Md:leading-8 font-semibold\"\n  }, mdx(\"p\", {\n    className: \"text-purple-900 text-xl md:text-xl font-black text-center pb-2\"\n  }, \"Tailwind CSS\"), mdx(\"p\", {\n    className: \"text-indigo-700 text-base md:text-base italic  font-normal text-center\"\n  }, \"\\\"A utility-first CSS framework for rapid UI development.\\\"\")), mdx(\"div\", {\n    className: \"flex items-center space-x-4 p-6 md:px-6 md:py-6  bg-gradient-to-tr from-purple-700 to-indigo-700 rounded-b-xl  leading-6 font-semibold text-white\"\n  }, mdx(\"div\", {\n    className: \"flex-none w-14 h-14 bg-white rounded-full shadow-2xl  items-center justify-center\"\n  }, mdx(\"svg\", {\n    height: \"54\",\n    preserveAspectRatio: \"xMidYMid\",\n    width: \"54\",\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 256 153.6\"\n  }, mdx(\"linearGradient\", {\n    id: \"a\",\n    x1: \"-2.778%\",\n    y1: \"32%\",\n    y2: \"67.556%\"\n  }, mdx(\"stop\", {\n    offset: \"0\",\n    stopColor: \"#2298bd\"\n  }), mdx(\"stop\", {\n    offset: \"1\",\n    stopColor: \"#0ed7b5\"\n  })), mdx(\"path\", {\n    d: \"M128 0C93.867 0 72.533 17.067 64 51.2 76.8 34.133 91. 733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17. 318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17. 067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2. 434-16.697-9.499-24.401-17.318C174.249 14.743 159. 725 0 128 0zM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17. 067 27.733-23.467 44.8-19.2 9.737 2.434 16.697 9.499 24. 401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19. 2-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8z\",\n    fill: \"url(#a)\"\n  }), \" \")), mdx(\"div\", {\n    className: \"flex-auto text-base md:text-base font-thin\"\n  }, \"Created By\", mdx(\"br\", null), mdx(\"span\", {\n    className: \"text-xl md:text-xl text-purple-200 font-black\"\n  }, \"Adam Wathan\"))))), mdx(\"p\", null, \"Feel free to explore the extensive list of Tailwind CSS classes to style your Tailwind React components efficiently.\"), mdx(\"h2\", null, \"Conclusion\"), mdx(\"p\", null, \"Congratulations! You have successfully set up Tailwind CSS in your React project and learned how to use its utility classes to style your components. Tailwind CSS provides a powerful and flexible way to create beautiful and responsive designs in React with minimal effort.\"), mdx(\"p\", null, \"If you found this guide helpful, consider sharing it with other developers. Happy coding!\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"How To Use Tailwind CSS In React.","date":"January 10, 2021","image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAACXBIWXMAAAsTAAALEwEAmpwYAAACCklEQVQoz2NgZGRkAQNWFmZ2VlYmZmZ2NjYGBgZTQ+2Pj889urDzyMziHX05/bnhfbmRc2szt89oOL9xyoXts09tm8/Aw8Ojqamlpq6koWaXbZVpo2ukrqkhLi5paqjz9fmFJ5d2X15Svb0nszzcpTPdf2JR/Oae/P1Tcnd2p+xb0snAx8dnaGCsq6egr1Nsp7/d3MDQ0NBAWkbOzEjnx6srL24cmFYWtasvqyfTN9bbZn1P4eEpucdn5B+cnLVvcScDNze3qqqqopKChrqBnp6DopKSurqaiKiYoZ7m+0fn757blRHoMK0ksjw9LMLZeMvksikV8XNqk3dPzD+5cQbQdwwKCvIqysqystJKynLKykr8/PwgUQbGlQun7NkwryA5sKKsKCAowMHS3MlUJyUpOj8va2574ZIpjQzAoNLT09HV1TYyMrKytjI2NtLW1mJnB4VZRUb4vJ6K4qyo0NAAQz2dpCCPCEs1XW312BDHqqxQHy9XBgiQlwfaqayoqKCopMjKygoUkZYUay9JbKnIzEwKz06JzEiOsbc21dBUc3cyO7u5tCAj2MHZmQETACMPSMrJSNpYmnDz8fPw8UvIAs1W4+HlcXN3l5YSWzU5oSTN283egoEVDNiADgUjdjDJyMQkKS6irakqJMivrihtZm4iIMAnJyvT3dGkraGUneDeWZnQWJgAAHbVmDQgfZMLAAAAAElFTkSuQmCC","aspectRatio":2.2522522522522523,"src":"/static/00bb18e8d120d41e404669ff0ae8e811/c804c/react-tables-index.png","srcSet":"/static/00bb18e8d120d41e404669ff0ae8e811/84249/react-tables-index.png 250w,\n/static/00bb18e8d120d41e404669ff0ae8e811/c804c/react-tables-index.png 470w","sizes":"(max-width: 470px) 100vw, 470px"}}},"imageExternal":null,"lastUpdated":"20 May 2024","author":"Amarachi Iheanacho","role":"Technical Writer","authorImage":"/blog/author/author_amarachi.jpg","metaTitle":"How To Use Tailwind CSS In React.","metaDescription":"Learn how to seamlessly integrate Tailwind CSS with React. This step-by-step guide covers everything from setup to advanced techniques, making it perfect for designers, developers, and tech newbies.","previousTitle":"How to use Tailwind CSS in HTML","previousPath":"how-to-use-tailwind-css-in-HTML","nextTitle":"How to use tailwind css padding, margin and border in your project.","nextPath":"how-to-use-tailwind-css-padding-margin-and-border-in-your-project","blogtype":"tailwindcss"},"fields":{"slug":"/how-to-use-tailwind-css-in-react/"}},"previous":null,"next":null},"pageContext":{"id":"ff5cbaa6-739a-52a2-a347-f7448d7b8b2e"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3706406642","3706406642","4045616534","4045616534","956403285","956403285"]}