# WHAT I LEARNT REPLICATING THE` HACKMD.IO` WEB PAGE USING ONLY HTML AND TAILWIND CSS

**Introduction:**

We were introduced to a new course which was the Tailwind CSS. Tailwind CSS is a free and open-source CSS framework that facilitates the creation of websites more quickly and efficiently. It's a utility-first framework, which means it provides a list of "utility" classes that can be used to style elements.

According to` tailwindcss.com(2025)`, "Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file. It's fast, flexible, and reliable — with zero-runtime". In my opinion, this simply means that tailwind CSS is an upgrade from the vanilla CSS.

**What I learnt **

As a web developer, the best way to work is to keep up with industry trends, practice writing clean and maintainable code, prioritize clear communication with stakeholders and colleagues, continuously learn new technologies, and build a solid foundation in pertinent programming languages. This does not mean that you have to go through unnecessary stress and hurdles if there are easier ways of getting the job done. Tailwind makes the job of designing a web page using just HTML and CSS easy because it is a type of in-line stylng. All the user has to do is use the appropriate utility class.

The first thing to do when trying to impliment the tailwind CSS is to do the installation through the Terminal to get it running. You can also get it up and running with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js.
I learnt to install the tailwind CSS seamlessly and I also got to understand that I could customize the default color palette for my project as well as some other features such as fonts, screens and spacing etcetera.

We were also introduced to some of tailwind CSS utility classes and the context in which they can be used. Some of the utility classes are:

* Spacing: such as Padding Utilities for controlling an element's padding. In tailwind, they are written as p-0, px-0....pr-0.. For instance, pt-6 would add 1.5rem of padding to the top of an element, pr-4 would add 1rem of padding to the right of an element, pb-8 would add 2rem of padding to the bottom of an element, and pl-2 would add 0.5rem of padding to the left of an element.

* Sizing: Width utilities for setting the width of an element. The Classes include w-0, w-px, w-0.5. For instance, utilities such as w-px, w-1, and w-64 are used to set an element to a fixed width. While utilities like w-full, w-1/2, and w-2/5 are used to set an element to a percentage based width.

* Borders: for example, the Border Radius Utilities for controlling the border radius of an element. Some of the classes includes rounded-none, rounded-sm, rounded-md, rounded-lg.
For example utilities like rounded-sm, rounded, or rounded-lg to apply different border radius sizes to an element.

**How I Implemented HackMD Project usng HTML and Tailwind CSS:**

I replicated a web page from the hackmd.io (`https://hackmd.io/blog?utm_source=blog&utm_medium=nav-bar`) website using just HTML and Tailwind CSS and it was really educative and hands-on. For this project, I built the HTML structure and then used the tailwind CSS utilities for styling the web page.
Below are screen shots of some of my codes:


For the HTML I used different divs to group my items for ease of styling. While for the Tailwind CSS, the most common utility classes used in my project were the bg-[color], the p-[], m-[], flex, justify-center, text-[], w-full etc.

The screen display is shown below:


Screenshot from 2025-03-10 14-10-32](https://hackmd.io/_uploads/rJa7tahiyx.png)


**Project Challenges and Solution**

The major issue faced while using the Tailwind CSS, was getting used to the installation process. I had problems trying to get the installed packages to work very well as I kept getting error messages. It took some intervention but I was able to overcome this challenge. Also, it took a while to get use to the utility classes and their usage. I had to visit the tailwindcss.com website several times to read and study how some of the utility classes were implemented to get clearer understanding.

In all, I think tailwind CSS helped in reducing the number of codes I would ordinarily write using the HTML and Vanilla CSS. It's styling requires very short (small/single purpose utility classes) codes in many instances which makes for a clearer and more easy way to write and present codes.

**Conclusion:**

In conclusion, Tailwind provides utility classes that you apply directly to HTML elements. Tailwind can be used with React, Vue, or Next.js to build UI components efficiently.
Although tailwind requires some learning, once mastered, it greatly improves workflow efficiency. For developers that want a utility-first approach to styling, Tailwind CSS is an effective solution. It enables complete customisation and enhances maintainability. Tailwind CSS is important because it allows you the freedom to design your website your way, using simple building blocks. I look forward to using tailwind more to practice on building more projects, even as I prepare to learn more advanced programming languages.