DEV Community: Harshit Prasad

Tailwind CSS basic usage

Harshit Prasad — Wed, 16 Aug 2023 10:21:57 +0000

*Tailwind CSS * is an open source CSS framework. It enables us to implement CSS in our application in a much simpler way. The way it does this is by giving us utility-classes(meaning you just have to name a class accordingly to implement a specific style in a component or element and does not have to define the style completely write the style for that component or element). This will be cleared by seeing the examples below.
Tailwind CSS differs from different frameworks like Bootstrap in the way that in Tailwind, utility classes are build upon style elements unlike in Bootstrap where utility-classes are build upon components. Like 'bg-blue-400' gives style blue background style when applied on an element like button where as in bootstrap, we write 'Primary' which gives an already defined button with specific style. So, this enables us to more specifically design our component while writing our html in our own way.
Here are some basic utility classes which are used to implement CSS property in our project.

1. Margin and padding -
Tailwind CSS Classes: m-{size}, p-{size}

<div class="m-4 p-6 ">Lorem ipsum dolor sit amet</div>

2. Width and Height -
Tailwind CSS Classes: w-{size}, h-{size}

<div class="w-64 h-32 "></div>

3. Background and Text Color -
Tailwind CSS Classes: bg-{color}-{strength}, text-{color}

<div class="bg-green-300 text-white">Colored Content</div>

4. Font size and font weight -
Tailwind CSS Classes: text-{size}, font-{weight}

<p class="text-lg font-semibold">Large Bold Text</p>

5. Borders and Border Radius -
Tailwind CSS Classes: border, border-{size}, rounded, rounded-{size}

<div class="border border-gray-400 rounded-lg ">
  Bordered and Rounded
</div>

6. Positioning -
Tailwind CSS Classes: top-{size}, right-{size}, bottom-{size}, left-{size}

<div class="absolute top-0 left-0 ">Top Left</div>

7. Flexbox -
Tailwind CSS Classes: flex, inline-flex, flex-{direction}, flex-wrap, justify-{content}, items-{alignment}

<div class="flex justify-center items-center ">
  Centered Content
</div>

These are some of the basic CSS properties. If you want to know about more properties, go to tailwindcss.com and search for the property you need to implement.

Tailwind CSS setup

Harshit Prasad — Tue, 15 Aug 2023 13:18:13 +0000

*Tailwind CSS * is an open source CSS framework. It gives us low-level utility-classes to implement CSS in our projects. By low level we mean that the utility classes gives us style elements instead of style components. E.g.- 'bg-red-200' in Tailwind gives red background colour to our element where as in frameworks like bootstrap or materialize we get fully styled components like buttons, forms etc.
Here are the basic steps to include Tailwind CSS in our javaScript project.

Step 1: Get node.js installed in your computer. You can get it by going the nodejs.org and selecting the right version for your computer.

Step 2: Go to your project folder in the terminal and write

npm init

This will include package.json file to your project folder. you can check this to know your project dependencies.

Step 3: On the terminal on the same address of your project folder, write

npm i tailwindcss

This will include Tailwind CSS to your project. You can check this as a dependency in your package.json file.

Step 4: Now go to your package.json file and in the script tag and replace build tag with

"build-css": "tailwindcss build src/style.css -o public/style.css --watch"

Step 5: Now in your terminal, write:

npm run build-css

This will compile all your tailwind file in your public CSS file.

Now you can use tailwind CSS utility classes in your project.

Socket.io basic setup

Harshit Prasad — Tue, 08 Aug 2023 18:16:59 +0000

Socket.io is a library which is used to establish bidirectional communication between different components of a web application(e.g.- (client ,server), (two different web pages) etc. ). It gives us a simple way to establish such communication in Real-time. This library has a low-latency which makes it real time and ensures almost zero data loss. Following is the basic process of how to establish communication between a client and a server using socket.io in javaScript.

1. Setting up client server address

const io = require('socket.io')(4500);

2. Creating IO communication


io.on('connection', socket =>{
    socket.on('new-user-joined', names => {
        console.log("JOINED THE CHAT",names );
        users[socket.id] = names;
        socket.broadcast.emit('user-joined',names);

    });

socket.emit('new-user-joined',names);

socket.on('user-joined',names =>{
append(`${names} joined the chat`,'right')
})

These two code blocks , server side and client side respectively , gives us a full circuit of communication between client and server.

io.on('connection', socket =>{
});

io.on creates and maintains the circuit for communication and listens for requests.

2. socket.emit

socket.emit('new-user-joined',names);

socket.emit emits an event to the opposite party (here - new-user-joined) where the opposite party is waiting to listen to the event to take action. Here, names is a variable passed with the event.

3. socket.on

 socket.on('new-user-joined', names => {

});

socket.on listens to the event emitted by socket.emit with the same name and takes action accordingly.

4. socket.broadcast.emit

 socket.broadcast.emit('user-joined',names);

socket.broadcast.emit emits event as well as data (here - names) to all the clients connected to the server except the user itself. socket.on also listens to the request made be socket.broadcast.emit.

So, here was a simple description and demonstration of how to establish a connection and communication between client and server using socket.io.