{"id":3893,"date":"2021-11-11T16:32:13","date_gmt":"2021-11-11T22:32:13","guid":{"rendered":"http:\/\/upmostlymulti.onpressidium.com\/?p=3893"},"modified":"2021-11-16T16:03:55","modified_gmt":"2021-11-16T22:03:55","slug":"setting-up-tailwind-in-a-react-application","status":"publish","type":"post","link":"http:\/\/upmostly.com\/tutorials\/setting-up-tailwind-in-a-react-application","title":{"rendered":"Setting Up Tailwind in a React Application"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"530\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/react-tailwind-1024x530.png\" alt=\"\" class=\"wp-image-3896\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/react-tailwind-1024x530.png 1024w, https:\/\/upmostly.com\/wp-content\/uploads\/react-tailwind-300x155.png 300w, https:\/\/upmostly.com\/wp-content\/uploads\/react-tailwind-768x397.png 768w, https:\/\/upmostly.com\/wp-content\/uploads\/react-tailwind.png 1160w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In this tutorial I will walk you through setting up Tailwind in your React Application. Afterwards, we will build a simple app that showcases Tailwind&#8217;s powerful features! This tutorial requires a basic level of understanding of both React and CSS.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_74 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69edf313a5916\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69edf313a5916\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"http:\/\/upmostly.com\/tutorials\/setting-up-tailwind-in-a-react-application\/#What_is_Tailwind_Why_would_I_use_it\" >What is Tailwind? Why would I use it?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"http:\/\/upmostly.com\/tutorials\/setting-up-tailwind-in-a-react-application\/#Setup\" >Setup<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"http:\/\/upmostly.com\/tutorials\/setting-up-tailwind-in-a-react-application\/#Creating_Our_App\" >Creating Our App<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"http:\/\/upmostly.com\/tutorials\/setting-up-tailwind-in-a-react-application\/#Tailwind_Components\" >Tailwind + Components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"http:\/\/upmostly.com\/tutorials\/setting-up-tailwind-in-a-react-application\/#Refactor_with_apply\" >Refactor with @apply<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"http:\/\/upmostly.com\/tutorials\/setting-up-tailwind-in-a-react-application\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_Tailwind_Why_would_I_use_it\"><\/span>What is Tailwind? Why would I use it?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Tailwind is a utility library for CSS. It contains pre-built classes for spacing, display, color, and pretty much anything else you could come up with. Tailwind&#8217;s goal is to make styling your web-app simpler, faster and more consistent. This might sound superfluous or clunky at first, but wait till you give it a try. I promise it is more intuitive than it sounds!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Setup\"><\/span>Setup<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>I&#8217;m going to be creating a new React App using <em>create-react-app<\/em>. Then I&#8217;ll follow the instructions from the Tailwind <a href=\"https:\/\/tailwindcss.com\/docs\/guides\/create-react-app\" target=\"_blank\" rel=\"noopener\">docs<\/a> to install and configure the necessary files. If you want to skip this process, you can always fork the completed <a href=\"https:\/\/github.com\/upmostly\/tailwind-demo\" data-type=\"URL\" data-id=\"https:\/\/github.com\/upmostly\/tailwind-demo\" target=\"_blank\" rel=\"noopener\">demo<\/a> and work from there!<\/p>\n\n\n\n<p>First, create your React App<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div>npx create<span class=\"token operator\">-<\/span>react<span class=\"token operator\">-<\/span>app my<span class=\"token operator\">-<\/span>project\r\ncd my<span class=\"token operator\">-<\/span>project<\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Once you&#8217;re in your project repository, install the latest version of Tailwind, along with a few other packages that<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div>npm install <span class=\"token operator\">-<\/span><span class=\"token constant\">D<\/span> tailwindcss@npm<span class=\"token punctuation\">:<\/span>@tailwindcss<span class=\"token operator\">\/<\/span>postcss7<span class=\"token operator\">-<\/span>compat postcss@<span class=\"token operator\">^<\/span><span class=\"token number\">7<\/span> autoprefixer@<span class=\"token operator\">^<\/span><span class=\"token number\">9<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Then, install CRACO. CRACO is a package that overrides some default CSS settings and lets us properly configure Tailwind<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div>npm install @craco<span class=\"token operator\">\/<\/span>craco<\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Once that&#8217;s installed, update the scripts section of your <strong><span class=\"has-inline-color has-vivid-red-color\">package.json<\/span><\/strong> to use CRACO instead of react-scripts<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div>  <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token comment\">\/\/ ...<\/span>\r\n    <span class=\"token string\">\"scripts\"<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">{<\/span>\r\n     <span class=\"token string\">\"start\"<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">\"craco start\"<\/span><span class=\"token punctuation\">,<\/span>\r\n     <span class=\"token string\">\"build\"<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">\"craco build\"<\/span><span class=\"token punctuation\">,<\/span>\r\n     <span class=\"token string\">\"test\"<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">\"craco test\"<\/span><span class=\"token punctuation\">,<\/span>\r\n     <span class=\"token string\">\"eject\"<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">\"react-scripts eject\"<\/span>\r\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token punctuation\">}<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Next, create a <strong><span class=\"has-inline-color has-vivid-red-color\">craco.config.js<\/span><\/strong> at the root of your project and paste this code in the file:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div><span class=\"token comment\">\/\/ craco.config.js<\/span>\r\nmodule<span class=\"token punctuation\">.<\/span>exports <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\r\n  style<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">{<\/span>\r\n    postcss<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">{<\/span>\r\n      plugins<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span>\r\n        <span class=\"token function\">require<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'tailwindcss'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>\r\n        <span class=\"token function\">require<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'autoprefixer'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>\r\n      <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span>\r\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n<span class=\"token punctuation\">}<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Next, you&#8217;ll have to generate a <strong><span class=\"has-inline-color has-vivid-red-color\">tailwind.config.js<\/span><\/strong> file. This will let you configure your Tailwind options exactly how you like it. It will come in handy later! Generate the file by typing <code>npx tailwindcss-cli@latest init<\/code> in your console.<\/p>\n\n\n\n<p>Finally, we&#8217;re going to overwrite our <strong><span class=\"has-inline-color has-vivid-red-color\">index.css<\/span><\/strong> file to include Tailwind in the project. Delete everything you have in there and add these import statements:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div>@tailwind base<span class=\"token punctuation\">;<\/span>\r\n@tailwind components<span class=\"token punctuation\">;<\/span>\r\n@tailwind utilities<span class=\"token punctuation\">;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>The last step is optional, but I 100% recommend it. VSCode has an extension called <em>Tailwind CSS IntelliSense<\/em> that adds class name suggestions and shows the actual CSS behind every Tailwind class in a popup. If you&#8217;re using VSCode, I highly recommend installing the extension for a much smoother Tailwind experience. <\/p>\n\n\n\n<p>And we&#8217;re done! We&#8217;re ready to start writing some code and styling it with Tailwind. I know that was a lot, but you&#8217;ll see the benefit shortly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_Our_App\"><\/span>Creating Our App<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>I&#8217;m going to put Tailwind to the test by using it to recreate part of Discord&#8217;s UI.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/sidebar-1024x640.jpg\" alt=\"\" class=\"wp-image-3920\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/sidebar-1024x640.jpg 1024w, https:\/\/upmostly.com\/wp-content\/uploads\/sidebar-300x188.jpg 300w, https:\/\/upmostly.com\/wp-content\/uploads\/sidebar-768x480.jpg 768w, https:\/\/upmostly.com\/wp-content\/uploads\/sidebar-1536x960.jpg 1536w, https:\/\/upmostly.com\/wp-content\/uploads\/sidebar.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I really like the clean look of that sidebar, so I&#8217;m going to recreate it in Tailwind<\/p>\n\n\n\n<p>The first thing I&#8217;m going to do is add some custom colors to Tailwind. Tailwind comes with a bunch of preset colors that are super easy to use, but in this case I want to get the exact colors discord uses. To do that, I&#8217;m going to edit my <strong><span class=\"has-inline-color has-vivid-red-color\">tailwind.config.js<\/span><\/strong> file:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div>module<span class=\"token punctuation\">.<\/span>exports <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\r\n  purge<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">'.\/src\/**\/*.{js,jsx,ts,tsx}'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'.\/public\/index.html'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span>\r\n  darkMode<span class=\"token punctuation\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token comment\">\/\/ or 'media' or 'class'<\/span>\r\n  theme<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">{<\/span>\r\n    extend<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">{<\/span>\r\n      colors<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">{<\/span>\r\n        lightGray<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'#99AAB5'<\/span><span class=\"token punctuation\">,<\/span>\r\n        slateLight<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'#2C2F33'<\/span><span class=\"token punctuation\">,<\/span>\r\n        slateDark<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'#23272A'<\/span><span class=\"token punctuation\">,<\/span>\r\n      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n  variants<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">{<\/span>\r\n    extend<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n  plugins<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Now that I&#8217;ve added those colors, Tailwind will automatically generate utility classes that let me apply them easily<\/p>\n\n\n\n<p>The next step is to start writing our markdown. I&#8217;ll create a &lt;div&gt; with these classes:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div><span class=\"token operator\">&lt;<\/span>div className<span class=\"token operator\">=<\/span><span class=\"token string\">\"fixed left-0 bg-slateDark h-screen flex flex-col w-64\"<\/span><span class=\"token operator\">><\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"678\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/sidebar-1024x678.png\" alt=\"\" class=\"wp-image-3917\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/sidebar-1024x678.png 1024w, https:\/\/upmostly.com\/wp-content\/uploads\/sidebar-300x199.png 300w, https:\/\/upmostly.com\/wp-content\/uploads\/sidebar-768x509.png 768w, https:\/\/upmostly.com\/wp-content\/uploads\/sidebar.png 1486w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>All the Tailwind class names are super intuitive, and the best way to learn them is honestly just to start typing out the CSS rule you need; Tailwind&#8217;s intellisense will do the rest. In the above example, I created a &lt;div> fixed to the left side, with a background color. As you can see, I was able to use my custom color &#8220;slateDark&#8221; as part of the classes Tailwind provides. If I hadn&#8217;t done that, I would still have access to tons of default classes like &#8220;bg-grey-800&#8221; for a similar look. Next, lets add some inputs, buttons and profiles to finish up our UI<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tailwind_Components\"><\/span>Tailwind + Components<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>One of the most compelling reasons to use Tailwind with React is how well it integrates with React&#8217;s component structure. You can write your CSS one time in the component definition, and reap the benefits every time you reuse that element. For this app, I&#8217;ll be creating a component for the top two buttons &#8220;Friends&#8221; and &#8220;Nitro&#8221; on the sidebar. Here&#8217;s what my code looked like:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div><span class=\"token keyword\">function<\/span> <span class=\"token function\">TopButton<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> title<span class=\"token punctuation\">,<\/span> icon <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\r\n    <span class=\"token operator\">&lt;<\/span>div className<span class=\"token operator\">=<\/span><span class=\"token string\">\"m-2 my-1 rounded p-2  text-lightGray cursor-pointer hover:bg-slateLight hover:text-white\"<\/span><span class=\"token operator\">><\/span>\r\n      <span class=\"token operator\">&lt;<\/span>FontAwesomeIcon icon<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span>icon<span class=\"token punctuation\">}<\/span> className<span class=\"token operator\">=<\/span><span class=\"token string\">\"mr-8\"<\/span> <span class=\"token operator\">\/<\/span><span class=\"token operator\">><\/span>\r\n      <span class=\"token punctuation\">{<\/span>title<span class=\"token punctuation\">}<\/span>\r\n    <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\r\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p> Here&#8217;s what that looked like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"636\" height=\"964\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/sidebar-buttons.png\" alt=\"\" class=\"wp-image-3926\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/sidebar-buttons.png 636w, https:\/\/upmostly.com\/wp-content\/uploads\/sidebar-buttons-198x300.png 198w\" sizes=\"auto, (max-width: 636px) 100vw, 636px\" \/><\/figure>\n\n\n\n<p>Something that I really enjoy about Tailwind is how easy they make it to use CSS <em>Pseudo-classes<\/em>. In this case, I am simply appending the &#8220;hover&#8221; selector in front of the classes I want to apply. Now I have a nice effect where my background color and text color change when I mouse over these buttons.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Refactor_with_apply\"><\/span>Refactor with @apply<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The next thing I want to do is create a reusable Friend.js component for my friends, which will be the final element in our UI. As I was creating that element, I realized I wanted it to behave very similarly to the two buttons I had above, just with a profile image instead of an icon. I wanted the border-radius, hover effects and text color to all be the same. So, I decided to use Tailwind&#8217;s <em>@apply<\/em> feature to create a reusable CSS class.<\/p>\n\n\n\n<p>The first thing I did was copy all the CSS I had in my TopButton component<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div><span class=\"token operator\">&lt;<\/span>div className<span class=\"token operator\">=<\/span><span class=\"token string\">\"m-2 my-1 rounded p-2  text-lightGray cursor-pointer hover:bg-slateLight hover:text-white\"<\/span><span class=\"token operator\">><\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Then, in my <strong><span class=\"has-inline-color has-vivid-red-color\">index.css<\/span><\/strong> file, I used <em>@apply<\/em> to create a custom class using all those Tailwind classes<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div><span class=\"token punctuation\">.<\/span>sidebar<span class=\"token operator\">-<\/span>item <span class=\"token punctuation\">{<\/span>\r\n  @apply hover<span class=\"token punctuation\">:<\/span>bg<span class=\"token operator\">-<\/span>slateLight m<span class=\"token operator\">-<\/span><span class=\"token number\">2<\/span> my<span class=\"token operator\">-<\/span><span class=\"token number\">1<\/span> rounded p<span class=\"token operator\">-<\/span><span class=\"token number\">2<\/span> hover<span class=\"token punctuation\">:<\/span>text<span class=\"token operator\">-<\/span>white text<span class=\"token operator\">-<\/span>lightGray cursor<span class=\"token operator\">-<\/span>pointer<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Finally, in both my <strong><span class=\"has-inline-color has-vivid-red-color\">Friend.js<\/span><\/strong> and <strong><span class=\"has-inline-color has-vivid-red-color\">TopButton.js<\/span><\/strong> files, I replaced that string of classes with the <strong><span class=\"has-inline-color has-vivid-red-color\">sidebar-item<\/span><\/strong> class. Now my code is a lot more concise, and I can reuse that class if I ever want to create something with the same effects.<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div><span class=\"token keyword\">function<\/span> <span class=\"token function\">Friend<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> image<span class=\"token punctuation\">,<\/span> name <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\r\n    <span class=\"token operator\">&lt;<\/span>div className<span class=\"token operator\">=<\/span><span class=\"token string\">\"sidebar-item\"<\/span><span class=\"token operator\">><\/span>\r\n      <span class=\"token operator\">&lt;<\/span>FontAwesomeIcon icon<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span>image<span class=\"token punctuation\">}<\/span> className<span class=\"token operator\">=<\/span><span class=\"token string\">\"mr-4\"<\/span> size<span class=\"token operator\">=<\/span><span class=\"token string\">\"lg\"<\/span> <span class=\"token operator\">\/<\/span><span class=\"token operator\">><\/span>\r\n      <span class=\"token punctuation\">{<\/span>name<span class=\"token punctuation\">}<\/span>\r\n    <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\r\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>My final product looked like this, a pretty spot on replication of the Discord UI element:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"343\" height=\"970\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/Screenshot_4-1.png\" alt=\"\" class=\"wp-image-3950\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot_4-1.png 343w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot_4-1-106x300.png 106w\" sizes=\"auto, (max-width: 343px) 100vw, 343px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>With that, we&#8217;ve completed our Tailwind project and learned a few tips for streamlining our workflow. I would encourage you to play around with the library, and just explore the tools at your disposal. That is truly the best way to learn Tailwind. There are so many more things you can do with this library, so don&#8217;t stop learning here!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial I will walk you through setting up Tailwind in your React Application. Afterwards, we will build a simple app that showcases Tailwind&#8217;s powerful features! This tutorial requires a basic level of understanding of both React and CSS. What is Tailwind? Why would I use it? Tailwind is a utility library for CSS. [&hellip;]<\/p>\n","protected":false},"author":23,"featured_media":3896,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[33,53,56],"class_list":["post-3893","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-beginner-react-tutorials","tag-css","tag-tailwind"],"acf":[],"_links":{"self":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/3893","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/comments?post=3893"}],"version-history":[{"count":6,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/3893\/revisions"}],"predecessor-version":[{"id":4158,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/3893\/revisions\/4158"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media\/3896"}],"wp:attachment":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media?parent=3893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/categories?post=3893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/tags?post=3893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}