DEV Community: RAJ

How to use TailwindCSS with ReactJs

RAJ — Sun, 08 Aug 2021 11:33:40 +0000

In this article, You will learn how to use Tailwindcss in Reactjs. This process is not complicated when you do step by step.

Prerequisites

basic understanding of Reactjs
basic understanding in TailwindCSS

Step 1:
open a terminal or cmd and go to your project folder, then create react app using the following command

npx create-react-app myapp

Then go to myapp in the terminal by using the command cd myapp

Step 2:
Now install the necessary dependencies for TailwindCSS.

 npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss-cli autoprefixer@^9

Here we use postcss-cli, because tailwind requires a CSS build process and step to run the build process we use postcss-cli. autoprefixer also needs our CSS build process. option -D means all the dependencies are development dependencies.

Step 3:
Open the project folder myapp in your favorite code editor. I preferred Vs Code. the open terminal in vs code. Then type the following command to create a full Tailwind configuration file for our project.

npx tailwind init --full

This command creates the tailwind.config.js file.

Step 4:
Now create a file as postcss.config.js. In this file, we going to specify our CSS build process.

NOTE: Both tailwind.config.js and postcss.config.js must be located in the root of our project folder.

Step 5:
Add the following lines in the postcss.config.js file.

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]
};

Step 6:
Create a folder as style in the src folder. Then create two more files in the style folder as follows.

tailwind.css
main.css

Step 7:
In the tailwind.css file add the following files of code. These are basic packages we need to use in our project

@tailwind base;

@tailwind components;

@tailwind utilities;

tailwind.css is an input file and main.css is an output file.

Step 8:
Open the package.json file and add the following scripts below the eject script. This script is used to build tailwind CSS.

"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css"

Modify the start and build scripts as follows.

"start": "npm run build:css && react-scripts start"
"build": "npm run build:css && react-scripts build",

sample figure 1

Step 9:
We are in the final step to complete the TailwindCSS with reactjs setup!
Now you can import our main.css file into the App.js file. App.js is enough. no need to import main.css in every component.

import './styles/main.css';

One last step. Open the terminal in vs code, and type the following command to start build process

npm run build:css

now you can add tailwind classes to your components 🥳🥳

Start you react app server and Happy coding!

npm start

sample figure 2

I would love to connect with you at Twitter | LinkedIn.

See you in my next Blog article, Take care!!

Reference :

Weekly web dev challenge: currency converter!

RAJ — Mon, 18 Jan 2021 09:15:30 +0000

Recently I saw scrimba's weekly web dev challenge currency converter. Here I'll share my knowledge about this currency converter from the scratch.

Prerequisites

Basic understanding of

HTML
CSS
JS

Content :

HTML and CSS code.

Javascript code.

Sample in Codepen.

First, Let's have a look at the given code.
Let's start with the make of the structure of the currency converter.

Now, Let's change the look and style of the currency converter to our own.

HTML and CSS:

First, we are going to add some CSS property for the <body>
tag, this will place our currency converter in the centre of the screen.

html, body {
    margin: 0;
    padding: 0;
}

body {
    text-align: center;
    font-family: sans-serif;
    background-color: #00539CFF;
    display: flex;
    height: 80vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

Add <h1> tag for the Heading of our currency converter also add some CSS for <h1> tag.

<h1>Awesome Currency Converter</h1>

h1{
    color: #FFD662FF;
    font-size: 3rem;  
}

Add <p> tag for the label. Label name is Convert, then add <input> tag as a child of <p> tag.

<p class="convert">
    Convert :
    <input type="number" id="original-currency-amount" 
        placeholder="0" value="1"> </input>
</p>

Add css property for the class convert.

.convert{
    font-family: 'Sansita Swashed', cursive;
    font-size: 25px;
    color: #ffffff;
    padding-right: 20px;
}

Get currency

Now going to set from_currency and to_currency for the conversion. Here I used <select> tag to set the from_currency and to_currency.

<select id="from_currency">
    <option value="AED">AED</option>
    <option value="ARS">ARS</option>
    <option value="AUD">AUD</option>
    <option value="BGN">BGN</option>
    <option value="BRL">BRL</option>
    <option value="BSD">BSD</option>
    <option value="CAD">CAD</option>
    <option value="CHF">CHF</option>
    <option value="CLP">CLP</option>
    <option value="CNY">CNY</option>
    <option value="COP">COP</option>
    <option value="CZK">CZK</option>
    <option value="DKK">DKK</option>
    <option value="DOP">DOP</option>
    <option value="EGP">EGP</option>
    <option value="EUR">EUR</option>
    <option value="FJD">FJD</option>
    <option value="GBP">GBP</option>
    <option value="GTQ">GTQ</option>
    <option value="HKD">HKD</option>
    <option value="HRK">HRK</option>
    <option value="HUF">HUF</option>
    <option value="IDR">IDR</option>
    <option value="ILS">ILS</option>
    <option value="INR">INR</option>
    <option value="ISK">ISK</option>
    <option value="JPY">JPY</option>
    <option value="KRW">KRW</option>
    <option value="KZT">KZT</option>
    <option value="MXN">MXN</option>
    <option value="MYR">MYR</option>
    <option value="NOK">NOK</option>
    <option value="NZD">NZD</option>
    <option value="PAB">PAB</option>
    <option value="PEN">PEN</option>
    <option value="PHP">PHP</option>
    <option value="PKR">PKR</option>
    <option value="PLN">PLN</option>
    <option value="PYG">PYG</option>
    <option value="RON">RON</option>
    <option value="RUB">RUB</option>
    <option value="SAR">SAR</option>
    <option value="SEK">SEK</option>
    <option value="SGD">SGD</option>
    <option value="THB">THB</option>
    <option value="TRY">TRY</option>
    <option value="TWD">TWD</option>
    <option value="UAH">UAH</option>
    <option value="USD" selected>USD</option>
    <option value="UYU">UYU</option>
    <option value="VND">VND</option>
    <option value="ZAR">ZAR</option>
</select>

Here we add CSS property for <select> tag.

select{
    width: 80px;
    height: 35px;
    font-size: 20px;
    text-align: center;
    padding-left: 10px;
    outline: 0;
}

Add <button> tag to interchange the from_currency and to_currency
and add <i> tag for the double ended arrow <--> icon.

<button id="exchange">
    <i class="fas fa-exchange-alt"></i>
</button>

Add some CSS property to button id exchange.

#exchange{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 20px;
    outline: 0;
    color: #00539CFF;
    border: 4px solid #FFD662FF;
}

Add active pseudo-class for the real button effect.

#exchange:active{
    transform: scale(0.9);
}

Again use the same <select> tag and code of from_currency for to_currency also!!

Now add <p> tag for the label Exchange Rate, and add <input> tag as a child of p tag to display the Exchange rate of the currency.

<p class="exchange">
    Exchange Rate: 
    <input type="text" id="exchange-rate" ></input>
</p>

Add CSS property for p class exchange.

.exchange{
    font-family: 'Sansita Swashed', cursive;
    font-size: 25px;
    color: #ffffff;
    padding-right: 20px;
}

Now add <button> tag, this button converts the currency.

    <button id="exchange_button">Exchange my money now!</button>

Final Tag, add <p> tag to display the converted amount. I added two <span> tag inside <p>, This span tag will help to highlight the amount.

<p id="output-text">
        <span id="from"></span> converted to <span id="to"></span>
</p>

CSS property for p id output-text.

#output-text{
    display: none;
    padding: 20px;
    font-size: 30px;
    color: #ffffff;
}

JavaScript

Finally, we are in the Awesome part of the currency converter, i.e., Javascript.

In Javascript first, we are going to define the variables to get the element from the HTML.

//input amount
var input_amount = document.getElementById("original-currency-amount");
//input currency
var from_currency = document.getElementById("from_currency");
//output currency
var to_currency = document.getElementById("to_currency");
//exchange rate
var exchange_rate = document.getElementById("exchange-rate");
var exchange = document.getElementById("exchange");
var output_amount = document.getElementById("output-text");
//to display the final output
var output_from = document.getElementById("from");
var output_to = document.getElementById("to");

Remember, we added one button to interchange the from_currency and to_currency, for that, call the addEventListener set the parameter as click, then create an anonymous function to swap the from_currency and to_currency and then call the main function calculate().

When you click the button it will automatically call the corresponding function.

exchange.addEventListener("click",()=>{
    [from_currency.value, to_currency.value] = 
    [to_currency.value, from_currency.value];
    calculate();
})

In the above code, we have used from_currency.value because we defined the variable to get the element. But we need to swap the value of that element, So, we have used from_currency.value to get the values.

Create a function to convert the currency. This is the main part of the conversion.
Here we use an API to get the exchange rate of each currency.

function calculate(){
    const from_currency_value = from_currency.value;
    const to_currency_value = to_currency.value;

    //api call to get exchange rate of each currency
    fetch(`https://api.exchangerate-api.com/v4/latest/${from_currency_value}`)
    .then(res => res.json())
    .then(res => {
        const rate = res.rates[to_currency_value];
        exchange_rate.value = `${rate}`
        to_amount = (input_amount.value * rate).toFixed(3);

        //it will display the output to screen
        output_from.innerText= `${input_amount.value} ${from_currency_value}`;
        output_to.innerText = `${to_amount} ${to_currency_value}`;
        output_amount.style.display="block";
    })
}

Congratulations You did it 🥳🥳.

If you need more clarity code check below pen👇🏻.

codepen

%[https://codepen.io/verreauxblack/pen/xxEmEXq]

Thank you for reading !!

Get in Touch