Forem: Amarachi Nwokocha

CSS styling and specificity

Amarachi Nwokocha — Mon, 17 Mar 2025 13:13:51 +0000

For a long time, CSS has been responsible for making web pages look beautiful, and interactive, and in some cases helped with basic functionalities.

To do this, it must interact with the elements in the HTML (Hyper Text Markup Language) document.

This guide, is for anyone trying to style HTML with vanilla CSS in any form. Be it in a standard HTML document, JSX, creating web components, or writing in PHP or XML, the rules still apply though the processes might be slightly different.

Adding CSS to an HTML Document

There are several ways to add CSS to an HTML document in this article, we will cover three which are:

Inline CSS
External CSS
Internal CSS

Inline CSS

This method of adding CSS to HTML involves using the style attribute to directly embed CSS style rules into the element’s opening tag.

(for details regarding html elements and how to use them, see my previous article)it will allow the element to look something like this:

While this method is convenient for quick styling, its repetitive nature makes it hard to maintain. It also affects the speed of an application as it increases the size of the html file thereby taking longer to load.

Internal CSS

This method of styling adds the style rules to the head tag of the html document using the style tag.

While it’s great for styling single HTML documents, its single-page scope puts it at a disadvantage for styling multiple HTML documents.

Also, mixing the structure of the html with CSS styles within the same document can make the HTML file harder to read and maintain.

An example of the internal styling syntax can be found below:

External CSS

This is written in a separate file with a .css extension and is linked to an HTML document using the tag in the head element.

This is the best practice for adding CSS to HTML files for a few reasons some are:

Separation of style information from HTML structure
Reusability of code as these external files can be linked to different HTML files
Reducing load times because browsers can cache external CSS files, so the CSS does not need to be re-downloaded.
This means of styling ensures uniform styling across multiple pages, making the website look cohesive and professional.
Using this method of styling is very easy you just have to:

Create a CSS file with the .css extension so your file can be named style.css or home.css
Link this CSS using the link element in the head tag of the HTML file As seen below:

Add your style rules to your CSS file. And you’re all set to style your page.

The methods used to style the HTML page can vary for different reasons and conditions. While the external CSS method is the best practice, different circumstances call for different methods of styling so choose the method that best fits your project.

Specificity in CSS

Specificity in CSS refers to a set of rules that determine which CSS styles are applied to an element when there are multiple conflicting rules.

In a nutshell, It is a way to calculate the weight of different CSS selectors. The more specific a selector is, the higher its specificity and the more likely its styles will be applied.

Specificity calculation.

Specificity is determined by four major categories of selectors they are:

Inline CSS: (styles added directly to an HTML element via the style attribute) has the highest specificity.
IDs: unique identifiers for elements that have a high specificity.
Classes, Attributes, and Pseudo-classes: These selectors have medium specificity.
Element (Type) Selectors and Pseudo-elements: These have the lowest specificity. In CSS, specificity is calculated through a point-based system.

This system starts at 0, element selectors and pseudo-element selectors which include pseudo-class or attribute selectors get 1 point, 10 points are given to classes, ID selector gets 100 points and inline styling gets 1000 points which is why it is always given the highest priority in CSS.

What this means for your code

Let’s say we have an HTML document with an h1 element say and we style it in our external stylesheet so we have something like this in the HTML:

The styles applied to the H1 elements will be the styles from the ID selector because, on the specificity point list, the ID has more points than the element selector.

Now say we throw in some inline styles for the H1 in the HTML document directly modifying the H1 to be:

The inline styles will automatically override the styles given by the ID because it has a higher specificity value than the ID.

Why understanding specificity is important

Styling with CSS allows for static ugly ducklings to transform into beautiful swans. The methods of styling are easy to understand and follow and though their usage may vary from project to project, external CSS remains the best practice.

These methods however won’t be fully effective if you do not understand specificity and how to use it. Understanding specificity allows you to know why and how your styling will react to certain style rules.

This helps minimise conflicting style rules, and redundant code and improves the overall performance of your web app. Happy coding!

Level Up Your React Apps with Tailwind CSS: A Step-by-Step Guide

Amarachi Nwokocha — Mon, 17 Mar 2025 12:55:22 +0000

Have you ever had difficulties styling? Or had a rough day because one CSS rule decided to not do what it is meant to do? Is there an end to having multiple style files or cumbersome components because CSS is just being, well, CSS. We need not even mention the countless hours spent in writing and debugging media queries for responsive web design. These and many other problems are what web developers face everyday in order to build web applications that not only work but have beautiful interfaces. Introducing Tailwind CSS, the trusted CSS framework that brings style to life in the twinkle of an eye.

Unlike most frameworks, Tailwind CSS does not have heavy classes. It is more of a shorthand method of writing CSS properties. You can think of it as an accessory added to an outfit to give it that extra pop. Now, what is tailwind CSS and how does it help writing readable and reusable code? And what are its benefits? Let’s take a deep dive to find out more.

NOTE: To fully grasp this guide, a good understanding of React and how to use it is required.

Introduction to Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides a set of pre-built utility classes to help quickly build modern and responsive web interfaces. Unlike traditional CSS frameworks that come with pre-designed components, Tailwind focuses on providing low-level utility classes that enable the creation of custom designs without leaving your HTML or in our case JSX. A deeper understanding of Tailwind CSS can be found in my previous article.

Tailwind CSS provides small modular classes that are designed to do one thing in CSS and do it well. These classes are added directly into the className attribute of an element and thereby applies the styles to that element. This is known as the utility first approach. This approach gives developers precise control over styling by allowing for quick adjustments without writing custom CSS. The class names are descriptive and directly represent the applied styles, making the code more readable and self-explanatory. It also makes it easy to combine and modify classes to create custom styles without leaving the HTML file.

This guide is here to help you to:

Break down the essentials of integrating Tailwind CSS with React.
Show you how to set it up without breaking a sweat.
Uncover the treasure trove of utility classes that Tailwind CSS offers.
Share tips, tricks, and best practices for crafting dazzling interfaces.

Setting up a React project

Setting up a ReactJS app can be done using different methods. Developers have various options ranging from using create React App (CRA), using Vite, or any other method they are familiar with. Once the ReactJS app is integrated, installing Tailwind CSS as a dev dependency is pretty straight forward. The guide provided in the Tailwind CSS documentation is easy to read and quick to understand let’s break down the steps.

Note: NodeJS must have already been installed on your machine for any of these steps to work as we will be using npm (Node Package Manager) to run these commands. For information on how to install node and what it is, visit the NodeJS documentation.

In this guide we will be integrating our ReactJS app using vite.

Step 1: In the terminal of your choice, run the following command

npm create vite@latest my-project — — template react

this will create a ReactJs application named my-project. The name of the project can be changed based on your preference. The command can also be:

npm create vite@latest movie-app — — template react

The terminal will look something like this:

Prompts to follow will be given such as cd my-project that changes the working directory to the my-project that we just initialized. Next, we run npm install to install the node modules folder and npm run dev if you like, to preview the newly installed app in the browser.

Installing Tailwind CSS

Step 2: Install tailwind css in the project to do this we run:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

These will install Tailwind CSS and its dev dependencies then, generate your tailwind.config.js and postcss.config.js files.

The terminal should look something like this:

Step 3: configuring template paths.

To do this we open the project in the IDE and make some changes to the tailwind config file. Tailwind CSS provides a tailwind.config.js file in this file, configuration for the entire project goes in here. The first configuration we’d be doing is making changes to the content array. Upon initialization, the tailwind.config.js file looks like this:

The content section of your tailwind.config.js file is where you configure the paths to all of your HTML templates, JavaScript components, and any other source files that will contain Tailwind class names. As you can see, the content array is currently empty so add the following in the content array

“./index.html”,

“./src/*/.{js,ts,jsx,tsx}”,

The above code means that index.html and all the JS, TS, JSX, and TSX files in the src directory have access to the Tailwind CSS classes and can use them for styling.

Step 4: Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file. These derivatives are:

@tailwind base;

@tailwind components;

@tailwind utilities;

Let's take a look at what each of these means

@tailwind base; — This injects Tailwind’s base styles and any base styles registered by plugins.

@tailwind components; — This injects Tailwind’s component classes and any component classes registered by plugins.

@tailwind utilities; — This injects Tailwind’s utility classes and any utility classes registered by plugins.

And that’s you’re all set! Integrating Tailwind CSS is as simple as can be!

Integrating Tailwind CSS in React Components

As earlier stated, Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes to help in the quick development of responsive and customizable user interface. These classes ae easy to use and very readable lets take a look at some of them.

Colors: Tailwind class for colors come in a pattern starting with what the color is for then moving to the color name and then to a number from 50–950 with the colors getting bolder as the number increases. For example, the class “text-blue-100” will add a light blue color to the text and “bg-gray-700” will give an element a background of a deep gray. This pattern works for all colors except black and white which have just one variation: it’s only text-white or text-black.

Font size and styling: Increase a font size of an element in tailwind is set much like the colors. By using the text and then adding the desired size which ranges from xs to 9xl with xs being extra small which is 14px or 0.875rem and 9xl being the biggest size the text can go which is about 8rem or 128px. Changing the font style is very similar to changing the font size. We start with the font and add your desired style. Example, font-bold, font-serif, font-semibold etc.

Padding and margin: Tailwind CSS has a design system that would help you keep a consistent scale across your designs. All you have to know is the syntax for applying each utility. The utilities for adding padding are:

· p — which denotes padding across the whole element

· pb — which denotes padding-bottom

· pl — which denotes padding-left

· pr — which denotes padding-right

· pt — which denotes padding-top

· py — which denotes padding on the top and bottom

· px — which denotes padding on left and right.

The utilities for margin the same just replace the p in padding with m for margin they are:

· m — which denotes margin on all sides of the element

· mb — which denotes margin-bottom

· ml — which denotes margin-left

· mr — denotes margin-right

· mt — denotes margin-top

· mx — denotes margin on the left and right

· my — denotes margin on the top and bottom.

To apply them though, you’d have to use the appropriate numbers provided by Tailwind CSS. These numbers range from 0 to 96 with zero as 0px and 96 as 384px or 24rem.

Flex: To use flex in Tailwind CSS you just need to add a class of flex and the then the desired flex direction. You can customize the layout by using different Flexbox utility classes provided by Tailwind CSS. For example, justify-between, items-center, flex-col, etc.

Grid: Much like flexbox, you need to use the grid class and the desired grid direction. The layout can be customized by using the different grid utility classes provided by Tailwind CSS.

Responsive design: In Tailwind CSS, responsive classes allow you to apply styles based on the screen size or viewport width. Tailwind uses a mobile-first approach, meaning styles are applied by default and can be overridden at larger screen sizes. Responsive classes are added using a specific syntax which are:

· sm — min-width 640px

· md — min-width 768px

· lg — min-width 1024px

· xl– min-width 1280px

· 2xl — min-width 1536px

The above code is an example of how Tailwind CSS responsive design works the background and font-size changes as the breakpoints changes the background will be slate-500 by default but on small screens it’ll be green-400, on medium screen size blue-600, on large screen size pink-500 and on extra-large screen size yellow-600. This concept can be used in making your web applications responsive.

Customization and Extending Tailwind

Though Tailwind CSS provides us with a wide range of colors and font styles, our project sometimes may require a shade of color now present in the pallet. In cases like this, Tailwind CSS provides us with the option of customizing our own colors. To do this, we go into the tailwind.config.js file and in the extend object we add our custom styles lets take colors for example.

To add colors wed need to create a color object and within that object add the colors we need. It will look something like this

Here, we added the primary, secondary and accent colors. To use these colors in our project however, all we have to do is add the colors to the text or bg utility for text color and background respectively.

These method can also be used for themes, breakpoint, typography, etc.

Best practices and tips for using tailwind CSS.

Now that we have a good understanding of Tailwind CSS and its amazing abilities, here are some tips I have found helpful while using Tailwind

· Begin by using the default configuration and only add customizations as needed.

· Avoid adding too many unnecessary classes upfront.

· Use breakpoints (sm, md, lg, xl) to adjust styles for different screen sizes.

· Resist the temptation to mix Tailwind classes with inline styles. This can make your code harder to read and maintain.

· Establish consistent naming conventions for custom utility classes to maintain clarity. Avoid generic names; choose names that clearly represent the purpose of the utility.

· Stay updated with the Tailwind ecosystem, including new features, plugins, and best practices.

· Use Tailwind extensions in your IDE like Tailwind CSS intellisense these help you get comfortable with the classes

· Always consult the Tailwind CSS documentation and the Tailwind CSS class list

Tailwind and you.

Tailwind CSS is a wonderful tool for building responsive website and web applications it comes with a wide range of utility classes that allow for rapid development by applying pre-defined classes directly in the components. It also provides a consistent and predictable set of utility classes. This consistency makes it easier for developers to maintain a unified design across the entire project.

Tailwind also helps reduces the amount of CSS code you need to manage, leading to cleaner and more maintainable styles.it is easily configurable with the help of the its tailwind.config.js file, which allows you to customize colors, spacing, breakpoints, and more to fit your project’s specific design requirements.

So, what are you waiting for?! dive deep and explore this wonderful tool enjoy its features and create beautiful web interfaces. I can't wait to see what you build next!

Tailwind CSS Core Concepts: Unveiling the Power of Utility Classes

Amarachi Nwokocha — Mon, 17 Mar 2025 12:10:15 +0000

In the world of web development, striking a balance between rapid development and customizable, maintainable styles has always been a challenge. With the beauty of styling and the intricacy of functionality hanging in the balance, web developers often find themselves in a wild goose chase. Enter Tailwind CSS, a utility-first CSS framework that revolutionizes the way developers approach styling. In this article, we’ll delve into the essence of Tailwind CSS, exploring its core concepts, utility-first approach, configurations, responsive design, and overall philosophy.

Understanding Tailwind CSS

While traditional CSS frameworks often provide pre-built components with predefined styles, Tailwind takes a different route by emphasizing utility classes. It does this through a vast array of small, single-purpose classes that you can combine to create custom designs. For instance, instead of having a pre-made button class, you can craft a button using Tailwind’s utility classes for text color, padding, and border.

Lets take a look at Tailwind CSS core concepts which are: Utility Classes, Configurations, and Responsive Design

1. Utility-First Workflow
Tailwind CSS utility classes are small classes designed to target one specifit CSS properties and apply styling of the said properties. This promotes a more focused and efficient development process. Some examples of these classes are

.bg-red-500: Sets the background color to a specific shade of red.
.p-4: Provides padding of size 4.
.text-lg: Defines a larger text size.
These classes allow developers to quickly prototype and iterate designs without writing custom CSS. enabling a more streamlined and efficient workflow.

2. Configurations for Customization

Tailwind CSS’s tailwind.config.js file serves as a central hub for customization. Developers can modify default settings, define custom color palettes, adjust spacing, typography, breakpoints for responsive design, and more. This configuration empowers teams to maintain consistency across projects while tailoring styles to specific brand guidelines or design systems.

3. Responsive Design Support

Responsive design is a part of web development cannot be overlooked and Tailwind CSS provides a comprehensive set of responsive utility classes. These classes enable the creation of designs that adapt seamlessly across various screen sizes and devices. For instance:

.sm:text-lg: Applies a larger text size on small screens.
.md:grid-cols-2: Sets a two-column grid layout on medium-sized screens.
.lg:grid-cols-4: sets a four column grid layout on large screen sizes.
It is also important to note that Tailwind CSS follows a mobile first responsive design system. So using

.text-sm sm:text-md md:text-lg lg:text-xl

will set a text to small font size as its default font size, medium font size for smaller screens, large font size for medium screen and extra large for larger screen sizes.

Using Tailwind in your project

Tailwind css Is easy to install and use there are various ways of using installing tailwind CSS in your project as found in the documentation here.

Tailwind Css provides the option of using a play CDN, or to run Tailwind CSS from scratch with the Tailwind CLI tool. Do note that to do this it is pertinent to have NodeJs installed in your machine.

The full guide for installing Tailwind CSS in your project can be found here and to the guide for using the CDN can be found here.

If you’re working with a framework like React or Vue, you might need additional setup to integrate Tailwind CSS effectively into your components. This can involve importing your CSS file, setting up webpack, or integrating Tailwind-specific plugins/extensions a guide to doing so can be found here.

Embracing Tailwind CSS

In summary, Tailwind’s utility-first approach contributes to the modularity and maintainability of code. Each utility class represents a specific style, making it easier to locate, modify, or remove styles as needed. Its configurable and customizable feature allows developers to define custom color palettes, adjust spacing, typography, breakpoints for responsive design, and more. This configuration empowers teams to maintain consistency across projects while tailoring styles to specific brand guidelines or design systems.

Understanding useContext in React

Amarachi Nwokocha — Thu, 27 Feb 2025 15:37:27 +0000

Passing down data in React components has been one of the major challenges faced by React developers since the introduction of functional components. Every component needs to use data, either wholly or in parts. While useState has been our go-to for holding data locally, its limitations make it difficult to pass down data efficiently. In the past, we relied on props, leading to issues like prop drilling and cumbersome state management, making components error-prone and harder to maintain. This is where useContext comes in.

In this article, we will discuss:

What is useContext?
How to set up Context in React
How to use useContext in components
When to use useContext
Common mistakes and best practices

On that note, let's dive into it!

What is `useContext`?

Simply put, useContext is a way of sharing data across a React application without having to pass it manually through props. It works with React.createContext to pass down data to components.

Imagine we have a large farm, which undoubtedly leads to a large storehouse. This storehouse has a farmhand who keeps track of the tools and delivers them where needed. React Context is the storehouse that holds all the data or “tools,” and useContext is our trusted farmhand that fetches these tools from storage and delivers them where needed.

useContext was introduced in React version 16.8. It leverages the Context API, which allows a user to store data in a global state. How does it do this? React.createContext is used to create a Context object (which includes Provider and Consumer components), and useContext is a hook that allows you to consume the context value from React.createContext. It is important to note that the useContext hook can only be used in functional components.

How to Set Up Context in a React Project

Setting up Context in a React application is straightforward. Follow these steps:

Create a context file.
Create the context using the React Context API.
Provide the context value.
Wrap the app in the provider.
Consume the context in the child component.

See? Very easy! Now, let's put these steps into code.

Step 1: Create a Context File

Some developers prefer to create a context folder and store all context files inside it. This is especially useful when dealing with multiple contexts in a project.

Step 2: Create the Context using the React Context API

import React, { createContext, useContext, useState } from "react";
const DataContext = createContext();

Above, we are:

Importing useState (to locally hold the data).
Using createContext to create the context.
Importing useContext so we can send the data to the components.

Step 3: Provide the Context Value

In our project, the context value will be data fetched from an API and passed down to components. This ensures that all components have access to the fetched data.

export const DataProvider = ({ children }) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  return (
    <DataContext.Provider value={{ data, loading, error }}>
      {children}
    </DataContext.Provider>
  );
};

// Custom hook to use the DataContext
export const useData = () => useContext(DataContext);

Above, we:

Created the DataProvider component, which accepts children as an argument.
Initialized the data, loading, and error states.
Used DataContext.Provider to wrap the children, providing data to all components in the tree.
Created a useData hook to make accessing context data easier.

Now, let's fetch our data using useEffect:

useEffect(() => {
  setLoading(true);
  axios
    .get("https://jsonplaceholder.typicode.com/users")
    .then((response) => {
      setData(response.data);
      setLoading(false);
    })
    .catch((error) => {
      setError(error);
      setLoading(false);
      console.log(error);
    });
}, []);

Step 4: Wrap the App in the Provider

To ensure our data is accessible to all components, we wrap our App component with DataProvider:

const App = () => {
  return (
    <DataProvider>
      <Components />
    </DataProvider>
  );
};

export default App;

Step 5: Consume the Context in the Child Component

import DataContext from "../context/DataContext";
import { useContext } from "react";

const { data, error, loading } = useContext(DataContext);

Now, all values (data, error, loading) can be used in any component!

When to Use `useContext`

There are various scenarios where useContext is useful:

Avoiding Prop Drilling – When sharing data across multiple levels of components, useContext can provide direct access to the data without passing props manually.
Managing Theme or UI Preferences – For apps with cross-functional UI preferences such as light/dark mode, useContext is a great way to manage state globally.
Centralizing API Data or Configurations – When API data needs to be used across various components, useContext is an efficient way to share this globally.
Simplifying Component Composition – When multiple components use the same logic or shared values (e.g., modals, notifications, form steps), useContext provides a cleaner way to manage them.

Common Mistakes and Best Practices When Using `useContext`

Using Context for Everything – Overusing useContext when props would be a better choice. Instead, use useContext for truly shared or global state.
Using useContext in a Component Not Wrapped in a Provider – Ensure all components that consume context are wrapped in <Context.Provider>.
Using Multiple Contexts Inefficiently – Avoid deeply nesting multiple contexts. Instead, use a custom provider component to combine them efficiently.

Conclusion

In this article, we covered:

The concept and importance of useContext in React.
How to set up and use useContext effectively.
Common pitfalls to avoid and best practices to follow.

useContext is a powerful tool that simplifies state management in React applications. It eliminates unnecessary prop drilling and makes components cleaner and more maintainable. However, it's essential to use it wisely and only when necessary.

To learn more, check out the official React documentation on Context.

Happy coding! 🚀

React Projects and State management

Amarachi Nwokocha — Thu, 16 Jan 2025 11:01:09 +0000

The core function of every application is its ability to manage, store, and manipulate data created within it or received from an external source.

This data can be in the form of variables, objects, Booleans, etc. It can be of any data type supported by the language used. This data has to be stored, modified, and used in whatever way the application needs it.

React, a JavaScript framework well known for its component-based structure works with all datatypes supported by JavaScript.

One of the core features that makes React powerful and flexible is its ability to manage state within components.

The useState hook, introduced in React 16.8, is a fundamental tool for managing state in functional components.

This article will discuss :

What is useState hook?
How is it used in an application?
Best practices for using it
Benefits of using useState hook in your application

What is useState hook?

**
State in react is an object that contains real-time data used by the application.

It is a built-in React object that is used to contain data or information about the component. A component’s state can change over time; whenever it changes, the component re-renders.

The useState hook is a powerful addition to React, introduced in version 16.8. It allows the management of state within functional components without the need for class-based components.

It is important to note that one use of useState() can only be used to declare one state variable.

How to use usestate hook in React syntax

**
To use the usestate hook, it has to be imported at the top level of your application.

import {useState } from "react"

The usestate hook takes on an initial state and returns two values.

The first value contains the state and the second value is a function that updates the state the value set to the state will be taken as its initial value.

This is done by calling the usestate hook and passing the initial value you want to assign to that variable.

const [apple, setApple] = useState(0)

In the example, apple is the state setApple is the function that updates apple and 0 is apple’s initial value.

How to Update state using React useState

To update the value set by a state, the second value in the useState array will be called and the updated value will be passed into it’ll look like this:

setApple(1)

Now the value of apple will be equal to the value of whatever is put inside the bracket, in our case apple is set to 1.

Best practices for usestate in react

**
While there are various tips on how best to use the usestate hook, adhering to the following tips helps you have clean reusable code.

Declare the variable with “const”, it can’t be let or var
Always have a default value while initializing even if it is zero this makes it readable and also avoids runtime issues.
To prevent unnecessary re-renders, avoid unnecessary state
Use multiple state variables for multiple pieces of state.

Writing cleaner and more readable code that works is the goal of every developer, useState offers a clean way to handle data in an application to update the said data.

This powerful hook can be used in various circumstances try it out in your next project and explore what it has to offer.

Stuck on using a concept, feel free to reach out or drop a comment below I look forward to hearing from you.

Happy coding!