DEV Community: Adaobi Ezelioha

Implementing Tailwind CSS

Adaobi Ezelioha — Sun, 30 Oct 2022 19:21:05 +0000

Tailwind CSS is a utility-first CSS framework which means we can use utility classes to build custom designs without writing CSS as in traditional approach.

Step 1 -- Install Tailwind CSS
Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 2 -- Configure your tempelate paths
Add the paths to all of your template files in your tailwind.config.js file.

content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],

Step 3 -- Add the Tailwind directives to your CSS
Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 4 -- Start your build process
Run your build process with npm run start in your terminal and start using Tailwind’s utility classes to style your content.

npm run start

tailwindcss documentation

Implementing JsConfig in react app

Adaobi Ezelioha — Sun, 30 Oct 2022 19:02:48 +0000

Creating jsconfig.json file in your project will make it easier to develop complex javascript applications that have a lot of different folders by using absolute paths.

Step 1 -- Creating jsconfig.json file
In the root directory of my project (ie the app folder), I created a new file named jsconfig.json as shown below.

Step 2 -- Configure the path
In this jsconfig.json file, I added a compilerOptions key and set the baseUrl to src. You can also include an include key and set it to src array. That's all

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": ["src"]
}

Stutern Housemanship - Handout Documentation by Adaobi Ezelioha

Adaobi Ezelioha — Thu, 20 Oct 2022 15:45:13 +0000

Task 1- Implementing JsConfig to Handout Project

Creating jsconfig.json file in your project will make it easier to develop complex javascript applications that have a lot of different folders by using absolute paths.

Step 1 -- Creating jsconfig.json file
In the root directory of my project (ie the app folder), I created a new file named jsconfig.json as shown below.

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": ["src"]
}

Task 2 - Implementing Tailwind CSS

Tailwind CSS is a utility-first CSS framework which means we can use utility classes to build custom designs without writing CSS as in traditional approach.

Step 1 -- Install Tailwind CSS
Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 2 -- Configure your tempelate paths
Add the paths to all of your template files in your tailwind.config.js file.

content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],

Step 3 -- Add the Tailwind directives to your CSS
Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 4 -- Start your build process
Run your build process with npm run start in your terminal and start using Tailwind’s utility classes to style your content.

npm run start

tailwindcss documentation

Task 3 —Implementing layout and functionality for forgot password pages 1 & 2

This was to implement the page where users who forgot their password will be routed, to get a confirmation in their mail to get a new password.

Step 1-- I created two components in the pages folder and named them ForgotPassword and ForgotPassword2.

Step 2-- I added the both components to the NonAuthRoutes object in the url.jsx component using the below lines of code

ForgotPassword: "/forgot-password",
ForgotPassword2: "/forgot-password2",

Step 3-- I routed the forgot password link in the login component to the ForgotPassword component using link from react-router-dom after it was imported using the code below.

import { Link } from "react-router-dom";
<Link
to="/forgot-password"
className=" text-[#424242] underline my-[16px] "
>
Forgot Password
</Link>

Step 4-- I designed the layout with tailwind and routed the continue button (with a handleclick function) to the ForgotPassword2 component that displays that a mail have been sent to confirm the request using the code below.

const handleClick = () => {
navigate("/forgot-password2");
};

However, to use the navigate in the function, useNavigate was imported and stored in a variable so it can always be invoked using the code below

import { useNavigate } from "react-router-dom";
const navigate = useNavigate();

Step 5-- The okay button in the ForgotPassword2 was now routed to the login page as password must have been sent to the user’s mail already. I used an onClick attribute on the button and attached a handleClick function.

const handleClick = () => {
navigate("/login");
};

Step 6-- Finally, I did the responsive design for mobile screen with tailwind.