DEV Community: v1shalm

Getting started with TailwindCSS

v1shalm — Sat, 24 Sep 2022 18:03:31 +0000

Tailwind CSS can be used to make websites in the fastest and the easiest way.

Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. The beauty of this thing called tailwind is it doesn’t impose design specification or how your site should look like, you simply bring tiny components together to construct a user interface that is unique. What Tailwind simply does is take a ‘raw’ CSS file, processes this CSS file over a configuration file, and produces an output.

Installation
In this project, we will install Tailwind CSS via Node Package Manager (npm), but you could also use the CDN. If you choose the latter approach, you will not be able to use some features like extracting custom CSS classes. But if you just want to give it a spin, then go for it.

/* Tailwind CSS CDN */
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

To install Tailwind, we will first create a folder:

$ mkdir mytailwindcsssite
Now, change to the newly created folder and initialise npm to install Tailwind:

$ cd mytailwindcsssite $ npm init -y

After initialising npm in the folder, a package.json file will be created. Now we can install the tailwindcss package easily by running the following command:

$ npm install tailwindcss

Adding Tailwind to the project

The next step is to add Tailwind to our project. For that, we will create a file called src/styles.css in which we will inject all three Tailwind directives to import base, components, and utilities styles:

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

You could also add a Tailwind configuration file within the project that lets you create your own CSS classes or import fonts via the @import rule. To install the tailwindcss configuration file, run the following command:
$ npx tailwindcss init

This will create a new file called

tailwind.config.js

5 Best Tips for Responsive Design in CSS

v1shalm — Sat, 24 Sep 2022 17:38:55 +0000

-
Hey there, hope you are doing well. There are a couple of tips that I personally use when I am making websites responsive that I would like to share with you in this article.

Padding/Margin - We usually use a lot of padding when we make websites for desktops, to make them more attractive. While making it responsive for mobiles, tablets try decreasing the existing paddings and margins.
Use em/rem/ percentages - Always try using em/percentage/rem instead of px, so that the text, images size adjust with respect to the device width.

👉 An example could be:

body { font-size:60%; }
div { font-size: 2.4em; }
p { font-size: 1.4rem; }

Flex-wrap - Using flexbox to align your HTML elements such as
,
etc provides the force elements onto one line or can wrap onto multiple lines according to their width.
Media query - Media query should be used to set width and height according to the breakpoints. Breakpoint refers to the width at which the website starts looking distorted.

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Box-Sizing - It resolves a lot of problems padding causes, using box-sizing on HTML elements with a percentage width will take padding into account rather than having to adjust the width due to padding.

`{box-sizing : border box;}`

Feel free to add other tips/tricks in the comments section. Thanks for reading :)

How to create the Perfect README for Your Project

v1shalm — Fri, 23 Sep 2022 16:05:02 +0000

Why should I create a README?

READMEs are fun to create and are an important part of your personal profile and your organization's profile. Writing an excellent README file for your open-source project's repository is equally important. The README file is the first impression of your project that potential contributors and new users get. While your Contributing .md allows contributors to make and merge pull requests in your repository,Users can find instructions on how to use your project in your README file.

What should I write in my README?

- Start by adding the title for your project
- Make sure there is a banner image or logo included
- Be brief and to the point when describing your project
- Prerequisites should be listed
- Specify the installation commands
- Provide as many examples as possible.

A README is very important, but can be intimidating to a beginner. Using a README generator can make creating a README for a project easy.

Readme.so
Github profile readme generator
https://www.makeareadme.com/

My Top pick would be: Readme.so