Tailwind

Karima Aktari — Thu, 03 Mar 2022 12:52:48 +0000

What is Tailwind-CSS

Basically, tailwind CSS is a utility-first CSS framework for building custom user interfaces rapidly. It is a highly customizable CSS framework. It’s a framework of packing with classes like flex, p for padding, m for margin, text-center to centralized text, rotate, bg-color etc, that can be composed to build any design, directly in our project. It is being the most populated CSS framework day by day because of its flexibility.

Benefits of Tailwind CSS

According to my experience, Tailwind CSS is a framework which is highly customizable. It’s very flexible to make designs. It can be used to make websites in the fastest and the easiest way. Here are no more silly names for CSS classes and Id’s. We can customize the designs to make the components. Also Making the website responsive here is easier. It Can Be Optimized Using PurgeCSS too.

Image: Benefits of Tailwind CSS

Based on these features, we can easily say that Tailwind is an excellent solution for developers familiar with CSS who want to speed up the creation and design process in the long run. But It’s not such a good idea if you are not familiar with vanilla CSS and do not want to spend time to learn a new CSS framework.

Compared with Bootstrap

Bootstrap is the most popular HTML, CSS, and JavaScript framework for building responsive web sites. On the other hand, Tailwind CSS is the most popular utility-first CSS framework for fast UI development.
If anyone is working with a design, a framework like Bootstrap doesn't help much because of writing most of their own CSS. With Tailwind, that becomes easier because of the utility classes.
Tailwind is different from frameworks like Bootstrap because it's not a UI kit. It doesn't have a default theme, and there are no built-in UI components.

Use Tailwind CSS

To use tailwind css we can apply two way:__

First-way:- Install tailwind css via npm,

Step-1:- Install: npm install -D tailwindcss
Step-2:- Configure your template paths __tailwind.config.js
module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }

Step-3:-Install:- npx tailwindcss init

Step-4:- Add the Tailwind directives to CSS__src/input.css
@tailwind base; @tailwind components; @tailwind utilities;

Step-5:- Start the Tailwind CLI build process_command

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Second-way:-Using Tailwind CSS via CDN,
Link:- 
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Code with CDN in html file

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

</head>

<body>

    <body>
        <div class="container mx-auto">

            <div class="leading-9
                    text-red-700
                    bg-red-500 w-full p-5 my-10
                    border-t-2
                    border-solid
                    border-green-500
                    opacity-40
                    shadow-2xl">
                <h2 class='text-2xl font-bold text-center text-pink-800 uppercase py-2'>Our Top New Brands</h2>

            </div>
            <div class='container mx-auto py-5'>

                <div class='grid lg:grid-cols-6 md:grid-cols-4 sm:grid-cols-2 text-black gap-4'>

                    <div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                        <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo1.png" class='w-full'
                            alt='' />
                    </div>

                    <div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                        <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo2.png" class='w-full'
                            alt='' />
                    </div>

                    <div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                        <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo3.png" class='w-full'
                            alt='' />
                    </div>

                    <div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                        <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo4.png" class='w-full'
                            alt='' />
                    </div>

                    <div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                        <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo5.png"
                            class='w-full p-2' alt='' />
                    </div>

                    <div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                        <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo6.png"
                            class='w-full p-2' alt='' />
                    </div>
                </div>
            </div>
    </body>

</html>

Code with npm in react javascript library(Brands.js)file;

  import React from 'react';

const Brands = () => {
    return (
        <div className='container mx-auto py-5'>
            <h2 className='text-2xl font-bold justify-center text-pink-800 uppercase pb-6'>Our Top New Brands</h2>

            <div className='grid lg:grid-cols-6 md:grid-cols-4 sm:grid-cols-2 text-black gap-4'>

                <div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                    <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo1.png" className='w-full' alt='' />
                </div>

                <div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                    <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo2.png" className='w-full' alt='' />
                </div>

                <div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                    <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo3.png" className='w-full' alt='' />
                </div>

                <div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                    <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo4.png" className='w-full' alt='' />
                </div>

                <div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                    <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo5.png" className='w-full p-2' alt='' />
                </div>

                <div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
                    <img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo6.png" className='w-full p-2' alt='' />
                </div>
            </div>
        </div>
    );
};

export default Brands;

So, that's all within a short description about Tailwind CSS. I hope readers will benefit at least a little bit.

Typescript

Karima Aktari — Fri, 25 Feb 2022 06:01:50 +0000

What is TYpescript:--

TypeScript is a strongly typed programming language which is built on JavaScript and developed and maintained by Microsoft. It is a syntactical superset of the JavaScript programming language. It’s an open source programming language. It is designed for the large applications development and transcompiles to JavaScript. It provides optional static typing, classes and interfaces. Typescript doesn’t run in the browser. The code which is written in typescript is compiled to JavaScript, then runs in the browser.

So, We can say that TypeScript is a strongly typed, object oriented, compiled language.

How Typescript works:--
Typescript has a relation with javascript. It offers all javascript features in its type system. JavaScript provides language primitives like string and number without checking that we’ve consistently assigned these but TypeScript does. Besides, typescript knows javascript and generates types for many cases.

Example:- If we create a variable and assign it to a particular value, TypeScript will use the value as its type.

Features of typescript:--

Browsers can’t compile typescript code, a compiler compiles typescript code into javascript and runs on browsers. That means the code of typescript is compiled to JavaScript for the purpose of execution.
TypeScript can run on any environment where JavaScript runs on.
Typescript also supports other js libraries and JavaScript can also be written in TypeScript. Like:-
i)Front-end in any framework ;
ii) Backend in Node js ;
iii) Cross-platform mobile apps in React Native ;
It supports OOP concepts like classes, objects, interfaces and inheritance etc.
Typescript is javascript and javascript is typescript because
Typescript starts with Javascript and ends with JavaScript. And, as a superset of JavaScript any valid .js file can be renamed to .ts and compiled with other TypeScript files.
Typescript takes the basic building blocks of a program from JavaScript. So, we only need to know JavaScript to use TypeScript.

Difference between Typescript and Javascript:--

TypeScript checks a program for errors before execution but javascript doesn't.
JavaScript is dynamically typed. But Typescript provides optional static typing.
JavaScript is an interpreted single threaded programming language. It needs to be run to test and see if it is valid or not. But TypeScript transpiler provides the error-checking feature. Which helps to highlight errors before the script is run by compiling the code and generating compilation errors if there is any syntax error.
```
    Finally
```

Typescript isn't the altar of JavaScript, instead expanding it with new, valuable features. Everything that can be written in JavaScript can also be written in TypeScript.

DEV Community: Karima Aktari