This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

Learn how to set up your React 18 project with Tailwind 3.x in 2023.


Hello everybody, my title is Lionnel Lubangi, I am a full-stack developer and I am enthusiastic about writing tech articles. I used to publish on different platforms, however I’ve found that style-tricks.com is likely one of the finest platforms constructed for builders, so I will be submitting a few articles right here.
By the way in which, let’s get again to the primary matter. On this tutorial, I’ll present you the best means of establishing your react mission with Tailwind 3.x.

If you haven’t any expertise with Tailwind, do not thoughts, as a result of I will begin with an summary of each react and tailwind. I’ll inform you what React and Tailwind are in addition to telling you the connection between them. with all that in thoughts, let’s get began.

what’s react?

React is a JavaScript library for constructing consumer interfaces, this definition comes from the official web site of react. In one other means, React is a library for serving to builders construct consumer interfaces (UIs) as a tree of small items known as parts. As for react, a part is a combination of HTML and JavaScript that captures the entire logic required to show a small part of a bigger UI. Every of those parts could be constructed up into successively complicated elements of an app. As an example what are parts in react, let’s take a look at the bellow screenshot.

Image description

Right here, you possibly can see that we now have three columns, from the left to the best:

A column that I can name a menu which outdated totally different icons such because the Twitter icons, the house icon, the Tag icons, and so forth..;

Within the second column, I can title posts, we now have totally different posts from those who I comply with on Twitter;

Ultimately, within the third column, I can title Solutions we now have some strategies for a Twitter account that I could possibly be all in favour of.

So in react, these are known as parts, you perceive now {that a} part is nothing however a small a part of the UI of an software.

And should you look effectively, you may rapidly notice that these three parts can be subdivided into different smaller parts. I am not going to dig far as a result of this isn’t the react course. Are you hungry? why then, check out the primary matter, and you will see that I am proper (lol). In order that’s all about parts in react.

Now that you’ve got an thought of react’s parts, a standard query we may ask is how are we syle these parts to make our software easy?

Proper, there are such a lot of choices to select from on the subject of styling a react software, the pure possibility being to make use of vanilla CSS.

So what are others possibles choices? Proper, there are many CSS frameworks and instruments based mostly on CSS that you should use together with Bootstrap, Sass, and Tailwind to call a number of.

For this tutorial, we are going to solely speak about Tailwind.

What’s Tailwind?

Tailwind CSS, as per their web site is a “utility-first CSS framework” which offers a number of utility lessons that you should use immediately inside your markup to design a component.

There are such a lot of utility lessons that Tailwind present, I do not know if there’s somebody who is aware of all of them, however the very best half is, we do not need to put in writing these utility lessons ourselves and maintain them in any world CSS file. We immediately get them from Tailwind. if in case you have by no means labored with tailwind earlier than, I promise you that you will note it in motion on this tutorial after studying to arrange the mission.

Now I believe you could have discovered what react and Tailwind are, now it is time to arrange our mission utilizing react and Tailwind.

Prerequisite:

Earlier than putting in React and Tailwind, there are some conditions:

You will need to have a node put in in your laptop, should you do not, this article may assist you to.

In case you are unsure that you’ve got node put in, open your terminal on Mac or Linux and sort

node --version
Enter fullscreen mode

Exit fullscreen mode

You need to see the model of node within the termial.

now that you’ve got node put in, you might be prepared for the following step.

  1. Go to the Tailwind website

As soon as on the touchdown web page, click on get began as proven within the beneath picture.

Image description

  1. Now within the left navigation panel, click on on set up, then Framework guides to the best.

Image description

  1. Now you could have two choices relying on the framework you need to use to create your react-app. Needless to say there are other ways of beginning a brand new react mission. the favored means is to make use of the framework CRA which stands for Create React App. However there are some complaints from builders together with me who assume that the CRA framework takes many occasions to configure a brand new software. Relying in your gadget efficiency, it may take you as much as 8 minutes to arrange a brand new mission. Additionally, with CRA, react set up many packages behind the scene ( webpack, babel, axios and so forth) so you’ll be working with these packages not since you want them, however as a result of react has determined so. For that, some builders select the CRA various similar to Vite. That is what I am displaying you within the beneath screenshot, so if you wish to work with CRA, click on on the inexperienced rectangle, if you wish to work with vite, select the pink rectangle.

As for this tutorial, I am utilizing CRA, so if you wish to comply with together with me, go forward and click on on Create React App.

Image description.

  1. Now, it is time to open your IDE, there are such a lot of and I do not know which one you might be utilizing, however I like to recommend Visible Studio code. Create a brand new folder and title it as you need then drag it into your editor.
    if you’re utilizing VsCode, please hit Cmd+Backtick to open your terminal, you may also use the menu Terminal, New terminal from VsCode.

  2. From now you need to comply with the directions offered on the tailwind web site as proven on this screenshot:

Image description

  1. In your terminal, kind the next command:

Please discover that my-project is the title of your mission so be at liberty to call it as you need:

npx create-react-app my-project
Enter fullscreen mode

Exit fullscreen mode

I named my mission ‘react18-tailwind3x’, so my command is as follows:

npx create-react-app react18-tailwind3x
Enter fullscreen mode

Exit fullscreen mode

Image description

As I instructed you early, this might take a few minutes relying in your laptop efficiency and the velocity of your web connection.

Image description

If all the things goes effectively, you need to see the created software :

Image description

Now navigate to your software like this :

cd react18-tailwind3x

Enter fullscreen mode

Exit fullscreen mode

You’ve your react app put in, let’s transfer to the following step and Set up tailwind css by way of npm, after which run the init command to generate your *tailwind.config.js * file.:

Begin with the primary command, then run the second.

npm set up -D tailwindcss
npx tailwindcss init

Enter fullscreen mode

Exit fullscreen mode

Image description

Image description

Now verify your software’s file, you will note a file named

tailwind.config.js

Alright, we’re about to complete, yet one more factor, open your tailwind.config.js file, and you will note an object with a few properties, I’ll clarify to you the aim of every one among them, as for now, let’s deal with the content material property. That is to inform Tailwind to search for each react file situated in your src folder and to use the model when wanted. ( By default, when working with CRA, each part may have the extension. JS, however as you could possibly know, react use a selected syntax known as JSX, so the parts may even have the .JSX extension. It is as much as you as a Developer to decide on what you need, as for me, I want the .JSX extension for parts and .JS for normal Javascript features.

It is also doable to make use of Typescript in react, now I am not going to show you Typescript but, possibly later, I may submit an article on how one can use react and Typescript. Once you see one thing like .ts or .tsx, that is Typescript. So, if you’re working with react and Typescript, your parts may have the extension .ts or .tsx.

Once more, it is as much as you to resolve which extension you like, that is one of many qualities of react as in comparison with different frameworks and libraries like Angular, the liberty!

Now, within the beneath code, copy all the things within the array of the content material property and paste it into the corresponding array of the tailwind.config.js in your mission. It’s also possible to delete all the things within the file you could have presently, copy the bellow code, and paste it there.

  /** @kind {import('tailwindcss').Config} */
module.exports = {
  content material: [
   ** "./src/**/*.{js,jsx,ts,tsx}",**
  ],
  theme: {
    lengthen: {},
  },
  plugins: [],
}
Enter fullscreen mode

Exit fullscreen mode

  1. Now open the index.css in your mission and previous these directives :
@tailwind base;
@tailwind parts;
@tailwind utilities;

Enter fullscreen mode

Exit fullscreen mode

The aim of these directives is that will help you higher set up your CSS. Tailwind offers an amazing information on this matter, check out that if you wish to be taught extra here.

  1. Now all the things is okay, simply run
 npm run begin
Enter fullscreen mode

Exit fullscreen mode

Image description

That is it, you could have your react and Tailwind mission prepared.

Now, how one can use Tailwind?

Let’s create a small app that lists the weblog’s authors.

in your mission created early, open the src folder, inside that folder, create a brand new part known as Writer.js, then previous the next code:

import React from 'react'

const Writer = () => {
  return (
    <div>
      <h1>Listing of authors</h1>
        <div>
            <h1>Writer title: Lionnel</h1>

          <div>
              <p>Title</p>
              <img src=""/>
              <hyperlink></hyperlink>
          </div>

        </div>
        <div>
            <h1>Writer title: Lubangi</h1>

          <div>
              <p>Title</p>
              <img src=""/>
              <hyperlink></hyperlink>
          </div>

        </div>
        <div>
            <h1>Writer title: Mohamed</h1>

          <div>
              <p>Title</p>
              <img src=""/>
              <hyperlink></hyperlink>
          </div>

        </div>

    </div>
  )
}

export default Writer

Enter fullscreen mode

Exit fullscreen mode

We now have a primary web page with a div containing a heading and three others div that checklist 3 authors.

Now, go into App.js, take away all the things between the parentheses situated within the return key phrases, and put the Writer part inside:

Image description

Now run your app :

 npm run begin
Enter fullscreen mode

Exit fullscreen mode

You need to see the next screenshot in your browser

Image description

Till now, react has carried out its job, which is to render the writer part to the browser, styling it’s your job. You are able to do it utilizing plain CSS or Tailwind, since we’re speaking about Tailwind, let’s model it utilizing the tailwind lessons.

As I instructed you earlier than, you need not memorize all of the tailwind lessons in your head, as you might be working with Tailwind, you could possibly memorize a few of them, however you need to all the time use the Tailwind Documentation to repeat and paste the offered lessons.

For instance, if you wish to change the background, the width, and the peak of a div, in plain css, you’ll do one thing like this:

 div {
   background-color : #FFF333;
   width: 100%;
   top: 800 px;
}
Enter fullscreen mode

Exit fullscreen mode

Now let’s use Tailwind to do the identical job :

  <div className = " bg-[#FFF333] w-full h-4/5 ">
    My content material
  </div>
Enter fullscreen mode

Exit fullscreen mode

Now to attain our writer’s app, I’ll offer you the GitHub hyperlink the place you’ll find the supply code. There are such a lot of sources on-line you should use to be taught React and Tailwind, I do not need to present the udemy hyperlink as a result of it may sound like I am doing affiliate internet marketing, simply go forward and search.

The aim of this tutorial was to indicate you how one can arrange React and Tailwind in your mission.

You probably have any questions, please ask within the remark, and I will be comfortable to reply you. It’s also possible to comply with me on Twitter

Lionnel Lubangi , full-stack Developer.



The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?