DEV Community: Folarin Lawal

Start Using TailwindCSS Now!

Folarin Lawal — Thu, 26 May 2022 09:29:12 +0000

Why you should start using TailwindCSS

Introduction

If you're a web developer, then you've probably heard of Tailwind CSS. It's a utility-based CSS framework that uses Atomic CSS principles to allow developers to quickly create and modify websites. But is it worth learning another new system for building websites? In this article, I'll explain what TailwindCSS is and why it's worth the time investment.

- It's easy to customize

TailwindCSS is a utility-first CSS framework that allows you to easily customize your styles. You can use it with any framework, website, or project. It’s also easy to learn and understand because of its simple syntax and structure.

This makes TailwindCSS a great choice for beginners who don’t have a lot of experience with CSS frameworks (or even front-end development in general) but want to start using one; veterans will appreciate its familiar syntax and the ease with which they can get started.

- Your CSS file size will probably be smaller than Bootstrap's

The second reason why you should use TailwindCSS is because it's smaller than Bootstrap. With Bootstrap, you have to include all of their JS files, default HTML templates, and CSS styles. The total size of this can be over 6MB!

Now compare that with TailwindCSS: you only need to include a single file (the css/tailwind.min.css file) which weighs in at just 1KB! It contains all the necessary styles for your entire website without any extra bloat from other components or unnecessary features. This makes your page load faster than using Bootstrap or other frameworks such as Foundation & Semantic UI because there is less data being downloaded by the browser — which means more time spent building beautiful things instead of waiting for pages to load!

- Class names are readable

With TailwindCSS, your class names are short, descriptive and easy to read. They're also easy to remember.

TailwindCSS makes writing CSS so much easier because it's made up of simple variables that you can use throughout your project. It's very user friendly and has a lot of features like Autoprefixer (which automatically adds vendor prefixes for CSS properties), grid system, animations and much more!

The best part about using this framework is the fact that you don't have to write any new CSS classes in order for them to work with each other - they just do!

It's easier to customize and more efficient than Bootstrap

TailwindCSS is a utility-first CSS framework that allows you to easily create your own custom styles. It's also smaller than Bootstrap, and more efficient at handling big projects like large websites or apps that need consistency in their design.

The biggest advantage of TailwindCSS is its simplicity. The framework was designed with the idea that developers should be able to create their own components without having to look through hundreds of lines of code. Because the core components are well-written and open source, they're easy to modify and customize—you don't have to reinvent the wheel every time you want something new!

Conclusion

So yeah, this is why you should start using TailwindCSS. It's a great tool that speeds up your development and makes it easier for you to manage styles in your application. If this sounds like something you want to learn more about, then sign up for the free online course below. And as always, let me know if there are any questions or concerns in the comments section below!

Animated Social Media Icons With Pure CSS

Folarin Lawal — Mon, 01 Mar 2021 12:47:11 +0000

This is my First Time doing this, Rate Please :'(

JavaScript Program to solve Quadratic Equation.

Folarin Lawal — Tue, 26 Jan 2021 14:42:43 +0000

In this example, you will learn to write a program that solves a quadratic equation in JavaScript.

To understand this example, you should have the knowledge of the following JavaScript programming topics:

JavaScript if...else Statement

JavaScript Math sqrt()

This program computes roots of a quadratic equation when its coefficients are known.

The standard form of a quadratic equation is:

ax2 + bx + c = 0
where
a, b and c are real numbers and a ≠ 0

To find the roots of such equation, we use the formula,

(root1,root2) = (-b ± √b2-4ac)/2

The term b2-4ac is known as the discriminant of a quadratic equation. It tells the nature of the roots.

If the discriminant is greater than 0, the roots are real and different.
If the discriminant is equal to 0, the roots are real and equal.
If the discriminant is less than 0, the roots are complex and different.

let userInput = prompt("Input a Number")
for (let a = 0; a <= userInput; a++) {
console.log(a)

}

//QUADRATIC FORMULA FUNCTION

let minus, plus;

let a = prompt("Enter the value for A:");
let b = prompt("Enter the value for B:")
let c = prompt("Enter the value for C:")

let squareRoot = (b*b) - (4*a*c);

// Conditions for Minus or Plus

if (squareRoot > 0) {
minus = (-b - Math.sqrt(squareRoot))/(2 * a);
plus = (-b + Math.sqrt(squareRoot))/(2 * a);

//Result
alert(`The roots of the Quadratic Equation ${minus} and ${plus}`);

}
else if(squareRoot == 0) {
minus = (-b - 0 / (2 * a));
plus = (-b + 0 / (2 * a));

//result
alert(`The roots of the Quadratic Equation are ${minus} and ${plus}`);

}