DEV Community: Elechi George

Migrating from Tailwind CSS v3 to v4: A Complete Developer's Guide

Elechi George — Thu, 22 May 2025 19:28:09 +0000

Introduction

After years of development, Tailwind CSS v4.0 has finally landed, and it's a complete game-changer. Having worked with Tailwind since its early days, I can confidently say this is the most significant update we've seen. The performance improvements alone are worth the upgrade, but there's so much more.

In this comprehensive guide, I'll walk you through everything you need to know about migrating from v3 to v4, including the challenges I encountered, solutions to common problems, and my honest thoughts on what this means for your development workflow.

Why Upgrade to Tailwind CSS v4.0?

Before diving into the migration process, let me share why this upgrade is worth your time. After testing v4.0 on several production projects, the benefits are undeniable:

Performance That Will Blow Your Mind

The numbers speak for themselves. In my testing, I saw:

Full builds: 3.5x faster (from 400ms to ~100ms on average)
Incremental builds with new CSS: 8x faster
Incremental builds with no new CSS: Over 100x faster (measured in microseconds!)

What does this mean practically? Those annoying 2-3 second build times during development are now virtually instant. It's like switching from a traditional hard drive to an SSD—once you experience it, you can't go back.

Modern CSS Features Out of the Box

V4.0 leverages cutting-edge CSS features that weren't widely supported when v3 was released:

Native cascade layers for better style precedence control
Registered custom properties with @property
color-mix() for dynamic color opacity
Logical properties for improved RTL support

Key Changes You Need to Know

1. CSS-First Configuration (Goodbye tailwind.config.js)

This is probably the biggest mindset shift. Instead of configuring everything in JavaScript, you now do it directly in CSS:

Old way (v3):

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          500: '#3B82F6',
          600: '#2563EB'
        }
      },
      fontFamily: {
        display: ['Inter', 'sans-serif']
      }
    }
  }
}

New way (v4):

@import "tailwindcss";

@theme {
  --color-brand-500: #3B82F6;
  --color-brand-600: #2563EB;
  --font-display: "Inter", "sans-serif";
}

My Take: Initially, this felt weird. I was so used to the JavaScript config that CSS configuration seemed like a step backward. But after using it for a few weeks, I actually prefer it. Having everything in one place—your imports, theme variables, and custom utilities—feels more cohesive.

2. Simplified Installation Process

The installation is now refreshingly simple:

npm i tailwindcss @tailwindcss/postcss

// postcss.config.js
export default {
  plugins: ["@tailwindcss/postcss"],
};

/* styles.css */
@import "tailwindcss";

No more @tailwind directives, no complex configuration files. Just one import and you're ready to go.

3. Automatic Content Detection

Remember spending time configuring the content array in your config? That's gone. V4.0 automatically detects your template files using smart heuristics. It respects your .gitignore file and ignores binary files automatically.

4. Dynamic Utilities and Variants

This is where v4.0 really shines. You can now use utilities that weren't predefined:

<!-- Grid with 15 columns? No problem -->
<div class="grid grid-cols-15">

<!-- Custom data attributes? Built-in -->
<div data-current class="opacity-75 data-current:opacity-100">

<!-- Any spacing value? Sure -->
<div class="mt-23 w-17 pr-29">

Step-by-Step Migration Guide

Step 1: Install Tailwind CSS v4.0

First, update your dependencies:

npm uninstall tailwindcss
npm install tailwindcss@latest @tailwindcss/postcss

Step 2: Update Your PostCSS Configuration

Replace your PostCSS config:

// postcss.config.js
export default {
  plugins: ["@tailwindcss/postcss"],
};

Step 3: Convert Your CSS Imports

Update your main CSS file from:

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

To:

@import "tailwindcss";

Step 4: Migrate Your Configuration

This is where the real work happens. You'll need to convert your tailwind.config.js to CSS:

Example conversion:

// Old tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a'
        }
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem'
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif']
      }
    }
  }
}

/* New CSS configuration */
@import "tailwindcss";

@theme {
  --color-primary-50: #eff6ff;
  --color-primary-500: #3b82f6;
  --color-primary-900: #1e3a8a;
  --spacing-18: 4.5rem;
  --spacing-88: 22rem;
  --font-sans: "Inter", "system-ui", "sans-serif";
}

Step 5: Update Gradient Classes

Gradient classes have been renamed:

bg-gradient-to-r → bg-linear-to-r
bg-gradient-to-b → bg-linear-to-b

Step 6: Use the Automated Upgrade Tool

Tailwind provides an automated upgrade tool that handles many of these changes:

npx @tailwindcss/upgrade@latest

Common Migration Issues and Solutions

Issue 1: Build Errors with Custom Plugins

Problem: Your custom plugins from v3 aren't working.

Solution: Many plugins are no longer needed. For example, if you were using @tailwindcss/container-queries, you can remove it—container queries are now built-in.

My Experience: I had to remove about 40% of my plugins because the functionality was now built into core. This actually simplified my setup.

Issue 2: Missing Arbitrary Values

Problem: Some arbitrary values that worked in v3 aren't recognized in v4.

Solution: Many arbitrary values are no longer needed due to dynamic utilities. The upgrade tool will automatically convert many of these for you.

Issue 3: Color Opacity Issues

Problem: Color opacity modifiers behaving differently.

Solution: V4.0 now uses color-mix() instead of CSS custom properties for opacity. This might cause subtle differences in color rendering, especially with currentColor.

Issue 4: Custom Variant Conflicts

Problem: Custom variants defined in plugins conflict with new built-in variants.

Solution: Check the new built-in variants (like not-*, starting:*, in-*) and remove any custom implementations.

Performance Optimizations

Use the Vite Plugin

If you're using Vite, switch to the first-party plugin for even better performance:

// vite.config.js
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

Leverage CSS Variables

With v4.0, all your theme values are available as CSS variables. This enables runtime theming:

.dynamic-theme {
  background-color: var(--color-primary-500);
  color: var(--color-primary-50);
}

New Features You Should Try

1. Container Queries

Finally, built-in container queries:

<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
    <!-- Responsive based on container, not viewport -->
  </div>
</div>

2. 3D Transforms

Create impressive 3D effects:

<div class="perspective-distant">
  <div class="rotate-x-45 rotate-y-30 transform-3d">
    <!-- 3D transformed element -->
  </div>
</div>

3. Advanced Gradients

Create more sophisticated gradients:

<!-- Angled gradients -->
<div class="bg-linear-45 from-blue-500 to-purple-600">

<!-- Conic gradients -->
<div class="bg-conic from-red-500 to-blue-500">

<!-- With color interpolation -->
<div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400">

4. Starting Style Animations

Animate elements as they appear without JavaScript:

<div popover class="transition-discrete starting:open:opacity-0">
  <!-- Animates in when popover opens -->
</div>

My Honest Thoughts on V4.0

After using Tailwind CSS v4.0 in production for several weeks, here's my honest assessment:

The Good

Performance is phenomenal. The speed improvement isn't just noticeable—it's transformative. Development feels snappier, builds are faster, and the feedback loop is tighter.

CSS-first configuration grew on me. Initially skeptical, I now appreciate having everything in one place. It feels more aligned with the declarative nature of CSS.

Dynamic utilities are brilliant. No more extending the config for simple things like grid-cols-13 or custom spacing values.

Modern CSS features make the framework more powerful. Container queries, 3D transforms, and advanced gradients open up new possibilities.

The Challenges

Learning curve for configuration. If you're heavily invested in JavaScript-based configuration, the transition takes time.

Plugin ecosystem disruption. Some plugins need updates, others are no longer necessary. This creates temporary friction.

Subtle rendering differences. The switch to modern CSS features occasionally produces slightly different results, especially with colors.

The Verdict

This is a must-upgrade. The performance benefits alone justify the migration effort. Yes, there's a learning curve, but it's worth it. The framework feels more modern, more performant, and more aligned with where CSS is heading.

What This Means for Your Team

For Individual Developers

If you're working solo, I recommend upgrading immediately. The learning curve is manageable, and the productivity gains are immediate.

For Teams

Plan for a migration period. Not everyone will adapt to the new configuration style immediately. Consider:

Training sessions on the new CSS-first approach
Gradual migration starting with new projects
Documentation updates for your design system

For Large Organizations

The upgrade path is more complex but worth it. The performance improvements can significantly impact build times in large codebases. Consider:

Pilot projects to test the waters
Automated tooling to help with the migration
Phased rollouts across different teams

Migration Checklist

Before you start:

[ ] Backup your current project
[ ] Read through the upgrade guide
[ ] Test on a small project first

During migration:

[ ] Update dependencies
[ ] Convert PostCSS configuration
[ ] Update CSS imports
[ ] Run the automated upgrade tool
[ ] Convert tailwind.config.js to CSS
[ ] Update gradient class names
[ ] Remove unnecessary plugins
[ ] Test thoroughly

After migration:

[ ] Verify all styles render correctly
[ ] Check build performance
[ ] Update documentation
[ ] Train team members

Tools and Resources

Essential Tools

Automated upgrade tool: npx @tailwindcss/upgrade@latest
Tailwind Play: Test v4.0 features in the browser
VS Code extension: Updated for v4.0 syntax

Helpful Resources

Common Questions

Q: Should I upgrade existing projects or just new ones?

A: Start with new projects to get comfortable, then upgrade existing ones. The automated tool makes existing project upgrades much easier.

Q: Will this break my design system?

A: Probably not significantly, but expect some tweaking. The core utilities work the same way.

Q: How long does migration typically take?

A: For a medium-sized project, expect 2-4 hours of focused work, plus testing time.

Q: Are there any performance downsides?

A: None that I've encountered. Everything is faster or the same speed.

Conclusion

Tailwind CSS v4.0 represents a significant evolution of the framework. While the migration requires effort, the benefits—performance improvements, modern CSS features, and a more streamlined development experience—make it worthwhile.

The shift to CSS-first configuration might feel unfamiliar initially, but it aligns better with the declarative nature of styling. The dynamic utilities and built-in modern features reduce the need for custom configurations and plugins.

My recommendation? Start experimenting with v4.0 on side projects, then gradually migrate your main projects. The learning curve is manageable, and the productivity gains are substantial.

The future of utility-first CSS is here, and it's faster, more powerful, and more intuitive than ever. Welcome to Tailwind CSS v4.0—you're going to love it.

Ready to make the switch? Start with the automated upgrade tool and don't hesitate to lean on the community for support. The Tailwind team has done an excellent job making this transition as smooth as possible.

Create a virtual environment for Python Projects

Elechi George — Sun, 23 Jan 2022 01:58:58 +0000

Hello there, in this short note I'll show you how to create a python virtual environment for a new project and walk you through the process of resolving some common conflicts you might get while creating a virtual environment for your projects.

First things first, you will need to make sure python and pip are installed properly

to check this just run the stuff below in your favourite terminal

  $ python --version

if you an error like the one below, it probably because you don't have python correctly installed or you it haven't be added to your system environment variables path

Here's how to add it yourself

type "edit system environment variable" - follow the images below to get it resolved

Once you type that stuff from before, it should land you here, look to the bottom where it says environment variable CLICK IT !

That button should land you here, DOUBLE CLICK where that blue color stuff is on [path] just like the image below

That double clicking should land you here, make sure yours is like mine in the picture below [especially the first two]

Okay great, once you finish editing "click save" and go back to this area, and DOUBLE CLICK where my cursor is on the image below that has a blue background

It should land you here, make sure yours looks like mine, especially the last two variables

when you are done, click save until the boxes disappear, you shouldn't be having error with python and pipenv

MOVING FARWARD and Installing Pipenv

Pipenv manages dependencies on a per-project basis. To install packages, change into your project’s directory (or just an empty directory) and run:

  $ cd code_folder

  $ pip install pipenv --user 

  $ pipenv install requests

it does it what it does in creating a virtual environment for your project and out out some that looks like the image below...

You should be all set, if you want to use virtualenv instead of pipenv - all you need to do is run the commands below:

  $ pip install virtualenv --user

then to use it, run:

  $ cd project_folder
  $ virtualenv venv

to activate it run:

  $ source venv/bin/activate

In summary to setup a virtual environment

install python
install pipenv
change the environment variables to point accordingly
then run pipenv install requests on the folder you want to create your python project

CHEERS, If you have questions, let me know in the comments

Thanks

Objects In Javascript - The Proper Guide

Elechi George — Thu, 14 May 2020 06:14:28 +0000


	"Object are huge part of the Javascript language, and it at the core of many things we do. So learning how to use them is definitely essential. "

In JavaScript, almost "everything" is an object.

Booleans can be objects (if defined with the new keyword)
Numbers can be objects (if defined with the new keyword)
Strings can be objects (if defined with the new keyword)
Dates are always objects
Maths are always objects
Regular expressions are always objects
Arrays are always objects
Functions are always objects
Objects are always objects

Basically, all javaScript values, except primitives, are objects.

I think the best way to easily understand objects in javascript is to compare it with objects in real life objects.

Objects in real life have properties and also have things they can do, for an example Car object could have color, make and model year as its properties, but it also has things it can do, it could move and horn. Now an object in javascript is no different, it has properties and it can have things it can do.

So, for an instance we could have a User object in javascript and it properties would be an email, a username and a gender and it can also have things it can do in javascript these are called methods which are just functions, so a User object could have a Login method and a Logout Method. Another good example would be if we had a blog object which will represent a single blog on a website, now the properties of a blog object could be a title, the content and the author and the methods could be publish, unpublish or a method to delete the blog. So you can see how javascript objects and real life objects are quite similar, they both have properties and they both have things they can do but in javascript they are called methods which are simply functions.

So, this idea of Objects is going to allow us to create this kind of data structures which represent certain things in our application code.

Creating Objects in Javascript

Even though javascript has some built in objects like the Date and Math object, it also allows us to create or define our own objects and we can do this in a variety of way.

Object Literal Notation
Object Constructor
Constructor Function
Prototype Inheritance

Using an Object Literal

The object literal notation allows us to create single objects.
Using an object literal, you both define and create an object in one statement.
An object literal is a list of name:value pairs (like gender:male) inside curly braces {}

The following example creates a new JavaScript object:

let user = {
 name: "Jannet"
};

So, if you want to add more than one property you separate them with a comma, just remember not to add comma to the last one.

let user = {
 name: "Jannet",
 age: 30,
 email: 'jannet@gmail.com',
 location: 'Nigeria',
 blogs: ["human resource management", "tech for the non-tech savvy"]
};

Accessing The Object Properties

There are basically two ways of accessing an object properties.

Dot Notation
Square Bracket Notation

Dot Notation

Let say we want to access the name property of our object.

console.log(user.name);

// Output: Jannet

Perhaps later on in our code if you want to override or change the value of a property in our objects we could do this way:

// we change the age property from 30 to 35
user.age = 35;
console.log(user.age)

// Output: 35

Square Bracket Notation

Let's say we want to access the name property of our user object, we use the a set of square brackets like so [].

console.log(user['name'])

You can also update or change the name property like so:

user["name"] = "Lanre"
console.log(user["name"]);
// Output: Lanre

You can also define object properties like so:

let user = {
 "User Name": "Jannet"
};

But this types of properties are only accessed with the bracket notation like so:

user["User Name"];
console.log(user["User Name"])
// Output: Jannet

They can also be used to pass variables, let say you want to access the location.

const key = "location";
console.log(user[key]);
// Output: Nigeria

Adding Methods to Objects 👩

Methods are basically functions inside of an Object, which holds a piece of code. We can add a method called login to our user object like so:

let user = {
 name: "Jannet",
 age: 30,
 email: 'jannet@gmail.com',
 location: 'Nigeria',
 blogs: ["human resource management", "tech for the non-tech savvy"],
 login: function() {
   console.log("the user is logged in");
  }
};

And we can call or invoke the method like so:

user.login();

// Output: the user is logged in

Accessing object properties within the object methods

Let say we want to create a method in our object that prints out the text in the blog array of our object. first we'll need to access the the blog property, and we do so by using the "this" keyword in javascript.

Now, the question is what is the "this" keyword ?

put simply the this keyword is a context object and it represents the context the current code is executing, so depending on where and how we use it value is going to be different. if you use "this" inside the root of the document, it value is going to refer to the global object which is the Window object. But if we use "this" inside of a method in our object the "this" keyword would refer to our user object.

...
 printBlog: function() {
  console.log(this)
 }
...
// Output: the user object

So, we can use "this" keyword to access the blog property and print it values like so:

...
 printBlog: function() {
  this.blog.forEach(blog => {
    console.log(blog)
  }) 
};
...

Deleting Properties

The delete keyword deletes a property from an object:

let user = {
 name: "Jannet",
 age: 30,
 email: 'jannet@gmail.com',
 location: 'Nigeria',
 blogs: ["human resource management", "tech for the non-tech savvy"]
};

delete user.age

Things To Note About The delete operator

The delete keyword deletes both the value of the property and the property itself.
After deletion, the property cannot be used before it is added back again.
The delete operator is designed to be used on object properties. It has no effect on variables or functions.
The delete operator should not be used on predefined JavaScript object properties. It can crash your application.

Using an Object Constructor

Another way to create objects in JavaScript involves using the “Object” constructor. The Object constructor creates an object wrapper for the given value. This, used in conjunction with the “new” keyword allows us to initialize new objects like so:

const user = new Object(); 
user.name = 'Jannet'; 
school.location = 'Nigeria'; 
school.age = 34; 

user.displayInfo = function(){ 
    console.log(`My ${user.name} i live in  
          in ${user.location} and am ${user.age} years old`); 
};
user.displayInfo();
//Output:

Notice how i accessed the properties in the displayInfo() method, this approach is also accepted in Javascript if you dont want to use the "this keyword" you can directly access the properties.

NOTE: The two methods mentioned above are not well suited to programs that require the creation of multiple objects of the same kind, as it would involve repeatedly writing the above lines of code for each such object. To deal with this problem, we can make use of two other methods of object creation in JavaScript that reduces this burden significantly, as mentioned below:

Using Constructor Function

Constructors in JavaScript, like in most other Object Oriented Programming languages, provides a template sometimes called a blueprint for creation of objects. In other words, it defines a set of properties and methods that would be common to all objects initialized using the constructor.
Here is an example:

function User(name,age, location) {
  this.name = name;
  this.age = age;
  this.language = language;
}

// creating new object
const object1 = new User("Bola", 20, "Nigeria");
const object2 = new User("Bola", 29, "New York");

The this keyword

Remember when i said the value of this, when used in an object, is the object itself.

However, in a constructor function this does not have a value. It is a substitute for the new object. The value of this will become the new object when a new object is created.

Adding a Property to a Constructor

You cannot add a new property to an object constructor the same way you add a new property to an existing object:

  User.name = "Lanre";

To add a new property to a constructor, you must add it to the constructor function:

  function User(name,age, location) {
   this.name = name;
   this.age = age;
   this.language = language;
   this.isArrogant = false;
}

Adding a Method to a Constructor

Adding methods to an constructor must be done inside the constructor function:

  function User(name,age, location) {
   this.name = name;
   this.age = age;
   this.language = language;
   this.isArrogant = false;
   this.sayName = function() {
     console.log("My Name is "+ this.name)
 }
}

Built-in JavaScript Constructors

Here is the list of built in JavaScript constructors for native objects:

 var object = new Object();      // A new Object object
 var string = new String();      // A new String object
 var number = new Number();      // A new Number object
 var boolean = new Boolean();    // A new Boolean object
 var array = new Array();        // A new Array object
 var regex = new RegExp();       // A new RegExp object
 var function = new Function();  // A new Function object
 var date = new Date();          // A new Date object

JavaScript Object Prototypes

Another way to create objects involves using prototypes. All JavaScript objects inherit properties and methods from a prototype.
Browsers implement prototypes through the proto property and this is how we’ll refer to it.

Date objects inherit from Date.prototype
Array objects inherit from Array.prototype
String object inherit from String.prototype
Number object inherit from Number.prototype
Boolean object inherit from Boolean.prototype
Person objects inherit from Person.prototype

NOTE: that the Object.prototype is on the top of the prototype inheritance chain.

Using the prototype Property

The JavaScript prototype property allows you to add new properties to object constructor function:

  function User(name,age, location) {
   this.name = name;
   this.age = age;
}
 Person.prototype.isArrogant = "false";

And you can also add new methods to objects constructor function like so:

  function User(name,age, location) {
   this.name = name;
   this.age = age;
}
User.prototype.sayName = function(){
  console.log("My name is " + this.name)
};

ES5 New Object Methods

ECMAScript 5 added some new Object Methods to be aware of JavaScript.
We'll Look into some of them and their use case.

Object.defineProperty()

The static method Object.defineProperty() defines a new property directly on an object, or modifies an existing property on an object, and returns the object.
Here is an example:

const object1 = {};

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false
});

   object1.property1 = 77;
// throws an error in strict mode

   console.log(object1.property1);
// expected output: 42

Object.assign()

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. It returns the target object.
It syntax Looks like this:

  const targetObject = { a: 1, b: 2 };
  const sourceObject = { b: 4, c: 5 };

  const returnedTargetOject = Object.assign(target, source);

  console.log(targetObject);
  // expected output: Object { a: 1, b: 4, c: 5 }

  console.log(returnedTargetObject);
  // expected output: Object { a: 1, b: 4, c: 5 }

Object.create()

The Object.create() method creates a new object, using an existing object as the prototype of the newly created object.

  const User = {
  age: 0,
  printIntroduction: function() {
    console.log(`My name is ${this.name}. Am ${this.age} years old`);
  }
};

  const object1 = Object.create(person);

  object1.name = 'Steve';
  me.age = 34; // inherited properties can be overwritten

  object1.printIntroduction();
  // expected output: "My name is Steve. Am 34 years old"

Object.entries()

The Object.entries() method returns an array of a given object's own enumerable string-keyed property [key, value] pairs, in the same order as that provided by a for...in loop. (The only important difference is that a for...in loop enumerates properties in the prototype chain as well).

The order of the array returned by Object.entries() does not depend on how an object is defined. If there is a need for certain ordering, then the array should be sorted first.

  const obj = { foo: 'bar', baz: 42 };
  console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

  // array like object
  const obj = { 0: 'a', 1: 'b', 2: 'c' };
  console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

Object.freeze()

The Object.freeze() method freezes an object. A frozen object can no longer be changed; freezing an object prevents new properties from being added to it, existing properties from being removed, prevents changing the enumerability, configurability, or writability of existing properties, and prevents the values of existing properties from being changed. In addition, freezing an object also prevents its prototype from being changed. freeze() returns the same object that was passed in.

 const obj = {
  prop: 42
};

 Object.freeze(obj);

 obj.prop = 33;
 // Throws an error in strict mode

 console.log(obj.prop);
 // expected output: 42

Object.is()

The Object.is() method determines whether two values are the same value.

const obj1 = {value: 20}
const obj2 = {value: 10}

Object.is(obj1, obj2);
// Output: false

Object.keys()

The Object.keys() method returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would.

  const object1 = {
   a: 'somestring',
   b: 42,
   c: false
 };

  console.log(Object.keys(object1));
  // expected output: Array ["a", "b", "c"]

Object.hasOwnProperty()
The hasOwnProperty() method returns a boolean indicating whether the object has the specified property as its own property (as opposed to inheriting it).

 const object1 = {};
 object1.property1 = 42;

 console.log(object1.hasOwnProperty('property1'));
 // expected output: true

 console.log(object1.hasOwnProperty('toString'));
 // expected output: false

 console.log(object1.hasOwnProperty('hasOwnProperty'));
 // expected output: false

So, you can get a lot more stuff and play around each and every concept.

I had just gone through the Introduction in all concepts, so If you had any
queries Just Ask in the response section.

Thanks for your time! ...

You can follow me on Instagram & Twitter @elechipro.

Reference From:
https://developer.mozilla.org/
https://www.w3schools.com/