DEV Community: Ibsen Giovanni

Part 1: How to install and use Tailwind CSS quickly in your project

Ibsen Giovanni — Sat, 15 Feb 2025 11:53:30 +0000

In this article, you will learn what Tailwind CSS is, how it differs from traditional frameworks, and why it has become a favorite among developers globally. We'll explore its benefits, such as efficiency, customization, and performance, along with practical steps to get started. By the end, you'll understand why companies like Netflix and OpenAI rely on Tailwind CSS for their web development needs.

What is Tailwind CSS

Tailwind CSS is an open-source CSS framework released in May 2019. Unlike other frameworks,like Bootstrap, it does not provide pre-designed UI components such as cards or buttons. Instead, it provides low-level utility classes to build custom designs directly within your HTML file.

These utility classes are small single-purpose CSS classes that can be directly applied to HTML elements. A lot of big companies like Netflix, OpenAI, Microsoft, and many more are using this tool. That is to let you know how Tailwind CSS is widely used globally. Moreover, what can be so special in Tailwind CSS that big tech companies adopt? You can find an article about that here.

Benefits

Tailwind CSS offers a range of benefits that make it a powerful tool for developers. Are you looking to create efficient, customizable, and high-performance designs? Let’s discover it in the coming lines.

- Efficiency

Tailwind CSS offers exceptional efficiency. It allows developers to create designs quickly and efficiently without writing any CSS code manually. Which is a time saver.

- Customization

It provides predefined classes that allow you to adjust the design according to your needs. Moreover, developers can also create their courses and customize the design further. It saves you time but still doesn't limit your options for customization. You have the freedom to create and innovate in your designs.

- Performance

In general, it is safe to say that Tailwind CSS is faster than regular CSS because it uses a special technique called dead code elimination. Which gets rid of unused CSS rules before your style sheet even reaches the browser. Cool feature right :)?

- Community

Tailwind CSS has a large and active community that contributes to its development and maintenance. This ensures that the framework is always up-to-date, which is very important for a framework. People are always keen to share how they are using it, which welcomes variety and tons of examples to base on.

Prerequisites

For you to follow along easily with this tutorial, ensure you have the following installed:

Node.js: You can verify if you have Node.js installed by typing node -v

You will then see your node.js’s version and if it is not installed it will throw an error. You will then need to download it and install it. Follow this link.

Code editor: You can choose the one you want. We are going to use Visual Studio code in this tutorial.
Browser of your choice: We use Firefox
Optional: Extension installation if you have VS Code:
- Tailwind Intellisense
- Prettier

NB: If you do not have these extensions it is okay.

Installation

In this part, you will learn how to install Tailwind CSS using a JavaScript framework(ViteJS). We chose ViteJS because it is easy to install, to use and requires few configurations to start with. All of that makes it ideal for our tutorial.

Step 1: Search for Tailwind CSS doc on your browser

Search for Tailwind CSS official documentation on your browser or you can copy this link : https://tailwindcss.com/. Once you reach the documentation page, your interface should look like the image below.

Step 2: After reaching this page, click on the Docs link as shown in the screenshot below

Step 3: After clicking on docs, you will reach a page that looks like this, as shown below:

Step 4: Click on Framework guides under the installation header

After clicking on the Framework guides, you will see the page below. When on the designated page you will see a list of different frameworks. Among those frameworks, please select ViteJS.

Step 5: Choose ViteJS as a framework

ViteJS has a lot to offer: a fast and modern development experience, which is ideal for integrating Tailwind CSS efficiently. Simply, it is fast and makes it easy to work with Tailwind CSS.

After clicking on ViteJS you will reach a page that looks like this as shown below:

Project creation

In this section, we are using the official documentation by following the steps one by one. We will split this section into different sub-sections for easy understanding and better comprehension. Ensure you follow them one at a time.

Step 1: ViteJS project creation

The first thing to do is to type in the below command in your terminal. This will allow you to put the first stone of the construction, which is to create a ViteJS project.
Command : npm create vite@latest my-project -- --template react
Note: Make sure to change the ‘my-project’ to the name that you want. We will take ‘tailwind_project’ as our project name.
Our command is then : npm create vite@latest 'tailwind_project' -- --template react

After typing the above command and hitting enter, you will see the question below

Type y or press ENTER
You will see this message below when the installation is complete:

Step 2: Change the directory or enter into the directory of your project

After that, we navigate into our directory which has the same name that we defined one step earlier, by typing: cd 'tailwind_project'

Step 3: Tailwind installation

After changing the directory, run the following command to install finally Tailwind CSS :

 npm install -D tailwindcss postcss autoprefixer

Note: This process may take a few seconds, depending on your computer's specs and your internet connection, so please be patient.

Step 4: Open the project with your code editor and check if Tailwind CSS is properly installed

We can check if it is properly installed by going into the file and looking at it. If it is installed, you will see Tailwind CSS in the dependencies part, as shown in the screenshot below. If it is not, you must ensure that you have a proper internet connection or enough space and redo the command.

Step 5: Tailwind Configuration

Now that we have installed it, we need to configure our project to recognize the classes that you will use in your project.

Let’s initialize Tailwind CSS in our project by running this command in the terminal:

  npx tailwindcss init -p

The command above will generate tailwind.config.js and postcss.config.js files. You should have received a confirmation message as below.

Step 6: Add tailwind directives

After generating the two files, copy the code below and add it to the tailwind.config.js file.

content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

Before adding the code, we have this code below in tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
 content: [],
 theme: {
   extend: {},
 },
 plugins: [],
}

After adding, we have the following

/** @type {import('tailwindcss').Config} */
export default {
 content: [
   "./index.html",
   "./src/**/*.{js,ts,jsx,tsx}",
 ],
 theme: {
   extend: {},
 },
 plugins: [],
}

If you are following Tailwind CSS documentation, copy the above code and paste it into ‘tailwind.config.js’ file as shown below:

Main CSS modification

We are almost finished. We have configured the paths and initialized Tailwind CSS in the entire project. The next step is to update our main CSS file. In your case, the main CSS file is index.css. You can access it in the src folder as shown below:

Step1: Go to index.css and add Tailwind directives

The first step is to go to the index.css file. Once there, copy the code below and add it to the beginning of your main CSS file. Please remember to put that at the top of your code before any other CSS code.

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

Below is how your code should look after adding the code above.

Run your project

We are in the last sprint now, only one thing to do. The thing is: type npm run dev in your terminal, hit ENTER, and voilà, you have launched your first ViteJS app. Please remember that you need to be in your project directory. Then open your terminal with VSCODE or any other IDE. And then you type the command in that terminal.

Step1: Copy the URL on the terminal

Generally, after you hit the ENTER button, some logs should appear in your terminal. As shown in the image below. These logs confirm that your project is functional, and it is running on your computer.

TODO: Copy the URL: http://localhost:5173/,paste and hit ENTER into your favorite browser

Step2: Visualize your project on your browser

After hitting the ENTER button, the project will load in a few seconds, and you should be able to see the screen below on your browser. Consider that this is Vite.JS default design, so you should not mind the look much.

Testing

As we have installed our project and launched it, we want to make sure that Tailwind CSS works fine. We are going to edit some parts of the existing code to see how it affects the rendering.

Step 1: Go into the App.jsx file.

Step 2: Change the color of the surrounding text in red

Step 2.1 : New CSS Class

Put the following class: text-red-500 into the <h1></h1> tag that contains the text we want to modify. Copy-paste:

className='text-red-500'

Result

Voilà, the text is now red, you have successfully styled your text using Tailwind utility classes.
You are now ready to go further on using Tailwind CSS.

Conclusion

You can install Tailwind CSS in any project by following simple steps. Tailwind CSS is easy to use, customizable, and developer-oriented. Moreover, it has a big community where you can find support.

Moreover, explore Tailwind CSS documentation, build, create, and design whatever you think. This tool is a key element that you can use without limits, and it is free.

How can we use Tailwind CSS in a real project? Let’s use it in a concrete project. In the next article, we will build a simple project where we deep dive into Tailwind CSS usability. See you there!

Links of resources

My Development Environment

Operating system: Debian12 Bookworm
Code editor: Visual Studio Code
Browser: Firefox
Nodejs version: V18

The Importance of Reading Documentation: A Lesson from Nvidia Drivers

Ibsen Giovanni — Fri, 03 Jan 2025 15:02:22 +0000

Look, we've all been there. New problem? First stop: ChatGPT. Didn't work? Time for the classic Google-Stack Overflow-Reddit spiral. That was me yesterday, wrestling with Nvidia drivers on Debian 12.

The Modern Debugging Journey

So here's how it went down:

ChatGPT gave me some commands. Cool, but... context? 🤷‍♂️
YouTube search: crickets for Debian 12
Stack Overflow: Different versions, different problems
GitHub issues: Close but no cigar
Reddit: Finally! Some heroes pointed me to... wait for it... the Debian docs

What Are Nvidia Drivers?

Nvidia drivers are essential software components that enable your operating system to communicate effectively with your Nvidia graphics card. They're crucial for:

Optimal graphics performance
Hardware acceleration
GPU-intensive tasks like machine learning or gaming
Multiple monitor support
Power management

The Debian Documentation Gem

Here's the thing - those Reddit wizards? They weren't wizards. They just RTFM'd (Read The Fantastic Manual, obviously 😉). When I finally hit up Debian's documentation, I had that "ohhhh" moment.

The wiki provides:

Clear installation instructions
Common pitfalls and their solutions
Hardware compatibility information
Troubleshooting guides

The Real Issue: Skipping Documentation

Let's be honest - we're all guilty of this. We spend an hour jumping between tabs, trying random commands from 2018 Stack Overflow posts, when we could've spent 10 minutes reading docs.

Conclusion

Next time you're about to copy-paste that sketchy command from a random forum - maybe, just maybe, check the docs first?

And hey, to that Reddit community - thanks for teaching me to RTFM.

Remember: The best troubleshooting is the one you don't have to do because you read the documentation first.

How to deploy a simple website to Vercel: case of a portfolio

Ibsen Giovanni — Fri, 15 Nov 2024 12:38:33 +0000

A portfolio is like an ID for every developer. It showcases our skills and says, “Hey, there is what I am doing; you can contact me ….” So being online and letting everyone know that you are there by using a professional tool can be efficient when you want to reach more people for freelancing, marketing and more.

This article is about showing how we can deploy a simple website to Vercel.
In this article, we will be using a portfolio website to demonstrate the deployment process. By the end of this tutorial, you will learn how to deploy your project to Vercel for free.

Introduction to Vercel

Vercel is a cloud platform designed for front-end developers, primarily known for its seamless integration with frameworks like Next.js. It enables users to deploy, manage, and scale web applications effortlessly.

Vercel advantages: Vercel offers numerous advantages, we will just cite some of them :

Vercel is free of charge for what we want to do,
Vercel offers a lot of features to keep track of the projects like web traffic analysis and more.
It has a lot of templates built in different frameworks like NextJS, ViteJS, etc.. that you can use as a starting point and then customize as you want.

Additionally, you can use Vercel as a vessel for any of your projects, from static websites to dynamic ones. You can even host a chatbot powered by Ai bring your ideas to life and show it to the entire world by using vercel.

So let’s discover this tool by deploying our first project: a portfolio.

Prerequisites

Before beginning, let’s ensure you have the necessary setup. Please verify that you have the following :

Code editor of your choice
Browser of your choice
Source code: you can have the one we will use in this repository

Structure of the portfolio

Our portfolio consists of two main files with 5 images :

index.html
Style.css
5 images The link to the GitHub repository

You can directly download the files in it and then follow the steps in the next section.

Below is the result that we will obtain at the end.
Output of the website :

Set up GitHub repository

Now, that we have all of our code set up let’s push it on GitHub.
We are going to upload our code directly to the created repository file by file. If do know how to create a repository on GitHub, consider reading more by following this link

Set up a Vercel account.

After uploading all the code with the needed images. Next, you should follow the steps illustrated in the images below:

Note: Be sure to have a GitHub account before going further on.

Step 1: Click on the Sign Up button.

You will be redirected to another page as shown in the second image, and then fill in your username.

Step 2: Click on the GitHub option. You will wait while you are being authenticated.

Before doing that, please ensure that you are already connected to GitHub.

Step 3: Optional

At this level, you can skip or fill in the inputs as shown in the first image (the screenshot below shows the inputs filled in to give you an idea of what you should type in).

Bravo from now on, you are part of the Vercel community.

Deploying the project on Vercel

Now, that you have linked your GitHub account with Vercel, you can create a
Vercel project in which you will use the GitHub repository you have already built earlier.

Please follow the steps below respectively.

Step 1: Click on the arrow at the top right corner of the page and then choose Project.

Step 2: Choose the name of the repository in which you pushed your portfolio code.

Ensure that it is the same name as the one you have on GitHub.

In our case, the name is simple_portfolio highlighted in red.

Step 3: Deploy your Portfolio

Enjoy the moment by hitting this Deploy button

Step 4: And voila, you have now deployed your portfolio for free easily and forever.

You can click on the Continue to Dashboard button to see what your magnificent operation center looks like.

Step 5: Hit the Visit button to see your portfolio live.

Output: You can visualize the output via this small video by following this link demo

Conclusion

In brief, we have successfully deployed our portfolio on Vercel for free by using our GitHub account to first put our code in a designed repository and then use this repository to deploy it on Vercel and then make this portfolio alive. Here are the main points we covered:

Create a repository on GitHub to contain our code
Create a Vercel account by using a GitHub account
Create a project on Vercel Link the GitHub repository containing our portfolio in the created Vercel project Deploy our portfolio

Vercel advantages: Vercel offers numerous advantages, we will just cite some of them :

Vercel is free of charge for what we want to do,
Vercel offers a lot of features to keep track of the projects like web traffic analysis and more.
It has a lot of templates built in different frameworks like NextJS, ViteJS, etc.. that you can use as a starting point and then customize as you want.

Thank you for taking the time to read this article, WE do appreciate it and wish you great success in your learning or apprenticeship.

DEV Community: Ibsen Giovanni

Part 1: How to install and use Tailwind CSS quickly in your project

What is Tailwind CSS

Benefits

- Efficiency

- Customization

- Performance

- Community

Prerequisites

Installation

Step 1: Search for Tailwind CSS doc on your browser

Step 2: After reaching this page, click on the Docs link as shown in the screenshot below

Step 3: After clicking on docs, you will reach a page that looks like this, as shown below:

Step 4: Click on Framework guides under the installation header

Step 5: Choose ViteJS as a framework

Project creation

Step 1: ViteJS project creation

Step 2: Change the directory or enter into the directory of your project

Step 3: Tailwind installation

Step 4: Open the project with your code editor and check if Tailwind CSS is properly installed

Step 5: Tailwind Configuration

Step 6: Add tailwind directives

Main CSS modification

Step1: Go to index.css and add Tailwind directives

Run your project

Step1: Copy the URL on the terminal

Step2: Visualize your project on your browser

Testing

Step 1: Go into the App.jsx file.

Step 2: Change the color of the surrounding text in red

Step 2.1 : New CSS Class

Result

Conclusion

Links of resources

My Development Environment

The Importance of Reading Documentation: A Lesson from Nvidia Drivers

The Modern Debugging Journey

What Are Nvidia Drivers?

The Debian Documentation Gem

The Real Issue: Skipping Documentation

Conclusion

How to deploy a simple website to Vercel: case of a portfolio

Introduction to Vercel

Prerequisites

Structure of the portfolio

Set up GitHub repository

Set up a Vercel account.

Step 1: Click on the Sign Up button.

Step 2: Click on the GitHub option. You will wait while you are being authenticated.

Step 3: Optional

Deploying the project on Vercel

Step 1: Click on the arrow at the top right corner of the page and then choose Project.

Step 2: Choose the name of the repository in which you pushed your portfolio code.

Step 3: Deploy your Portfolio

Step 4: And voila, you have now deployed your portfolio for free easily and forever.

Step 5: Hit the Visit button to see your portfolio live.

Conclusion

References and Further Reading