How to Install and Set Up Tailwind CSS from Scratch

Clare Codes — Wed, 14 Aug 2024 13:46:07 +0000

Tailwind CSS is a popular CSS framework that enables developers to style within their HTML. It simplifies styling through pre-defined classes. If you want to build a personal portfolio website to share your skills and projects, this tutorial will guide you to quickly set up and configure Tailwind CSS.

Step 1: Setting Up the Project

Create a new project folder and set up the basic structure:

mkdir portfolio-website
cd portfolio-website

Confirm that you have Node.js installed:

node -v

Create a package.json file:

npm init

Step 2: Install and Set Up Tailwind CSS

Install Tailwind CSS. If you’re using npm, you can install it via:

npm i tailwindcss

Create a tailwind.config.js file to configure Tailwind CSS:

npx tailwindcss init

Create a folder called src and in it create a file index.html.
Add the paths to all the template files in tailwind.config.js. In this example, the path is: "./src/*.{html,js}"

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

In src create another file, input.css, and add the Tailwind directives:

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

Next, build your CSS file:

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

This command will generate output.css where the Tailwind classes are compiled into a single CSS file that you can include in your HTML.

Next, if you are on VS Code, install the extension Tailwind CSS Intellisense to get class suggestions.

Step 3: Designing the Layout

In your index.html file, add output.css in the header. Continue by creating the basic structure of your portfolio website. The layout typically includes:

A Header with your name and navigation links.
A Hero Section with a brief introduction.
A Projects Section showcasing your work.
An About Section with your bio.
A Contact Section with a form to reach out to you.

Here’s a simplified example of the HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link href="output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 text-gray-900">
    <header class="bg-white shadow-md">
        <nav class="container mx-auto flex justify-between items-center p-5">
            <h1 class="text-2xl font-bold">Your Name</h1>
            <ul class="flex space-x-5">
                <li><a href="#home" class="hover:text-blue-500">Home</a></li>
                <li><a href="#projects" class="hover:text-blue-500">Projects</a></li>
                <li><a href="#about" class="hover:text-blue-500">About</a></li>
                <li><a href="#contact" class="hover:text-blue-500">Contact</a></li>
            </ul>
        </nav>
    </header>
    <section id="home" class="container mx-auto p-10 text-center">
        <h2 class="text-4xl font-semibold">Welcome to My Portfolio</h2>
        <p class="mt-4 text-xl">I am a frontend developer.</p>
    </section>
    <!-- Add more sections here -->
</body>
</html>

Step 4: Making It Responsive

Tailwind CSS makes it easy to create responsive designs using utility classes. For example, you can adjust padding, margins, and font sizes based on the screen size:

<section id="home" class="container mx-auto p-10 text-center md:text-left">
    <h2 class="text-4xl font-semibold md:text-6xl">Welcome to My Portfolio</h2>
    <p class="mt-4 text-xl md:text-2xl">I am a frontend web developer.</p>
</section>

To make your portfolio more interactive, use JavaScript. For example, you can create a smooth scrolling effect when navigation links are clicked:

document.querySelectorAll('nav a').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

In Conclusion

Keep experimenting with different Tailwind classes and features to make your portfolio truly unique.

Github | Live

Originally posted on my blog.

My Journey Begins: From Coding Bootcamp to 100 Days of Code

Clare Codes — Tue, 25 Jun 2024 08:27:02 +0000

This week marks a significant milestone in my journey— in two days, I’ll officially be a full stack developer, having graduated from Moringa School! The experience has been intense, often feeling like a race against time. But the sense of accomplishment I feel makes every project and late night worth it.

As I step into the job market ~~(imposter syndrome and all)~~, I'm aware that learning doesn’t stop at graduation. It’s just the beginning. I will continue to improve as a developer and joined the 100 Days of Code challenge to build on the foundation I’ve established during bootcamp.

Why 100 Days of Code?

In coding bootcamp you learn new concepts and skills at a rapid pace. While I have gained an understanding of full stack development, I want to refine my skills. The 100 Days of Code challenge is the perfect opportunity for this. By coding for at least an hour a day, I will:

Reinforce what I’ve learned during bootcamp
Explore new technologies and frameworks
Work on personal projects
Contribute to open-source projects

My Plan for 100 Days of Code

For the next 100 days, I’ll be following a structured plan to ensure I stay on track and make the most of this challenge. Here’s what I’ve mapped out:

Daily Coding: I will spend at least one hour each day coding. My main resources will be FreeCodeCamp, official documentation and the Moringa School curriculum (while I still have access to it).
Documenting My Progress: I’ll be documenting my journey on here, Twitter, LinkedIn and my code will be hosted on Github. This will keep me accountable, allow me to reflect on my progress, share my experience with others and get feedback.
Projects and Challenges: I plan to work on a variety of projects to solidify my understanding of new and old concepts.

Day 1

Today is Day 1 of my 100 Days of Code challenge. I’ll start by focusing on HTML. My goal is to build the first project on FreeCodeCamp.

Looking Ahead

I’m excited about the journey ahead and the opportunities it will bring. The 100 Days of Code challenge is not just about improving my technical skills; it’s also about developing discipline. I’m investing in my future as a developer and working towards my ultimate goal of improving women's health and wellness in Africa.

Stay tuned for regular updates on my progress, challenges, and achievements.

DEV Community: Clare Codes