tailwind - freeCodeCamp.org

How to Use Flex in Tailwind CSS and Justify Flex Items

Ajay Patel — Wed, 11 Mar 2026 16:24:59 +0000

Hey there! If you're building modern web interfaces, chances are you've already fallen in love with Tailwind CSS for its speed and flexibility.

One of the most powerful tools in Tailwind's arsenal is its set of Flexbox utilities. Flexbox lets you create dynamic, responsive layouts without writing custom CSS, and Tailwind makes it incredibly intuitive with simple class names.

In this tutorial, we'll walk through everything you need to know about using Flexbox in Tailwind, from the basics to advanced patterns. Whether you're a beginner or looking to level up your layouts, by the end, you'll feel confident building anything from card grids to complex dashboards.

Prerequisites
What is Flexbox?
How Tailwind CSS Makes Flexbox Easy to Use
How to use flex in Tailwind
Flex Item Sizing: Basis, Grow & Shrink
Controlling Flex Direction
Fine-Tuning Flexbox Layout
How to Justify and Align Flex Items in Tailwind
Practice Flexbox with Interactive Games
Conclusion:

Prerequisites

Before diving into Flexbox with Tailwind CSS, it helps to have a few basics in place so you can follow along comfortably.

Basic Knowledge:

A foundational understanding of HTML (how elements and containers work).
Basic familiarity with CSS (especially properties like display, width, and height).
A general idea of how responsive design works (helpful but not required).

You do not need to be a Flexbox expert, as we’ll cover the important concepts as we go.

Tools You’ll Need:

A code editor like VS Code (or any editor you prefer)
A browser for testing layouts
A project with Tailwind CSS installed

What is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout model designed to make it easier to design flexible, responsive layouts without using floats or complicated positioning tricks.

Before Flexbox, aligning elements vertically, spacing items evenly, or making layouts adapt to different screen sizes was often frustrating and required hacks. Flexbox solves these problems by providing a simple and predictable way to control alignment, spacing, and ordering of elements inside a container.

The main concept is simple:

You have a flex container
Inside it are flex items
The container controls how its items are laid out

Once an element is set to display: flex, its children automatically become flex items.

.container {
  display: flex;
}

How Tailwind CSS Makes Flexbox Easy to Use

Flexbox is powerful, but writing custom CSS for every layout can become repetitive and time-consuming. Tailwind CSS simplifies this by providing utility classes that map directly to Flexbox properties, allowing developers to build layouts quickly without writing custom CSS.

Instead of switching between HTML and CSS files, Tailwind lets you apply Flexbox behavior directly in your markup, making layouts more readable and faster to develop. It turns Flexbox's sometimes verbose properties into short, memorable utilities. No more remembering justify-content: space-between; just write justify-between.

Benefits:

Responsive by default (add md:, lg:, and so on)
Composable (combine classes freely).
No custom CSS needed for most cases.

How to Use Flex in Tailwind

Flexbox is one of the most powerful layout systems in modern CSS, and Tailwind CSS makes it extremely approachable by exposing Flexbox behavior through simple utility classes. Instead of writing custom CSS, you compose layouts directly in your HTML using predefined classes.

flex: The flex Class is the foundation of Flexbox in Tailwind.
flex-1: Allows the element to grow and shrink and forces it to take up the remaining available space.
flex-auto: It makes an item flexible while respecting its content size – that is, it only grows and shrinks as needed.
flex-none: Disables growing and shrinking for an item.

Here is a basic example that shows where to place these classes:



  
  Item 1
  Item 2
  Item 3

Flex Item Sizing: Basis, Grow, & Shrink

Three fundamental properties control how elements size themselves inside a flex container:

flex-basis
flex-grow
flex-shrink

Rather than thinking in fixed widths and heights, Flexbox uses a dynamic space-distribution model. Each flex item starts with an initial size, then grows or shrinks depending on the available space and the rules defined by these three properties.

flex-basis

flex-basis controls the initial size of a flex item before flex-grow or flex-shrink kick in. Think of it as the item’s starting width or height (depending on flex direction).


	01
  02

Here's what this makes:

flex-basis's most used utility classes are:

basis-auto: This means the item’s initial size is based on its content size or any explicitly defined width/height. It doesn't force a specific starting size. Instead, it respects intrinsic sizing.
basis-0: This makes the item start at 0 width (or height in column layouts) before space is distributed. It’s commonly used with grow to evenly distribute space regardless of content size.
basis-full: The item initially takes up the entire width (or height) of the container before shrinking or wrapping.
basis-xs/md/lg/xl..: Built-in values.
basis-: Giving a value with a dynamic such as 1/2, 4/5, and so on.
basis-: Uses Tailwind’s spacing scale (in rem units).
basis-[]: Syntax to set the basis based on a completely custom value.

flex-grow

flex-grow controls how much a flex item expands to fill extra space in the flex container. It determines how leftover space is distributed among flex items after their initial sizes.


	01
  02
  03

Here's what this creates:

flex-grow's most used utility classes are:

grow: The item will grow to take up available extra space. If multiple items use grow, they share space equally (unless different grow values are specified)..
grow-0: The item will not expand beyond its initial size, even if extra space is available.
grow-: If one item has grow-2 and another has grow-1, the first item gets twice as much extra space as the second.
grow-[]: Allows a custom grow value (e.g. grow-[3]).

flex-shrink

flex-shrink controls how much a flex item shrinks when there isn’t enough space in the flex container. It determines how items reduce their size relative to each other when the container overflows.


	01
  02
  03

Here's what this creates:

flex-shrink's most used utility classes are:

shrink: The item is allowed to shrink when necessary to prevent overflow.
shrink-0: The item will not shrink, even if space becomes limited. This may cause overflow if other items cannot compensate.
shrink-: Sets proportional shrinking behavior. An item with shrink-2 will shrink twice as much as one with shrink-1.
shrink-[]: Syntax to set a completely custom shrink value.

Controlling Flex Direction

In Tailwind CSS, the direction in which flex items are laid out is controlled using flex-direction utilities. These utilities define whether items are placed horizontally or vertically, and in which order.

flex-row

flex-row is the default flex direction in both CSS Flexbox and Tailwind. When it is applied, flex items are laid out horizontally along the main axis, starting from left to right (in left-to-right languages).


  01
  02
  03

This outputs:

Use case: Navigation bars, horizontal button groups, toolbars.

flex-row-reverse

The flex-row-reverse utility lays out flex items horizontally, but in the opposite direction from right to left. While the visual order of items is reversed, the HTML source order remains unchanged, which is important for accessibility and screen readers.


  01
  02
  03

Output:

Use case: Forms, cards, sidebars, vertical menus.

flex-col

The flex-col utility changes the flex direction to vertical, stacking items from top to bottom. In this case, the main axis runs vertically.


  01
  02
  03

Output:

Use case: Forms, cards, sidebars, vertical menus.

flex-col-reverse

In flex-col-reverse, items are stacked vertically, but in reverse order, starting from bottom to top (that is, vertically reverse order).


  01
  02
  03

Here's the output:

Use case: Chat messages, timelines, or when newer content should appear at the bottom.

Now you know a bit about managing flex-directions using tailwind utility classes. You can mange the stack depending on your needs.

Responsive Control

Tailwind also allows you to change flex direction at different breakpoints so you’ll get a clean layout across different devices.


	.....

This stacks items vertically on small screens and switches to a horizontal layout on medium screens and above.

Fine-Tuning Flexbox Layout

Once a container is set to use Flexbox, the real power comes from controlling how flex items behave inside it. This is where properties like wrap, order, and gap become essential. These features determine how items flow, how they're visually arranged, and how much space exists between them.

In real-world layouts such as card grids, navigation menus, and dashboards, elements rarely fit perfectly in a single row or follow a fixed order across all screen sizes. Flexbox provides solutions to these challenges, and Tailwind CSS exposes them through simple, intuitive utility classes.

Wrap helps manage what happens when items exceed the available space
Order allows you to rearrange elements visually without changing the HTML structure
Gap controls spacing between items in a clean and predictable way

Let’s dive into the depths of these fine-tuning flexbox properties.

flex-wrap

By default, Flexbox tries to fit all items into one line. If there isn’t enough space, items will shrink to squeeze in. flex-wrap allows flex-items to move onto the next line instead of shrinking.


	01
	02
	03

Utility classes:

flex-nowrap: (default) All items stay on one line.
flex-wrap: Items wrap onto multiple lines.
flex-wrap-reverse: Items wrap, but in reverse order.

flex-order

flex-order controls the visual order of the stack/flex-items without changing the HTML structure. Each item has an order value. Items with lower order values appear first.


	01
	02
	03

Utility classes:

order-1 to order-12: Sets order value.
order-first: Moves item to the start.
order-last: Moves item to the end.
order-none: Default order (0).

gap

gap controls the space between flex items, both rows and columns, without using margins. You can also apply for axis, which will help in giving space in both horizontal and vertical directions.

Here's an example of using it with a horizontal layout:


	01
	02
	03

And here's an example showing a vertical layout:


	01
	02
	03

Utility classes:

gap-: Applies space (x-axis by default) between items according to the number, as shown in the example.
gap-[]: You can apply a custom gap inside square brackets, such as gap-[10px].
gap-x-: Provides horizontal spacing only.
gap-y-: Provides vertical spacing only.

Responsive Design

You can prefix the gap, column-gap, and row-gap utilities with a breakpoint variant, like lg: to only apply the utility at larger screen sizes and above. Here's an example:

How to Justify and Align Flex Items in Tailwind

If you're building interactive components like dropdowns, menus, or toolbars using Flexbox, alignment becomes even more important when handling keyboard navigation.

For example, when using arrow keys to navigate horizontally aligned items (justify-between, justify-center, and so on), proper spacing ensures a better user experience. You can explore how Tailwind CSS keyboard navigation works with arrow keys in FlyonUI.

FlyonUI provides accessible Tailwind components that integrate smoothly with Tailwind CSS, especially helpful when building flex-based navigation layouts.

Tailwind CSS offers a wide range of utility classes for aligning and justifying flex items, which can sometimes be confusing to differentiate. Below is a concise overview of these classes, along with practical examples.

justify-content

justify-content is a flexbox property that controls how flex items are aligned along the main axis of a flex container. It decides how items are spaced inside a flex container. It is applied along with class flex.

Here's an example:


	01
	02
	03

Utility classes:

justify-start: Aligns items at the start of the container.
justify-center: Centers items along the main axis.
justify-end: Aligns items at the end of the container.
justify-between: Adds space between items, pushing first and last items to the edges.
justify-around: Adds equal space around each item.
justify-evenly: Distributes items with equal spacing everywhere, including edges.

Align Items

align-items is a flexbox property that controls how flex items are aligned along the cross-axis of a flex container.

In a row-based flex container (flex-row, which is the default direction), the cross axis is vertical. That means align-items controls vertical alignment.

In a column-based container (flex-col), the cross axis becomes horizontal, so align-items controls horizontal alignment instead.

This property is applied alongside the flex class and is commonly used to align items consistently inside navigation bars, toolbars, cards, and forms.


	01
	02
	03

Utility classes:

items-start: Aligns items to the start of the cross-axis (top in a row).
items-center: Centers items vertically along the cross-axis.
items-end: Aligns items to the end of the cross axis (bottom in a row).
items-baseline: Aligns items based on their text baseline.
items-stretch: Stretches items to fill the container (default behavior).

Practice Flexbox with Interactive Games

Reading documentation is important, but Flexbox really clicks when you practice it visually. One of the best ways to build strong Flexbox intuition is through interactive games that let you experiment with alignment, spacing, and direction in real time.

Here are two excellent games that will strengthen your Flexbox fundamentals and make Tailwind’s flex utilities feel second nature:

Flexbox Froggy

🔗 https://flexboxfroggy.com/

Flexbox Froggy is a fun and beginner-friendly game where you help frogs reach their lily pads using Flexbox properties. Each level introduces a new concept, like justify-content, align-items, flex-direction, and flex-wrap.

Why it’s great:

Perfect for beginners
Visual feedback makes concepts easy to grasp
Covers core Flexbox properties step by step

If you’re new to Flexbox, this is one of the best places to start.

Flexbox Adventure (Coding Fantasy)

🔗 https://codingfantasy.com/games/flexboxadventure

Flexbox Adventure turns Flexbox learning into a role-playing game where you move your character by writing Flexbox rules. It focuses more on real-world layout thinking and helps reinforce how different properties work together.

Why it’s great:

More challenging than Flexbox Froggy
Helps solidify intermediate concepts
Encourages problem-solving with Flexbox logic

This is a great follow-up once you’re comfortable with the basics.

Conclusion

Flexbox is a core part of modern CSS layouts, and Tailwind CSS makes it even more powerful by turning Flexbox properties into simple, readable utility classes. By understanding utilities for direction, sizing, wrapping, spacing, ordering, and alignment, you can build responsive and flexible layouts without writing custom CSS.

And by understanding how properties like flex, grow, shrink, basis, justify-*, items-*, gap, when responsive variants work together, you can build layouts that are not only flexible and responsive but also maintainable and scalable.

Instead of wrestling with custom CSS, Tailwind allows you to express layout intent directly in your markup, keeping your workflow fast and predictable.

With these Flexbox fundamentals in your toolkit, you’re well-equipped to design clean, responsive interfaces using Tailwind CSS with confidence. 🚀

How to Integrate Tailwind with Django – With Code Examples

Abhijeet Dave — Tue, 05 Nov 2024 13:52:23 +0000

In modern web development, choosing the right technology is crucial because it impacts both the process and outcome of your projects. Using Django as a backend framework and Tailwind CSS as a utility-first CSS framework offers an efficient way to create responsive and visually appealing web applications.

This article will explain why Django and Tailwind CSS work well together, how to start a Django project, how to easily add Tailwind CSS, and how to speed up your development with Prettier for better class formatting.

A Quick Overview of Django
What is Tailwind CSS?
Why Django and Tailwind Work So Well Together?
How to Initialize a Django Project?
How to Integrate Tailwind CSS with Django?
Let’s Create a Chat Bubble app.
How to Use Prettier for Class Formatting?
How to Create a Chat Bubble Using FlyonUI Tailwind Components and Django
Conclusion

A Quick Overview of Django

Django is an open-source, full-featured Python web framework that follows the batteries-included approach. Django aims at making the development of complex, database-driven websites as fast and easy as possible by providing a lot of built-in functionalities like ORM, authentication system, admin panel, and many more. Django enables rapid development by focusing on writing the app's unique parts rather than wasting time writing a lot of boilerplate code.

The reason for its popularity is that it follows the MVT design pattern which keeps data models, views, and templates well separated. In Django, security is paramount: it guards against SQL injection, cross-site scripting, and cross-site request forgery out of the box. Django scales well and is flexible – it is fit for both small projects and large, complex web applications, and that is why it is used by major sites such as Instagram and Pinterest.

What is Tailwind CSS?

It is a well-known fact that Tailwind CSS is a utility-first CSS framework. It lets you style elements directly within your HTML, thanks to pre-defined classes. Unlike other CSS frameworks that offer pre-built components, Tailwind offers these low-level utility classes that let you create your own design system. Thus, this makes crafting unique responsive designs effortless as there is not much to do with custom CSS.

Why Django and Tailwind Work So Well Together?

The combination of Django and Tailwind CSS offers a seamless way to build robust, full-featured applications. Here’s why:

Rapid Development: Django’s backend capabilities allow developers to create powerful applications quickly, while Tailwind CSS helps streamline the styling process with its utility-first approach.
Customizable Design: With Tailwind, you’re not confined to predefined styles. You can craft a unique, consistent design that scales easily as your project grows.
Separation of Concerns: Django’s templating system works hand-in-hand with Tailwind CSS, ensuring a clear separation between the backend logic and frontend styling.

How to Initialize a Django Project?

Install Django: Install Django using pip:
```
 pip install django
```
Create a Django Project: Use the Django admin command to create a new project:
```
 django-admin startproject myproject
```
Navigate to Your Project Directory:
```
 cd myproject
```
Modify settings.py:
- In the TEMPLATES setting, add a templates directory:
```
  "DIRS": [BASE_DIR / "templates"],
```
- Add a static directory for your static files:
```
  STATICFILES_DIRS = [BASE_DIR / "static"]
```

How to Integrate Tailwind CSS with Django?

Install Tailwind CSS: Make sure Node.js is installed, then run:
```
 npm install -D tailwindcss
 npx tailwindcss init
```
Set Up Tailwind CSS: In your static/css directory, create a main.css file with the following content:
```
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
```

Modify tailwind.config.js: Adjust the content section to include templates/*.html files, ensuring Tailwind CSS generates the necessary styles.

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

Add a Build Script: Update your package.json to include a build script:

 "scripts": {  "watch:css": "tailwindcss build static/css/main.css -o static/output.css -w"}

Compile Tailwind CSS:
```
 npm run watch:css
```

Let’s Create a Chat Bubble app.

Create a Django App:
```
 django-admin startapp chat
```

Set Up the Views:

In chat/views.py, create a simple view:

  from django.shortcuts import render
  def chat(request):
      return render(request, "chat.html")

Configure URLs:

In chat/urls.py, define the URL pattern for your view:

  from django.urls import path
  from . import views
  urlpatterns = [
      path("", views.chat, name="chat"),
  ]

In the project’s urls.py, include the app URLs:

  from django.urls import include, path
  urlpatterns = [
      path("", include("chat.urls")),
  ]

Set Up the Base HTML Template:

Create a templates/base.html file to serve as the foundation of your application:

  {% load static %}

  html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>My Django App with Tailwindtitle>
      <link rel="stylesheet" href="{% static 'css/output.css' %}" />
    head>

    <body class="h-screen bg-slate-300 dark:bg-slate-400">
      <section class="container mx-auto flex flex-col items-center">
        <h1 class="mb-4 mt-10 text-6xl font-bold text-blue-500 dark:text-blue-200" >
          Chat Bubble
        h1>
        {% block content %} {% endblock %}
      section>
    body>
  html>

Create the Chat Template:
- In templates/chat.html, extend the base template:

    {% extends "base.html" %}

    {% block content %}
    <div class="flex items-start gap-2.5">
        <img class="w-8 h-8 rounded-full" src="" alt="Jhon  image">
        <div class="flex flex-col gap-1 w-full max-w-[320px]">
            <div class="flex items-center space-x-2 rtl:space-x-reverse">
                <span class="text-sm font-semibold text-gray-900 dark:text-white">Jhon Doespan>
                <span class="text-sm font-normal text-gray-500 dark:text-gray-400">11:46span>
            div>
            <div
                class="flex flex-col leading-1.5 p-4 border-gray-200 bg-gray-100 rounded-e-xl rounded-es-xl dark:bg-gray-700">
                <p class="text-sm font-normal text-gray-900 dark:text-white"> That's awesome. I think our users will really
                    appreciate the improvements.p>
            div>
            <span class="text-sm font-normal text-gray-500 dark:text-gray-400">Deliveredspan>
        div>
    div>
    {% endblock %}

Run the Development Server: bash python manage.py runserver

How to Use Prettier for Class Formatting?

To keep your Tailwind CSS classes clean and organized, you can integrate Prettier into your workflow.

Install Prettier and the Tailwind Plugin:

 npm install --save-dev prettier prettier-plugin-tailwindcss

Configure Prettier: Create a .prettierrc file in your project root:
```
 {  "plugins": ["prettier-plugin-tailwindcss"]}
```
Format on Save: Set up your code editor to format files automatically with Prettier on save.

Result:

GitHub Repo: ts-django-tailwindcss

How to Create a Chat Bubble Using FlyonUI Tailwind Components and Django

Here, we’ll use FlyonUI, an open-source Tailwind CSS Components Library. It offers a wide range of customizable, accessible, and ready-to-use components.

Let’s integrate Django with FlyonUI components and create a chat bubble.

Step 1: Install flyonui

Install flyonui via npm.

npm install -D flyonui@latest

Step 2: Configure Tailwind

Add the path to FlyonUI JavaScript files in your tailwind.config.js file.

module.exports = {
  content: ["./node_modules/flyonui/dist/js/*.js"], // Require only if you want to use FlyonUI JS component

  plugins: [
    require("flyonui"),
    require("flyonui/plugin") // Require only if you want to use FlyonUI JS component
  ]
}

Step 3: Copy the FlyonUI JavaScript

Copy FlyonUI's JavaScript (node_modules/flyonui/flyonui.js) files to the static/ folder.

Step 4: Add Js to your base.html

Once you copied the js file to your static folder include it in base.html.

<html lang="en">
 ...
 <body>
  ...
  <script src="{% static 'js/flyonui.js' %}">script>
 body>
html>

Let's Update the Chat bubble code block:

{% extends "base.html" %}
{% block content %}
<div>
  <div class="chat chat-receiver">
    <div class="avatar chat-avatar">
      <div class="size-10 rounded-full">
        <img
          src=""
          alt="avatar"
        />
      div>
    div>
    <div class="chat-header text-base-content/90">
      Obi-Wan Kenobi
      <time class="text-base-content/50">12:45time>
    div>
    <div class="chat-bubble">I started learning guitar today!div>
    <div class="chat-footer text-base-content/50">
      <div>Delivereddiv>
    div>
  div>
  <div class="chat chat-sender">
    <div class="avatar chat-avatar">
      <div class="size-10 rounded-full">
        <img
          src=""
          alt="avatar"
        />
      div>
    div>
    <div class="chat-header text-base-content/90">
      Anakin
      <time class="text-base-content/50">12:46time>
    div>
    <div class="chat-bubble">
      That's awesome! You're going to be great at it!
    div>
    <div class="chat-footer text-base-content/50">
      Seen
      <span class="icon-[tabler--checks] align-bottom text-success">span>
    div>
  div>
div>
{% endblock %}

Result:

Conclusion

Using Tailwind CSS with Django is a great way to make your web applications look good and work well on different devices, while you take advantage of Django's many features. This setup not only boosts productivity but also helps you follow good styling and design practices.

Here's the repository where you can find more details or see the complete code: ts-django-tailwindcss. I hope this tutorial helps you with the Django integration with Tailwind CSS. I have prepared this article with the help of Pruthvi Prajapati, a front-end developer with 2 years of experience.

Happy coding!

How to Build a Counter Button with React, TailwindCSS, and TypeScript

Devin Lane — Wed, 10 Jul 2024 14:41:14 +0000

How can you keep track of the number of times a user clicks a button? How are the hearts on Instagram or the likes on Facebook counted?

In this tutorial, we will build a button that tracks the number of times a button has been clicked. Along the way, you will learn some fundamental concepts in React such as components, JSX, passing props between components, and managing state with hooks. You will also get small introductions to Tailwind and TypeScript.

This tutorial builds upon examples and concepts outlined in the "Learn" section of the React documentation, which you can find here.

Prerequisites

Basic familiarity with JavaScript, such as working with variables, functions, arrays, and objects.
Basic familiarity with CSS and HTML.
Basic familiarity with the command line.
Node installed.
A code editor of your choice (I'll be using Visual Studio Code here)

How to Build the Counter Button
How to Refactor the Project
Two Components with Independent and Shared State
How to Add Both Pairs of Buttons to our Website
How to Deploy the Site to Netlify

Chapter 1: How to Build the Counter Button

What is React?

Before we dive in, let's define React. React is a JavaScript library for creating user interfaces out of pieces called components. Components are JavaScript functions that can receive and display data interactively to your users.

Project setup

We're going to use Next.js for our local React setup.

Within the directory you'd like to store this project, open your terminal and execute the following command:

npx create-next-app@latest

Name your project however you like, and answer the commands as follows:

What is your project named? react-counter-button
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? No
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? No

Now let's cd into our project directory

cd react-counter-button

And run the project in Visual Studio Code:

code .

Note: if you don't have the code command in your PATH, you can press ⇧⌘P (Ctrl+Shift+P on Windows/Linux) and type in 'Shell Command: Install 'code' command in PATH'. Alternatively, you can drag the folder onto the Visual Studio Code icon in MacOS. Or, within Visual Studio Code, you can select File -> Open, and find "react-counter-button", or the name of your project.

In your terminal run:

npm run dev

Open your browser to localhost:3000 and you should see the following page:

Next.js boilerplate

We now have the project up and running. Back over in our code editor, we can begin the work.

Remove boilerplate

In app/page.tsx, let's delete most of the boilerplate code except the two main tags. Then let's add a title for our project in an h1 tag in between the main tags. Our code should look like this:

export default function Home() {
    return (
        <main className="flex min-h-screen flex-col items-center justify-between p-24">
            <h1>React Counter Buttonh1>
        main>
    );
}

Here's what we should now see:

Initial state of our project

Writing our first component

Let's create our first component. A React component is a function that returns markup. Below and outside of the scope of our Home function, let's write the following:

function Button() {
    return <button>I have been clicked X timesbutton>;
}

Here we have a function Button that returns some markup in JSX. JSX looks a lot like HTML, but it can display dynamic content, and has stricter rules than HTML. You can learn more about JSX in the React docs here.

The Button function must be uppercase to be recognized as a valid React component. This contrasts it with an HTML tag, which is lower case.

You'll notice that we still see no change on our webpage – we need to render this component in order to see it on the screen.

We can use our Button component as if it were an HTML tag we created. If we nest the Button component within the Home component, we should see it on the screen:

export default function Home() {
    return (
        <main className="flex min-h-screen flex-col items-center justify-between p-24">
            <h1>React Counter Buttonh1>
            <Button />
        main>
    );
}

function Button() {
    return <button>I have been clicked X timesbutton>;
}

Rendering the Button component (with less than ideal CSS)

Styling our first component with Tailwind

You'll notice the button is on the bottom of the screen. This is because the styles on main include justify-between in the flex-col direction. If we remove justify-between we should see this:

Improving the CSS of the initial state of our application

You can read more about aligning items in a flexbox from MDN here.

You'll also notice that the button is un-styled. This is because Tailwind removes default styling on buttons as a part of their "preflight" styles. If you're curious to see where these styles come from, you can open node_modules/tailwindcss/src/css/preflight.css and check out ~line 193 (permalink on GitHub here):

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

We're not going to change the styles within node_modules – instead we'll add our own styling to the Button component. One of the benefits of Tailwind is that our CSS is co-located with our JavaScript, making quick changes to styles easier than opening a separate stylesheet file.

Let's make the following changes:

export default function Home() {
    return (
        <main className="flex min-h-screen flex-col items-center p-24 gap-4">
            <h1>React Counter Buttonh1>
            <Button />
        main>
    );
}

function Button() {
    return (
        <button className="bg-blue-500 hover:bg-blue-700 rounded text-white font-bold px-4 py-2">
            I have been clicked X times
        button>
    );
}

We've added styles to our button, and we've also added a gap-4 to our main parent flex box to provide a space between the h1 and the button. (You can read more about the CSS property "gap" in the MDN here.) We should now see this:

Viewing our styled Button component

Wait, but what is Tailwind?

Now that we've styled our button component and spaced the items out, let's reflect on what Tailwind is, and what it provided for us. Tailwind is a CSS framework that provides a set of "utility" classes that we can use to style each element.

But what is a utility class? You'll see that to style our button, we added classes such as bg-blue-500 – which corresponds to setting the CSS background-color property to blue, and rounded – which corresponds to border-radius: 0.25rem.

Each class is defined according to its utility: changing the background color, the border radius, and so on. Through adding these utility classes to our elements, we arrive at our desired styles.

Tailwind sits in contrast to other frameworks, such as Bootstrap, that provide predefined classes for elements such as buttons. In Bootstrap, we would add a class of btn to achieve a styled button. And of course, with standard CSS we would likely add a custom class (perhaps called button) to our element and create CSS rulesets in a separate stylesheet.

Returning to our project, so far we've set up a React project using Next.js, created our first React component, and styled our button using Tailwind. How do we introduce the counter functionality?

How to add state

In order to display the number of times a button has been clicked, we need to use an event handler, and we need a way to manage state.

State is component-specific memory. In our example, this is how the button will remember how many times it has been clicked. Using a special React function "hook", we trigger a re-render and retain the data across renders – the [useState](https://react.dev/reference/react/useState) hook is provided by React for this purpose.

At the top of our page.tsx, let's import useState:

import { useState } from "react"

and within our Button component, let's add the following:

function Button() {
  const [count, setCount] = useState(0)
    return (
        <button className="bg-blue-500 hover:bg-blue-700 rounded py-2 px-4 text-white font-bold">
            I have been clicked X times
        button>
    );
}

Let's unpack what we have here:

We're using the destructuring assignment to get the values of count and the function setCount from useState. The convention is to name these two values something and setSomething, though we could name them anything.
The argument to useState is the initial value of our state variable. Here we've set it to 0.
count is our current state.
setCount is the function that updates our state and triggers a re-render.

However, if you click save you'll see the following error in your terminal and in your browser:

You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

   ╭─[/[...your project path]/src/app/page.tsx:1:1]
 1 │ import { useState } from "react";
   ·          ────────
 2 │ 
 3 │ export default function Home() {
 4 │     return (
   ╰────

Maybe one of these should be marked as a client entry with "use client":
  ./src/app/page.tsx

This is due to Next.js's use of React Server Components, which you can learn more about here. React Server Components is a large topic, but the bottom line is that, by default, components are Server Components in Next.js and useState only works in a Client Component. If we write the "use client" directive at the top of our page.tsx, we resolve the error.

How to Evaluate JavaScript within JSX

If we click the button, we still don't see the numbers update. This is because we need a way to interpolate (or evaluate) JavaScript within our JSX markup. Enter the curly braces: {}.

We can use curly braces to "escape" into JavaScript from within JSX markup. This way we can evaluate JavaScript expressions (such as adding to a counter) and dynamically display data in our components. Here's what we'll do:

function MyButton() {
    const [count, setCount] = useState(0);
    return (
        <button className="bg-blue-500 hover:bg-blue-700 rounded py-2 px-4 text-white font-bold">
            I have been clicked {count} times
        button>
    );
}

We have added {count} to evaluate the value of count from useState within our button. We should see the following:

Displaying data in JSX with curly braces {}

We see a 0 – this comes from the count variable that we destructured from our useState hook, which we initially set to 0. We've successfully interpolated the JavaScript within our JSX markup!

Event handling

You'll notice that if we click the button, still nothing happens. How do we get the number to increment when we click it?

For this, we'll make use of an event handler function as well as the setter function (which we named setCount) that we get from useState:

function MyButton() {
    const [count, setCount] = useState(0);

    function handleClick() {
        setCount(count + 1);
    }
    return (
        <button className="bg-blue-500 hover:bg-blue-700 rounded py-2 px-4 text-white font-bold">
            I have been clicked {count} times
        button>
    );
}

What we've done here is add a function handleClick to update the state of the count variable. The convention is to name event handler functions handle followed by the name of your event (for example, handleClick).

[setCount](https://react.dev/reference/react/useState#setstate) is a special set function returned by useState that will update the state of the count variable to whatever we pass in as an argument. For example, we could call setCount(2), and it would update count to 2. setCount(7) would set it to 7, and so on.

We are calling setCount(count + 1), which evaluates to setCount(0 + 1), because the initial value of count is 0. Upon the next click, count will be 1, so we'd be calling setCount(1 + 1), and the next click would call setCount(2 + 1) and so on.

This allows us to update the counter with every click. But, if you click, you'll notice that still nothing happens – why? Perhaps take a moment to try to figure this out for yourself before reading on to help the concept stick even better.

How to Pass an Event Handler as a Prop to Your JSX

Looking at our code, there is no relationship between the user clicking the button, and the handleClick function. We need to pass the handleClick event handler to the onClick property on the button! Let's add that here:

function MyButton() {
    const [count, setCount] = useState(0);

    function handleClick() {
        setCount(count + 1);
    }
    return (
        <button
            onClick={handleClick}
            className="bg-blue-500 hover:bg-blue-700 rounded py-2 px-4 text-white font-bold"
        >
            I have been clicked {count} times
        button>
    );
}

Notice how we haven't said onClick={handleClick()}. We aren't calling the function ourselves here – we are instead passing it down. This is an important distinction, as React calls the function for us when the user clicks the button, instead of it firing immediately.

You can learn more about passing props to components in the React docs here.

Our working project

Try it out now, the button works!

You now have a button that updates its count when you click it. This shows usage of interpolating JavaScript within JSX using curly braces, creating your own component and nesting it within other components, using state and hooks within React, as well as working with Next.js and Tailwind. Congratulations!

Our working project

Here would be a good point to commit our changes using Git. You can close the current terminal process by pressing ctrl + c, and then type in git add ., followed by git commit -m "counter button" or some other message that is meaningful.

Chapter 2: How to Refactor the Project

Moving our component to another file

As our project sits, all the code is within app/page.tsx. What if we wanted to add another component, or several? Over time, our page.tsx would get large and difficult to read.

Instead, we can break our components up into their own files to help with readability as well as modularity (reusing the component in multiple different places).

Let's start by creating a folder components at the root of our project to store our components. Inside components, create a file called button.tsx. Then, within app/page.tsx cut (copy and then delete) the entire Button function component and paste it within components/button.tsx.

components/button.tsx should look like this:

function Button() {
    const [count, setCount] = useState(0);

    function handleClick() {
        setCount(count + 1);
    }
    return (
        <button
            onClick={handleClick}
            className="bg-blue-500 hover:bg-blue-700 rounded text-white font-bold px-4 py-2"
        >
            I have been clicked {count} times
        button>
    );
}

Fix the `useState` import error

You'll likely notice in your code editor that useState(0) has red squiggly lines underneath it. In Visual Studio Code, if you hover over it, you will see an error that says:

Error: cannot find name 'useState'

Why is this? We are using useState but we have not imported the module from React. Adding import { useState } from "react"; to the top of our button.tsx file will fix this error.

If you look at the beginning of the function, you'll see that Button() is underlined with white lines in Visual Studio Code. Hovering over it will show this error. Reflect on why this might be the case – we'll address this later.

Error: 'Button' is declared but its value is never read

Importing and Exporting Components

Let's return to app/page.tsx . You'll see two errors here: one on import { useState } from "react"; and another on

Why wouldn't Button be defined? The issue is that within our app/page.tsx we have no way to access the Button component over in components/button.tsx. We solve this by exporting and importing the appropriate module.

Within components/button.tsx, at the beginning of our function declaration, let's add the keywords export default. The file will look like this now:

You'll notice that our earlier error of 'Button' is declared but its value is never read has gone away, because now the value is being read as a default export.

But what have we done here? What is an export, or a default export? Exporting and importing allows us to modularize JavaScript components into their own sections and use them in others.

There are two types: default exports, and named exports. Each file can have multiple named exports but only one default export. You can read more about importing and exporting components the React documentation here.

Now that we have exported the component from components/button.tsx, we have to import it within app/page.tsx. Visual Studio Code can help with "intellisense" suggestions: at the top of your file if you start typing "Button", it will suggest the correct import with the correct filepath:

Within Next.js we can use this @/ syntax to reference the root of the project. This is a convenience added in case our import is several file layers deep. You can read the examples of the @/ syntax in the Next.js documentation here.

You'll see that our errors have disappeared and the project still works! We haven't added any new features but we have successfully refactored our code to make it more modular, readable, and maintainable.

Here let's follow the same steps to commit our changes, adding a message such as refactor: move button to its own file.

Chapter 3: Two Components with Independent and Shared State

Two Components with Independent State

What if we wanted to have two buttons that can count independently of each other? This will showcase the beauty of React and component-based development implementation will be simpler than building the button from scratch entirely again.

What is Material Tailwind?

Material Tailwind is a components library for Tailwind CSS that implements Google's Material Design guidelines. It combines the best of both worlds: the utility-first approach of Tailwind and the design philosophy of Material Design.

Example: Imagine you want a Material Design inspired button. With Material Tailwind, it's straightforward.

If you are a React fan too, let me tell you that Material Tailwind also comes with Tailwind CSS + React components. For more details, check out the Material Tailwind React documentation.

Now let’s see how you can use these two amazing tools to create your desired Login Page.

2. How to Set Up Your Development Environment

Creating a development environment tailored for your web project ensures smooth and efficient workflow. For our Tailwind CSS login page, we’ll start from scratch.

Install Node.js and npm

After installation, verify that Node.js and npm are correctly installed by running the following commands:

Set up a new project

Text Editor/IDE Setup (VS Code)

If you haven’t already, download and install VS Code. Then go ahead and open your project directory in VS Code.

Terminal in VS Code

VS Code offers an integrated terminal. This means you can run commands directly within your editor.

Basic Project Structure

This creates a src directory with an HTML file, a CSS file, and a JavaScript file.

3. How to Install Necessary Dependencies for your Login Page

Setting up your libraries and frameworks is crucial to build upon a solid foundation. For our Tailwind CSS login page, we'll be primarily using Tailwind CSS and Material Tailwind.

How to install Tailwind CSS

First, you'll need to install the Tailwind CSS package. Using npm, install the Tailwind CSS package with:

Then, integrate Tailwind into your CSS. Inside your src/styles.css file, add the following Tailwind directives:

Next, you'll need to generate a configuration file. While Tailwind works out of the box, a configuration file (tailwind.config.js) provides customization capabilities.

This creates a minimal config file in your root directory. You can extend this file as needed.

Finally, to process your CSS and apply Tailwind’s transformations, add a script in your package.json under the "scripts" section:

This will generate an output.css containing all Tailwind's styles. Include this file in your HTML.

How to install Material Tailwind

Now you need to integrate it into your project. Material Tailwind provides components with styles applied. You can use them directly in your HTML or customize them further in your CSS.

Next, install the required fonts and icons. Material Design recommends specific fonts and icons. Include these in your src/index.html:

PostCSS and Autoprefixer (Recommended)

Go ahead and configure them by creating a postcss.config.js in your root directory:

This ensures your Tailwind CSS styles are vendor-prefixed, making them compatible across different browsers.

4. How to Design the Login Page Layout with Tailwind CSS

A login page typically consists of a logo or branding, input fields (like username and password), a submit button, and often some secondary options or links, such as "Forgot Password" or "Sign Up".

Main Container:

Start with a main container that centers its content both vertically and horizontally.

Create a centered card layout that will house the login form. Introduce the necessary input fields for the login process, typically an email/username and password.

Secondary Options:

5. How to Integrate Material Tailwind Components

Material Design, initiated by Google, is a design system that combines classic principles of good design with innovative technologies. When fused with the utility-first approach of Tailwind CSS via Material Tailwind, it provides a powerful toolkit to create interactive and visually appealing user interfaces.

Material Tailwind provides styled components that adhere to Material Design guidelines but harness the utility of Tailwind. This means that while most of the styling is pre-configured, you can still utilize Tailwind classes for customization.

Instead of the standard Tailwind-styled inputs, you can introduce Material-styled input fields for a more tactile and animated experience:

These components offer a floating label effect and subtle focus animations out of the box.

Material Tailwind offers a set of button styles that fit within the Material Design paradigm:

When users hover over the element, they'll see a tooltip providing additional information.

Material Design also has a rich set of icons. Material Tailwind makes it easy to incorporate these:

Make sure you've already linked to Material icons in your HTML as instructed earlier.

While Material Tailwind components come pre-styled, you can still leverage Tailwind utility classes for customizations:

Here, we've overridden the default primary color with a custom shade of purple from Tailwind's color palette.

Incorporating Material Tailwind components provides an elegant touch to the login page, combining the efficiency of Tailwind CSS with the visual and interactive richness of Material Design. The result is a responsive, user-friendly, and visually cohesive login experience.

6. How to Style Input Fields and Buttons

The appearance and feel of input fields and buttons play a pivotal role in user experience. They're the primary interaction points. Let's focus on giving them a sleek, user-friendly design using Material Tailwind and Tailwind CSS.

Material Tailwind offers a more polished look for input fields out of the box. Here's how you can integrate them:

These fields come with improved focus effects and an overall refined look, making them more engaging.

The email field now includes a mail icon on the left, giving users a clear indication of the input type.

Material Tailwind buttons come pre-styled with Material aesthetics. However, you can further customize their appearance with Tailwind utility classes:

In this example, the button has a primary blue background color with different shades on hover and active states.

Remember to consider different device sizes. Tailwind's responsive utilities can help:

This input field takes the full width on smaller screens, but only half the width on larger ones.

7. How to Implement Responsive Design

A significant strength of Tailwind CSS lies in its mobile-first approach to responsive design. Ensuring your login page looks good and functions well on all devices is crucial for user experience.

Tailwind CSS is built with a mobile-first mindset. This means that by default, the classes you apply are for mobile views. To target larger screens, you utilize breakpoints. For instance:

On mobile, the text size would be sm, on medium-sized screens (like tablets) it would be base, and on large screens (like desktops) it would be xl.

Here, we're using less padding (p-4) and taking full width (w-full) on mobile, but increasing the padding (md:p-8) and setting a fixed width (md:w-96) on medium screens and above.

On mobile, the input fields and buttons take up the full width for easier touch access but adapt to more spacious designs on larger screens.

In landscape mode, the top margin is reduced to accommodate the shorter viewport height.

On mobile, the title is slightly smaller, but it scales up on medium and larger screens.

8. How to Add Interactivity and Validation

A successful login page isn't just about looks – it must provide feedback, handle user input gracefully, and validate that input to ensure security and functionality.

Material Tailwind components come with built-in animations and feedback mechanisms. For instance, when you click a Material Tailwind button, you'll see a ripple effect, providing immediate feedback to the user.

Toggle Password Visibility:

A common feature in login forms is the ability to toggle password visibility. This improves user experience, especially on mobile devices where typing mistakes are more frequent. Using Material icons and some simple JavaScript:

Clicking the visibility icon will now toggle the password field between visible and obscured states.

Client-Side Validation:

While never a replacement for server-side validation, client-side validation provides immediate feedback:

The required attribute ensures the field is not left empty, and the pattern attribute uses a basic regex to validate email structure.

Handling Form Submission:

The code above prevents the default form submission and provides feedback depending on the input. This is a simplistic approach, and in real-world scenarios, you'd interact with server endpoints to authenticate the user.

Handling Errors and Feedback:

It's crucial to provide clear feedback in the event of errors or successful actions. Consider using modals, snack bars, or simple inline messages to communicate the status of actions to users.

Then, using JavaScript, you can show or hide this error message based on the authentication result.

9. Security and Best Practices for Login Pages

Security is paramount when dealing with user authentication. A well-designed login page not only enhances user experience but also acts as the first line of defense against potential threats.

HTTPS and Encryption:

Before any other consideration, ensure your website uses HTTPS. This encrypts data transmitted between the user's browser and your server, protecting it from eavesdropping and tampering.

Password Security:

Avoid Verbose Error Messages:

If authentication fails, avoid specifying whether it was the username or password that was incorrect. Instead, use generic messages:

This prevents attackers from determining if a particular email or username is registered with your site.

Conclusion

Building a login page might seem easy, but there's a lot to think about. It should look good, work well, be easy to use on any device, and be safe. Thanks to tools like Tailwind CSS and Material Tailwind, you can make great login pages without too much hassle.

In this guide, we started from scratch and ended up with a ready-to-use login page. By combining Tailwind CSS's easy style tools and Material Design's nice looks, users get a great experience every time they log in.

But remember, technology keeps changing. So, always keep learning and updating your skills.

Useful links:

React Navigation – How to Build a Breadcrumb Component

David Jaja — Mon, 25 Mar 2024 22:33:05 +0000

I know what you're thinking – but despite the article title and cover image, this article isn't about bread or even pastries. Instead, it looks at a commonly used component in web applications for navigation called the breadcrumb component.

Here, we'll unravel the mysteries of breadcrumb trails in React applications. We'll dissect their types, and you'll learn how to seamlessly integrate them into your web projects for better user navigation.

Prerequisites

Fundamentals of CSS and TailwindCSS
Fundamentals of ES6 JavaScript and React
Fundamentals of Routing and the React Router library ( check out this routing article if you’re unfamiliar).

What We'll Cover:

Understanding Breadcrumbs
Types of Breadcrumb Navigation
How to Build the Breadcrumb Component in React
How to Create the Breadcrumb Component Structure
– Location-Based Breadcrumbs
– Path-Based Breadcrumbs
– Attribute-Based Breadcrumbs
Best Practices for Breadcrumbs in React
Conclusion

Understanding Breadcrumbs

Before we venture deeper into the intricacies of breadcrumbs, let's set the scene. Imagine the classic tale of Hansel and Gretel, where they leave a trail of breadcrumbs to find their way back home through the dense forest.

In the digital realm, breadcrumbs serve a similar purpose, albeit with a twist.

Hansel And Gretel

Breadcrumbs, in the context of web navigation, are a series of hierarchical links typically displayed at the top of a webpage. These links reflect the user's path from the homepage to the current page, allowing them to retrace their steps or navigate to higher-level pages.

These navigation aids have a fascinating history and a crucial role in guiding users through a digital space.

A typical example of what this component looks like is shown below:

Breadcrumb example: Home Page > Products Page > Single Product Page (current page)

Location-based Breadcrumbs: Like landmarks in a forest, location-based breadcrumbs show users where they are within the website's hierarchy. They show the current page's position relative to other pages on the site.
Path-based Breadcrumbs: Like retracing your steps in the forest, path-based breadcrumbs display the user's journey through the website. They show the sequence of pages visited, helping users understand how they arrived at the current page.
Attribute-based Breadcrumbs: These breadcrumbs highlight specific attributes or characteristics of the current page. They offer more context to the user's navigation, akin to discovering unique features along a trail.

The first step in this section involves creating a React environment. Before you begin, make sure to install Node.js on your computer if you don't have it already.

How to Set Up a React Environment

After installing Node.js, use Vite (a modern build tool for React projects) to create a new React project. In your local terminal, run the command:

npm create vite@latest

Select React as your framework and your preferred variant.

Setting up a react environment with Vite

To install the necessary packages, run npm install and open it in your IDE.

Finally, clear the boilerplate code and start up your server using the command npm run dev.

This project will use Tailwind for styling. To get that set up, run the following command:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

After this command, a tailwind.config.js file will be created. Head into the config file, delete its content, and paste this in there instead:

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

Then, open your index.css file and paste the style configs (preferably at the top):

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

Finally, restart your dev server to get access to Tailwind.

Rather than building one breadcrumb component, we’re going to build all three types mentioned above so you can see how they work.

Location-Based Breadcrumbs

This type is the most basic type of breadcrumb that involves showing all the routes readily available for the user to navigate.

To begin, start by creating a Breadcrumb file and pasting in these styles:

import SlashImg from "./assets/slash.png";

export default function Breadcrumb() {
  return (
    <div className="bg-white ">
      <ul className=" flex border p-2 gap-6 text-xl text-[#2E4053] items-center">
        <li className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md">
          Home
        li>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <li className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300">
          Products
        li>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <li className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300">
          About
        li>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <li className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300">
          FAQ
        li>
      ul>
    div>
  );
}

Then import this file into a Home component which you also need to create:

import Breadcrumb from "./Breadcrumb";

export default function Home() {
  return (
    <div className=" h-[100dvh] bg-gray-200">
      <div className="flex flex-col items-center gap-8 ">
        <h1 className=" text-4xl text-[#2E4053 ] mt-20">
          My Breadcrumb Component 🍞
        h1>
        <Breadcrumb />
      div>
    div>
  );
}

At the moment, your component looks like this:

Breadcrumb after rendering on UI

To perform navigation functionalities with this component, start by installing React Router (a widely used library for managing navigation and routing in React applications).

npm i react-router-dom

Then create the routes in your App component.

import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";

import About from "./About";
import FAQ from "./FAQ";
import Home from "./Home";
import Homepage from "./Homepage";
import Products from "./Products";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index element={<Navigate replace to="home" />} />
        <Route path="/" element={<Home />}>
          <Route path="home" element={<Homepage />} />
          <Route path="products" element={<Products />} />
          <Route path="about" element={<About />} />
          <Route path="faq" element={<FAQ />} />
        Route>
      Routes>
    BrowserRouter>
  );
}

The code block above is a configuration for client-side routing in a React application using React Router v6. It sets up a BrowserRouter to handle dynamic routing and defines a series of Route components within Routes to map URL paths to React components.

BrowserRouter is a router implementation that uses the HTML5 history API to keep the UI in sync with the URL.
Navigate redirects users to a specific route. In this case, it redirects from the index route to /home.
Route components define a mapping between a path and a component. The element prop specifies what to render when the path matches the current URL.
The path="/" element={} route is a nested route that serves as a layout for its child routes. It renders the Home component when the URL is /. Nested inside the Home route are routes for home, products, about, and faq, each rendering their respective components when their path matches the URL.

Next, head over to your Breadcrumb component and change the list elements to Link elements (imported from React Router) to aid routing between routes.

import { Link } from "react-router-dom";
import SlashImg from "./assets/slash.png";

export default function Breadcrumb() {
  return (
    <div className="bg-white ">
      <ul className=" flex border p-2 gap-6 text-xl text-[#2E4053] items-center">
        <Link
          to={"home"}
          className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md">
          Home
        Link>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <Link
          to={"products"}
          className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300">
          Products
        Link>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <Link
          to={"about"}
          className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300">
          About
        Link>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <Link
          to={"faq"}
          className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300">
          FAQ
        Link>
      ul>
    div>
  );
}

Then use the Outlet component provided by React Router to display the content of each route in the Home component.

import Breadcrumb from "./Breadcrumb";
import { Outlet } from "react-router-dom";

export default function Home() {
  return (
    <div className=" h-[100dvh] bg-gray-200">
      <div className="flex flex-col items-center gap-8 ">
        <h1 className=" text-4xl text-[#2E4053 ] mt-20">
          My Breadcrumb Component 🍞
        h1>
        <Breadcrumb />
        <Outlet />
      div>
    div>
  );
}

Testing out your component in the browser now gives the following result:

Routing with the Breadcrumb component

With this, your location-based breadcrumbs are functional, but we can take it a step further. To improve the UX, we can add an active class to the currently active route, creating a visual indicator of where the user is at every point in time.

Start by extracting the current location of the user in the Breadcrumb component:

  const location = useLocation();

Then use the pathname property to add an active class to each link:

import { Link, useLocation } from "react-router-dom";

import SlashImg from "./assets/slash.png";

export default function Breadcrumb() {
  const location = useLocation();
  console.log(location.pathname);

  return (
    <div className="bg-white ">
      <ul className=" flex border p-2 gap-6 text-xl text-[#2E4053] items-center">
        <Link
          to={"home"}
          className={`cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${
            location.pathname === "/home" && "bg-[#b572d6] text-white"
          }`}>
          Home
        Link>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <Link
          to={"products"}
          className={`cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${
            location.pathname === "/products" && "bg-[#b572d6] text-white"
          }`}>
          Products
        Link>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <Link
          to={"about"}
          className={`cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${
            location.pathname === "/about" && "bg-[#b572d6] text-white"
          }`}>
          About
        Link>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <Link
          to={"faq"}
          className={`cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${
            location.pathname === "/faq" && "bg-[#b572d6] text-white"
          }`}>
          FAQ
        Link>
      ul>
    div>
  );
}

This now gives the following result:

Routing with the Breadcrumb component after adding an active class

Tasty! 🍩

Path-Based Breadcrumbs

This breadcrumb type uses the pattern of progressive reveal to better guide the users on where they are based on their actions.

Here we’re going to create two routes and move from the first to the third (Home to Single product page).

Start by modifying your Home component a bit.

export default function Home() {
  return (
    <div className=" h-[100dvh] bg-gray-200">
      <div className="flex flex-col items-center gap-8 ">
        <h1 className=" text-4xl text-[#2E4053 ] mt-20">
          My Breadcrumb Component 🍞
        h1>
        <Breadcrumb />
        <Outlet />

        <div className="flex gap-4 p-2 ">
          <Link to="products" className=" rounded-md p-2 bg-[#777] text-white">
            Products
          Link>
          <Link
            to="products/1"
            className=" rounded-md p-2 bg-[#777] text-white">
            Single Product
          Link>
        div>
      div>
    div>
  );
}

The changes include creating a single product page which we'll route to later.

Then make a nested route path for the page in the App component:

import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";

import Home from "./Home";
import Homepage from "./Homepage";
import Products from "./Products";
import SingleProduct from "./SingleProduct";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index element={<Navigate replace to="home" />} />
        <Route path="/" element={<Home />}>
          <Route path="home" element={<Homepage />} />
          <Route path="products" element={<Products />}>
            <Route path=":productId" element={<SingleProduct />} />
          Route>
        Route>
      Routes>
    BrowserRouter>
  );
}

For the already existing Products page, add these styles and changes:

import { Outlet } from "react-router-dom";

export default function Products() {
  return (
    <div className="bg-[#EDBB99] p-2 w-96 h-96 flex flex-col items-center">
      <h1>Products Pageh1>
      <Outlet />
    div>
  );
}

Page after creating the Single Product page without any routing

Finally, modify your breadcrumb component to display the routes when you route to them from the home page.

import { Link, useLocation } from "react-router-dom";

import RightArrowImg from "./assets/right-icon.png";

export default function Breadcrumb() {
  const location = useLocation();

  return (
    <div className="bg-white ">
      <ul className=" flex border p-2 gap-6 text-xl text-[#2E4053] items-center">
        <Link
          to={"home"}
          className={`cursor-pointer hover:bg-[#E8DAEF] hover:text-black p-4 rounded-md ${
            location.pathname === "/home" && "bg-[#b572d6] text-white"
          }`}>
          Home
        Link>
        {location.pathname.includes("/products") && (
          <>
            <img src={RightArrowImg} className="w-5 h-5 " alt="" />
            <Link
              to={"products"}
              className={` hover:text-black cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${
                location.pathname.includes("/products") &&
                " bg-[#b572d6] text-white"
              } ${
                location.pathname.includes("/products/") &&
                " bg-[#E8DAEF] text-black"
              }`}>
              Products
            Link>
          
        )}
        {location.pathname.includes(`/products/`) && (
          <>
            <img src={RightArrowImg} className="w-5 h-5 " alt="" />
            <Link
              to={"products"}
              className={`hover:text-black  cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${
                location.pathname.includes("/products") &&
                "bg-[#b572d6] text-white"
              }`}>
              Single Product
            Link>
          
        )}
      
    
  );
}

In the code above, we’re displaying more breadcrumbs based on the route we’re in and applying styles to reflect the route changes.

Testing our component now gives the following result:

Routing with the Breadcrumb component after adding a nested route

Sweet! 🍬

Attribute-Based Breadcrumbs

Attribute-based breadcrumbs focus on highlighting specific attributes or characteristics of the current page, such as tags, categories, or any other relevant metadata.

Instead of simply showing the user's path through the website hierarchy, they provide additional context that can aid in navigation and understanding.

A common use case for them is on E-commerce sites where you go through multiple items and filter through multiple product properties to find your desired product.

To begin, our app component is going to look drastically different with no routing done.

import Products from "./Products";

export default function App() {
  return (
    <div className=" h-[100dvh] bg-[#EDBB99]">
      <Products />
    div>
  );
}

Then add this JSX to your Products component:

import Breadcrumb from "./Breadcrumb";

export default function Products() {
  const dogsArray = [
    {
      size: "S",
      color: "white",
      image: "/small-white-dog.jpg",
      name: "Gigi",
      age: 1,
    },
    {
      size: "M",
      color: "white",
      image: "/medium-white-dog.jpg",
      name: "Tom",
      age: 2,
    },
    {
      size: "L",
      color: "white",
      image: "/big-white-dog.jpg",
      name: "Jake",
      age: 3,
    },
    {
      size: "S",
      color: "black",
      image: "/small-black-dog.jpg",
      name: "Hill",
      age: 1,
    },
    {
      size: "M",
      color: "black",
      image: "/medium-black-dog.jpg",
      name: "Jack",
      age: 2,
    },
    {
      size: "L",
      color: "black",
      image: "/big-black-dog.jpg",
      name: "Jones",
      age: 3,
    },
    {
      size: "S",
      color: "brown",
      image: "/small-brown-dog.jpg",
      name: "Herbert",
      age: 1,
    },
    {
      size: "M",
      color: "brown",
      image: "/medium-brown-dog.jpg",
      name: "Coco",
      age: 2,
    },
    {
      size: "L",
      color: "brown",
      image: "/big-brown-dog.jpg",
      name: "Benny",
      age: 3,
    },
  ];


  return (
    <div className="flex flex-col items-center p-2">
      <h1 className="p-4">Adopt Pageh1>
      <Breadcrumb />
      <main>
        <div className="relative grid grid-cols-5 gap-6">
          {dogsArray.map((dog) => (
            <div key={dog.name}>
              <div className=" w-[225px] rounded-md overflow-hidden">
                <img className="w-full " src={dog.image} alt="" />
              div>
              <div className="grid items-center grid-cols-2 gap-2 mt-2">
                <div className="flex items-center gap-2">
                  <span>Name:span>
                  <p className="text-center text-white bg-orange-900 border rounded-[4px] p-1.5 min-w-14">
                    {dog.name}
                  p>
                div>
                <div className="flex gap-2 ">
                  <span>Size:span>
                  <p className="text-center text-white min-w-14">{dog.size}p>
                div>
                <div className="flex gap-2 ">
                  <span>Color:span>
                  <p className="text-center text-white capitalize min-w-14">
                    {dog.color}
                  p>
                div>
                <div className="flex gap-2 ">
                  <span>Age:span>
                  <p className="text-center text-white min-w-14">
                    {`${dog.age + " " + "year"}${dog.age > 1 ? "s" : ""}`}
                  p>
                div>
              div>
            div>
          ))}

          <div className="absolute bottom-0 left-0 p-1 translate-y-[110%]">
            <h2 className="mb-2">Filter byh2>
            <div className="flex items-center mb-4">
              <h3 className="w-12">Size:h3>
              <div className="flex gap-2">
                <button
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  All
                button>
                <button
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  S
                button>
                <button
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  M
                button>
                <button
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  L
                button>
              div>
            div>
            <div className="flex items-center">
              <h3 className="w-12">Color:h3>
              <div className="flex gap-2">
                <button
                  className={`p-2 text-center bg-white  rounded-md min-w-14 `}>
                  All
                button>
                <button
                  className={`p-2 text-center bg-white  rounded-md min-w-14`}>
                  White
                button>
                <button
                  className={`p-2 text-center rounded-md bg-white min-w-14 `}>
                  Brown
                button>
                <button
                  className={`p-2 text-center rounded-md bg-white  min-w-14 `}>
                  Black
                button>
              div>
            div>
          div>
        div>
      main>
    div>
  );
}

This JSX uses dummy dog data to create a template and style it with tailwind.

At the moment, your app should look like this;

Page after looping over the dummy dog data

To implement the attribute-based breadcrumbs, start by creating two states for the attributes you want to filter by:

const [sizeFilter, setSizeFilter] = useState(null);
const [colorFilter, setColorFilter] = useState(null);

Then create a function to filter based on the value passed in:

  const filteredDogs = dogsArray.filter((dog) => {
    if (sizeFilter && dog.size !== sizeFilter) return false;

    if (colorFilter && dog.color !== colorFilter) return false;

    return true;
  });

After that, change the array you used used to create the JSX to the array returned from the function:

 {filteredDogs.map((dog) => (
            <div key={dog.name}>

Finally, use the setter function to pass in the values you want to filter by:


        <div className="relative grid grid-cols-5 gap-6">
          {filteredDogs.map((dog) => (
            <div key={dog.name}>
              <div className=" w-[225px] rounded-md overflow-hidden">
                <img className="w-full " src={dog.image} alt="" />
              div>
              <div className="grid items-center grid-cols-2 gap-2 mt-2">
                <div className="flex items-center gap-2">
                  <span>Name:span>
                  <p className="text-center text-white bg-orange-900 border rounded-[4px] p-1.5 min-w-14">
                    {dog.name}
                  p>
                div>
                <div className="flex gap-2 ">
                  <span>Size:span>
                  <p className="text-center text-white min-w-14">{dog.size}p>
                div>
                <div className="flex gap-2 ">
                  <span>Color:span>
                  <p className="text-center text-white capitalize min-w-14">
                    {dog.color}
                  p>
                div>
                <div className="flex gap-2 ">
                  <span>Age:span>
                  <p className="text-center text-white min-w-14">
                    {`${dog.age + " " + "year"}${dog.age > 1 ? "s" : ""}`}
                  p>
                div>
              div>
            div>
          ))}

          <div className="absolute bottom-0 left-0 p-1 translate-y-[110%]">
            <h2 className="mb-2">Filter byh2>
            <div className="flex items-center mb-4">
              <h3 className="w-12">Size:h3>
              <div className="flex gap-2">
                <button
                  // Reset size state
                  onClick={() => setSizeFilter(null)}
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  All
                button>
                <button
                  // Set filter to small
                  onClick={() => setSizeFilter("S")}
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  S
                button>
                <button
                  // Set filter to medium
                  onClick={() => setSizeFilter("M")}
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  M
                button>
                <button
                  // Set filter to large
                  onClick={() => setSizeFilter("L")}
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  L
                button>
              div>
            div>
            <div className="flex items-center">
              <h3 className="w-12">Color:h3>
              <div className="flex gap-2">
                <button
                  // Reset color state
                  onClick={() => setColorFilter(null)}
                  className={`p-2 text-center bg-white  rounded-md min-w-14 `}>
                  All
                button>
                <button
                  // Set color to white
                  onClick={() => setColorFilter("white")}
                  className={`p-2 text-center bg-white  rounded-md min-w-14 `}>
                  White
                button>
                <button
                  // Set color to brown
                  onClick={() => setColorFilter("brown")}
                  className={`p-2 text-center rounded-md bg-white min-w-14 `}>
                  Brown
                button>

                <button
                  // Set color to black
                  onClick={() => setColorFilter("black")}
                  className={`p-2 text-center rounded-md bg-white  min-w-14 `}>
                  Black
                button>
              div>
            div>
          div>
        div>

Testing your component now gives the following result:

Filtering by properties working

Exquisite!🍦

To add our breadcrumb functionality, pass in the filter props to the component like this:

Then use those props to render the headers:

import RightArrowImg from "./assets/right-icon.png";

export default function Breadcrumb({ sizeFilter, colorFilter }) {
  return (
    <div className="mb-4 bg-gray-200 rounded-md ">
      <ul className="   flex items-center  text-xl text-[#2E4053] text-left">
        <li className={`cursor-pointer p-4 rounded-md `}>Allli>

        {sizeFilter && (
          <>
            <img src={RightArrowImg} className="w-5 h-5 " alt="" />
            <li className={`cursor-pointer p-4 rounded-md capitalize`}>
              {sizeFilter}
            li>
          
        )}
        {colorFilter && (
          <>
            <img src={RightArrowImg} className="w-5 h-5 " alt="" />
            <li className={`cursor-pointer p-4 rounded-md capitalize`}>
              {colorFilter}
            li>
          
        )}
      
    
  );
}

Before we see the final result, let’s add indicators of what filter props are currently active:


        <div className="relative grid grid-cols-5 gap-6">
          {filteredDogs.map((dog) => (
            <div key={dog.name}>
              <div className=" w-[225px] rounded-md overflow-hidden">
                <img className="w-full " src={dog.image} alt="" />
              div>
              <div className="grid items-center grid-cols-2 gap-2 mt-2">
                <div className="flex items-center gap-2">
                  <span>Name:span>
                  <p className="text-center text-white bg-orange-900 border rounded-[4px] p-1.5 min-w-14">
                    {dog.name}
                  p>
                div>
                <div className="flex gap-2 ">
                  <span>Size:span>
                  <p className="text-center text-white min-w-14">{dog.size}p>
                div>
                <div className="flex gap-2 ">
                  <span>Color:span>
                  <p className="text-center text-white capitalize min-w-14">
                    {dog.color}
                  p>
                div>
                <div className="flex gap-2 ">
                  <span>Age:span>
                  <p className="text-center text-white min-w-14">
                    {`${dog.age + " " + "year"}${dog.age > 1 ? "s" : ""}`}
                  p>
                div>
              div>
            div>
          ))}

          <div className="absolute bottom-0 left-0 p-1 translate-y-[110%]">
            <h2 className="mb-2">Filter byh2>
            <div className="flex items-center mb-4">
              <h3 className="w-12">Size:h3>
              <div className="flex gap-2">
                <button
                  onClick={() => setSizeFilter(null)}
                  className={`p-2 text-center  rounded-md min-w-14 ${
                    // Dynamic background color add
                    sizeFilter === null
                      ? "bg-orange-900 text-white"
                      : "bg-white text-black "
                  }`}>
                  All
                button>
                <button
                  onClick={() => setSizeFilter("S")}
                  className={`p-2 text-center  rounded-md min-w-14 ${
                    // Dynamic background color add
                    sizeFilter === "S"
                      ? "bg-orange-900 text-white"
                      : "bg-white text-black "
                  }`}>
                  S
                button>
                <button
                  onClick={() => setSizeFilter("M")}
                  className={`p-2 text-center  rounded-md min-w-14 ${
                    // Dynamic background color add
                    sizeFilter === "M"
                      ? "bg-orange-900 text-white"
                      : "bg-white text-black "
                  }`}>
                  M
                button>
                <button
                  onClick={() => setSizeFilter("L")}
                  className={`p-2 text-center  rounded-md min-w-14 ${
                    // Dynamic background color add
                    sizeFilter === "L"
                      ? "bg-orange-900 text-white"
                      : "bg-white text-black "
                  }`}>
                  L
                button>
              div>
            div>
            <div className="flex items-center">
              <h3 className="w-12">Color:h3>
              <div className="flex gap-2">
                <button
                  onClick={() => setColorFilter(null)}
                  className={`p-2 text-center   rounded-md min-w-14 ${
                    // Dynamic background color add
                    colorFilter === null
                      ? "bg-orange-900 text-white"
                      : "bg-white text-black "
                  }`}>
                  All
                button>
                <button
                  onClick={() => setColorFilter("white")}
                  className={`p-2 text-center   rounded-md min-w-14 ${
                    // Dynamic background color add
                    colorFilter === "white"
                      ? "bg-orange-900 text-white"
                      : "bg-white text-black "
                  }`}>
                  White
                button>
                <button
                  onClick={() => setColorFilter("brown")}
                  className={`p-2 text-center rounded-md   min-w-14 ${
                    // Dynamic background color add
                    colorFilter === "brown"
                      ? "bg-orange-900 text-white"
                      : " bg-white text-black "
                  }`}>
                  Brown
                button>

                <button
                  onClick={() => setColorFilter("black")}
                  className={`p-2 text-center rounded-md    min-w-14 ${
                    // Dynamic background color add
                    colorFilter === "black"
                      ? "bg-orange-900 text-white"
                      : " bg-white text-black"
                  }`}>
                  Black
                button>
              div>
            div>
          div>
        div>

A final test on your component now gives this result:

Filtering via properties and showing it in the breadcrumb

And voilà! Your component filters perfectly, and also shows a useful breadcrumb to help users know what properties they’ve filtered by.

Bruce Almighty Jim Carrey beautiful gif

Best Practices for Breadcrumbs in React

When implementing breadcrumbs in React, it's crucial to follow certain best practices to ensure a seamless user experience. Here are some key points to consider:

Consistency with React Routing: Breadcrumbs should align with the application's routing structure. You can do this by implementing dynamic breadcrumbs using a good routing library (React Router). By defining routes and generating an array of breadcrumbs based on the user's current route, you can ensure that the breadcrumb trail reflects the user's navigation path.
Breadth and Depth of Breadcrumb Trails: Breadcrumb trails should represent the user's location within the application. This includes using a separator, such as a slash ("/"), to distinguish between different parts of the breadcrumb trail.
Naming and Navigation: Breadcrumbs should be easy to understand and navigate. This involves using clear and descriptive names for each breadcrumb and ensuring that each breadcrumb link is clickable, leading the user to the appropriate page.
Ensuring Accessibility: Breadcrumbs should be accessible to all users. This can be achieved by using the aria-label attribute to identify the breadcrumb trail as a navigation landmark. This makes it easier for users with assistive technologies to locate and navigate the breadcrumb trail.
Customization and Ease-of-Use: When using a component for creating breadcrumbs, consider its customization options and ease of use. Look for components that provide useful defaults and allow for easy customization of texts, links, and separators.

By adhering to these best practices, you can create effective and user-friendly breadcrumbs in your React applications.

Here are links to the repositories on GitHub:

Conclusion

Implementing breadcrumbs in React applications not only provides a navigational aid but also contributes to a seamless and intuitive user experience. Adhering to best practices enhances the usability and accessibility of applications.

Just as the aroma of freshly baked bread entices hungry people to come visit the bakery, a well-structured breadcrumb trail can entice users to explore and navigate an application with ease, ultimately improving user navigation and experience. And that's how the cookie crumbles, leaving a trail of delightful navigation in its wake.

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

Twitter / X: @jajadavid8
LinkedIn: David Jaja
Email: Jajadavidjid@gmail.com

How to Add Tailwind CSS to Your React Native Expo App

John Caleb — Tue, 27 Feb 2024 09:22:11 +0000

Tailwind CSS has been quite popular in the web development world due to its utility-first approach and seamless integration.

However, when developing mobile apps with React Native, integrating Tailwind CSS may be challenging. But guess what? Not anymore. With the development of tools such as NativeWind, React Native developers can leverage Tailwind CSS power to design stunning and responsive mobile UIs easily.

In this tutorial, you'll learn the process of integrating Tailwind CSS to your React Native Expo app using NativeWind. We'll also build a simple login screen with NativeWind.

What's NativeWind?

NativeWind acts as a bridge between Tailwind CSS and React Native Expo, allowing developers to take advantage of Tailwind's utility-first approach in their mobile app development workflow.

NativeWind provides various benefits to developers, some of these benefits include:

Familiar Syntax: Developers that are familiar with Tailwind CSS can easily migrate to using NativeWind in their React Native projects, easing the learning curve.
Consistent Styling: NativeWind ensures consistent styling across platforms by offering a single collection of components and services.
Flexibility: NativeWind allows developers to easily adapt and extend styles to meet the app's design specifications.

Overall, It provides a collection of components and tools that are very similar to Tailwind CSS, allowing developers to create shorter, more concise code while preserving flexibility and consistency across platforms.

Tailwind makes writing code feel like I’m using a design tool - Didier Catz

Prerequisites

Basic Understanding of React Native Expo and Tailwind CSS.
Node.js and npm (or yarn) installed.
Willingness to learn :)

Getting Started

Before you dive into integrating Tailwind CSS into your React Native Expo app, you'll need to ensure that you have the necessary tools set up.

If you haven't already installed Expo and expo-cli globally, you can do so using npm or yarn:

npm install -g expo-cli

yarn global add expo-cli

How to Create A New Expo App

With expo-cli installed, you can now create a new React Native Expo project.

Navigate to the directory where you wish to create your project and open the terminal. You can do this by pressing CTRL + ` on Visual Studio Code. Then execute this command in the terminal:

npx create-expo-app simpleproject

This command creates an expo project in your directory.

How to Install NativeWind

After creating your expo project, you can install NativeWind and its dependencies by running the following commands in your project's directory:

cd simpleproject
npm i nativewind
npm i --dev tailwindcss@3.3.2

cd simpleproject
yarn add nativewind
yarn add --dev tailwindcss@3.3.2

Next, you'll need to create a tailwind.config.js file. To do this, run this command in your terminal:

npx tailwindcss init

This would result in a tailwind.config.js file in your project's root directory.

How to Set Up Tailwind CSS

To set up Tailwind CSS in your project, navigate to your tailwind.config.js file, and under content, enter the paths to your components. Your tailwind.config.js file would then look like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    ".//**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

tailwind.conf.js file after adding paths to components

In the above example, you can replace with your directory's real name.

How to Configure NativeWind with Babel

You'll also need to configure NativeWind with Babel. To do this, include the NativeWind plugin in your project's babel.conf.js file:

plugins: ["nativewind/babel"],

The babel.conf.js file would look like this after adding the NativeWind plugin:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["nativewind/babel"],
  };
};

babel.conf.js file after adding nativewind plugin

By including the NativeWind plugin in the Babel configuration file you ensure that NativeWind's functionality is properly incorporated into your project's JavaScript codebase.

🎉With this, NativeWind has been successfully integrated into your Expo app. The next step is to begin styling the app with NativeWind.

How to Style with NativeWind

To begin styling with NativeWind, go to your project's App.js file or the component you would like to style, which would look like this by default:

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!Text>
      <StatusBar style='auto' />
    View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

App.js boilerplate code

Next, modify your component to get rid of any instances of StyleSheet abstraction. In this example, we'll modify the App.js code. After adjustments, we should have something like this:

import { StatusBar } from "expo-status-bar";
// import { StyleSheet, Text, View } from "react-native";
import { Text, View } from "react-native";

export default function App() {
  return (
    // 
    <View className='flex-1 justify-center items-center bg-white'>
      <Text>Open up App.js to start working on your app!Text>
      <StatusBar style='auto' />
    View>
  );
}

// const styles = StyleSheet.create({
//   container: {
//     flex: 1,
//     backgroundColor: "#fff",
//     alignItems: "center",
//     justifyContent: "center",
//   },
// });

App.js component after modification

In the modified codeblock, we remove all occurrences of StyleSheet abstractions, including the import statement for stylesheet and the StyleSheet.create function, and we replace style with className in the App.js return function.

Having cleared that up, all you need to do is write Tailwind CSS classes into your app className to begin implementing Tailwind CSS in your application. You'll see this in a bit as we build a simple login screen with NativeWind.

Now, let's dive into building a simple login screen using NativeWind. We'll continue with the initial setup in the App.js file and gradually add components to create the login UI.

First, let's replace the existing code in the App.js file with the following:

import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";

export default function App() {
  return (
    <View className='flex-1 justify-center items-center bg-white'>
      <StatusBar style='auto' />
      <Text className='text-center mt-3 text-2xl font-light text-orange-300'>
        Login
      Text>
      {/* Additional components goes here */}
    View>
 );
}

Starter code for login screen UI

The code above imports the essential components from React Native and Expo. We then use a View component to define the structure of our login screen, which is styled with NativeWind's utility classes. Inside the View, we have a Text component that displays "Login" with styling applied using NativeWind classes.

Next, you can add your login form components, such as username and password input fields, a login button, and any other necessary elements. Here is an example of how you can extend the login screen:

import { StatusBar } from "expo-status-bar";
import { Text, View, TouchableOpacity, TextInput } from "react-native";

export default function App() {
  return (
    <View className='flex-1 justify-center items-center bg-white'>
      <StatusBar style='auto' />
      <Text className='text-center mt-3 text-2xl font-light text-orange-300'>
        Login
      Text>
      {/* Additional components goes here */}
      <View className='mt-5 mx-5'>
        <View>
          <Text className='text-gray-400'>EMAIL:Text>
          <TextInput
            placeholder='Enter Email...'
            className='border border-dotted p-2 text-gray-500 border-amber-400 mt-1'
          />
        View>
        <View className='mt-3'>
          <Text className='text-gray-400'>PASSWORD:Text>
          <TextInput
            secureTextEntry
            placeholder='Enter Password...'
            className='border text-gray-500 border-dotted p-2 border-amber-400 mt-1'
          />
        View>

        <TouchableOpacity className='bg-orange-300 p-3 mt-4'>
          <Text className='text-center text-base text-white'>LoginText>
        TouchableOpacity>

        <Text className='text-center font-normal text-gray-500 text-base mt-3'>
          OR
        Text>
        <View className='mt-4'>
          <TouchableOpacity className='flex flex-row items-center justify-center p-2 bg-orange-300'>
            <Text className='text-white mx-2 text-sm'>Sign In With GoogleText>
          TouchableOpacity>
        View>
        <View className='mt-6 flex-row justify-center'>
          <Text className=''>New to FreeCodeCamp? Text>
          <TouchableOpacity>
            <Text className='text-amber-500'>Create an AccountText>
          TouchableOpacity>
        View>
      View>
    View>
  );
}

Extended login screen UI with additional components

In this expanded version, we've included TextInput components for the username and password input fields, as well as a TouchableOpacity for the login button. Styling is done with NativeWind's utility classes to provide a clean and consistent appearance.

Furthermore, once you've finished creating your login screen using NativeWind in your React Native Expo project, you'll want to test it to check if everything works properly. You can do this by running this command on your terminal:

expo start

This command will launch the bundler and generate a QR code. To open the app, scan the QR code displayed in the terminal with your emulator's camera, or press "a" for Android or "i" for iOS.

Output of the code in an emulator

If you need to, you can access the complete project code on GitHub.

Conclusion

Integrating Tailwind CSS into a React Native Expo project with NativeWind has various benefits, including increased developer efficiency, code consistency, and performance. Developers can easily create amazing mobile applications by leveraging the power of Tailwind CSS's utility-first approach and React Native's native features.

NativeWind makes it easy to apply Tailwind CSS to your React Native Expo app. Using Tailwind CSS in your mobile app development workflow opens up new possibilities for UI design and customization.

Remember, if you have any questions or just want to say hi, feel free to reach me on X(Twitter) or my website. :)

How to Build a Custom HTML5 Video Player Using TailwindCSS and JavaScript

Franklin Okolie — Tue, 13 Feb 2024 15:14:21 +0000

HTML5 comes equipped with a native video player. It's shipped with a simple user interface, functionality, and some basic controls in the browser. And while the functionality of the default video player via the browser works perfectly, the user interface isn't so beautiful and fancy, and it's just not generally aesthetically pleasing.

For this reason, most modern web applications and platforms like Udemy, Netflix, YouTube, and Amazon Prime don't ship the default built-in HTML5 video player to their users. Instead, they build their own customized versions with a sleek user interface to make their platforms more attractive and user-friendly.

If you have ever been curious how these companies and web platforms are able to pull off such feat, then this article is for you.

You'll get some hands-on experience while following along with a step-by-step guide that teaches you how you can build and customize your own HTML5 video player. You'll learn how to customize the user interface, extend the functionality, and build your own fantastic custom controls and features.

You'll also learn how to build all this using nothing other than the native Video API provided by JavaScript in the browser – no external libraries or tools required.

Prerequisites

Fundamental knowledge of HTML5 and CSS
Fundamental knowledge of Tailwind CSS
Fundamental knowledge of JavaScript (ES6)
A code editor of your choice
A browser that supports modern features of JavaScript (for example Chrome or Mozilla Firefox)

Here's what we'll cover:

Getting Started
How to Set Up the Development Environment
How to Build a Customized UI using Tailwind CSS
How to Implement the Play and Pause Functionality
How to Implement the Rewind and Fast Forward Functionality
How to Implement the Mute and Unmute Functionality
How to Update the Progress Bar Relative to the Video Time
How to Implement the Seeking Functionality
How to Implement Keyboard Navigations for Accessibility
Where to Go from Here
Conclusion

Getting Started

In this article, we will be using Tailwind CSS as the styling tool to build out the custom video player UI. We'll also use JavaScript to build out the functionality of the controls.

Note that using Tailwind CSS is optional, as any styling tool will suffice here like SCSS, CSS, styled-components and so on – it's totally up to you.

I've split this tutorial into different sections, each addressing a specific aspect of the custom video player functionality. Each new section will build upon the previous ones to complete the player. By the end of the article, you will have a fully functional HTML5 custom video player.

In this tutorial, we'll concentrate on specific features of the video player. These features will offer opportunities and ideas for building additional functionalities. The features we'll cover are:

Play and Pause
Rewind and Fast Forward
Mute and Unmute
Video Seeking
Keyboard navigations (utilizing the Spacebar for play and pause, and the Arrow keys for rewind and fast forward).

We won't address responsive design here, as we won't be focusing on making the video player mobile responsive. This omission should present a challenge and a learning opportunity for you.

Now, let's delve into setting up our development environment so we can start building.

How to Set Up the Development Environment

The initial step is to setup an efficient development environment to ensure smooth workflow. We'll use Vite for this purpose.

Before progressing to the next part of this section, make sure that you have NodeJS and NPM or Yarn installed on your computer, as they are necessary for installing tools and setting up your development environment seamlessly.

How to setup the project with Vite

To scaffold a project in Vite, open your terminal and type in the following command:

yarn create vite

Vite will guide you in configuring and selecting the appropriate tools for your development environment.

The first step is to choose a project name – you have the freedom to choose any name you prefer. In this article, I'll be using "html5-video-player" as the project name.

Terminal output after running 'yarn create vite' command

The next step is selecting the project framework. This project will be written in pure JavaScript, so choose "Vanilla" and then select "JavaScript" on the next prompt.

Terminal output after inputting a project name, asking to select a framework for the project

Terminal output afte selecting the 'Vanilla' framwork

Now, Vite has successfully set up your environment using the selected tools. It's time to install the dependencies necessary for Vite to function properly. Follow the instructions provided by Vite in the CLI.

Terminal showing a success message on setting up the environment

If you named your project like mine, then run the command below exactly as it is. If you chose a different name, simply substitute my project name with yours and proceed in the same manner.

cd html5-video-player

This command will navigate to the project directory where your development environment resides. From there, you can proceed to install the dependencies.

yarn

Once the dependencies are installed, let's proceed to the next step, which involves setting up Tailwind CSS as our styling tool. This process is straightforward, similar to how we set up Vite.

Open your terminal and execute the following commands:

yarn add -D tailwindcss postcss autoprefixer

This will install Tailwind CSS, our styling tool, as well as PostCSS and Autoprefixer. These tools will assist Tailwind CSS in functioning effectively within your project.

The next command involves setting up the configuration files for Tailwind CSS and PostCSS.

Open your local terminal once again and type in the following command:

npx tailwindcss init

Creating Tailwind CSS configuration file.

As mentioned in the command message, a file named tailwind.config.js will be generated at the root of the project folder. This file will contain your configuration for styling, including settings for fonts, colors, plugins, and more. For further details, refer to the TailwindCSS documentation.

Open the Tailwind CSS configuration file that was generated in your code editor and make the following edits to it:

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

Here, we simply edited the content key to specify the file where TailwindCSS should read for Tailwind CSS classes. This file happens to be the index.html file, where our main work will take place.

Next, you'll need to configure PostCSS, which doesn't have an automated setup command like TailwindCSS. So you'll create the configuration file manually. Navigate to the project's root folder and create a file named postcss.config.js.

After creating the postcss.config.js file, simply copy and paste the provided code snippet into the file.

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Next, configure your style.css file to utilize Tailwind CSS defaults. This saves you from the tedious task of setting up CSS defaults manually.

Open the style.css file in your code editor, delete its contents, and then paste the following code snippet into the file:

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

Delete unneccasary files and code

The files generated by Vite primarily serve as guides for adding your own files and using the bundler effectively. So you can delete most of them since they are unnecessary for this project.

Below are the files to be removed from the project:

counter.js
javascript.svg

Once you've done that, you can move on to the next step in this section, which involves removing unnecessary code.

Open the main.js file located at the root of the project, and delete all the code within it.

Then, navigate to the index.html file and delete all of its current content. Afterwards, copy and paste the below code snippet into the file:

html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>HTML5 Custom Video Playertitle>
  head>
  <body>
    <h1 class="text-3xl font-bold underline text-red-800">Hello world!h1>
    <script type="module" src="/main.js">script>
  body>
html>

And with that, you're finished with this part! Your development environment is now set up, ready for you to begin building your custom HTML5 video player

To confirm that your environment is set up properly, check the following:

The project files and folders should resemble the following structure:

Project setup completed: Visual Studio Code displaying project structure.

Open your terminal and run the following command:

yarn dev

This will create a development server where your webpage will be hosted. Open the URL provided by Vite.

Launching Vite development server with 'yarn dev' command.

Upon opening the link http://localhost:5173/, you should see this:

The initial user interface displayed after executing 'yarn dev' command.

Congratulations! You have successfully completed this section on setting up your development environment, which will let us work effectively as we build our custom HTML5 video player.

Troubleshooting: If you find that your setup isn't working as expected, don't worry. Simply delete the project folder and repeat the process. You may have missed a step or some tools might not have installed correctly. Also, double-check your Tailwind CSS and PostCSS configuration files to ensure they contain the correct code as shown above.

How to Build a Customized UI using Tailwind CSS

This section covers all the styling required to construct the UI of the custom HTML5 video player. We'll take a step-by-step walkthrough of the process.

First, copy and paste the following link tag into the head of your HTML, above the link to the stylesheet:

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

This allows us to use Materialize CSS icons, which are essential for styling our buttons in the UI.

Next, let's focus on styling the video element in our markup. Simply replace the body element with the provided code snippet below:

<body class="bg-indigo-950 p-10">
  <div
    id="container"
    class="w-4/5 h-4/5 mx-auto rounded-lg overflow-hidden relative group"
  >
    
    <figure>
      <video class="w-full">
        <source src="/your-video.mp4" />
      video>
    figure>
  div>
  <script type="module" src="/main.js">script>
body>

The provided code snippet includes the markup and styling for the video element, as well as an outer div acting as a container for the entire video player UI. The video element is nested within a figure element.

For the source element, specify the path to the video you wish to play. You can find videos online, download them, and add them to the "public" directory within the project folder. Then, link the src attribute of the source element to the video file. You can find free downloadable videos here.

Next, let's style the controls using the Materialize CSS Icons you linked in your HTML. Place the following code snippet below the figure element inside the body element.


<div
  id="controls"
  class="opacity-0 p-5 absolute bottom-0 left-0 w-full transition-opacity duration-300 ease-linear group-hover:opacity-100"
>
  
  <div id="progress-bar" class="h-1 w-full bg-white cursor-pointer mb-4">
    <div
      id="progress-indicator"
      class="h-full w-9 bg-indigo-800 transition-all duration-500 ease-in-out"
    >div>
  div>
  <div class="flex items-center justify-between">
    <div class="flex items-center justify-between">
      
      <button
        id="rewind"
        class="transition-all duration-100 ease-linear hover:scale-125"
      >
        <i class="material-icons text-white text-3xl w-12">replay_10 i>
      button>

      
      <button
        id="play-pause"
        class="transition-all duration-100 ease-linear hover:scale-125"
      >
        <i class="material-icons text-white text-5xl inline-block w-12"
          >play_arrowi
        >
      button>

      
      <button
        id="fast-forward"
        class="transition-all duration-100 ease-linear hover:scale-125"
      >
        <i class="material-icons text-white text-3xl w-12">forward_10 i>
      button>
    div>

    <div>
      
      <button
        id="volume"
        class="transition-all duration-100 ease-linear hover:scale-125"
      >
        <i class="material-icons text-white text-3xl">volume_upi>
      button>
    div>
  div>
div>

This code segment defines the layout and behavior of the controls for a video player. It begins by setting up a container div (

) that holds all the control elements. The container is initially invisible (opacity-0) and becomes visible with a smooth transition (transition-opacity duration-300 ease-linear) when the user hovers over it (group-hover:opacity-100).

Within the container, there's a progress bar (

) for tracking the video's progress. It consists of a white background bar (bg-white) with a movable indicator (

) colored in indigo (bg-indigo-800). The progress bar is responsive and allows users to seek to different parts of the video.

Below the progress bar are control buttons for various functions. The rewind, play/pause, and fast forward buttons are grouped together within a flex container (

). Each button (

How to Create Scroll Animations with React, Tailwind CSS, and Framer Motion

freeCodeCamp — Mon, 27 Nov 2023 18:47:58 +0000

By Manu Arora

Scroll-based animations are triggered when a user scrolls on a webpage. Recently, I built a Scroll Animation with Framer Motion that moves grids in uneven directions. This project prompted me to write a tutorial about how I did that here on freeCodeCamp.

The Framer Motion library makes it super easy to integrate animations into your React applications. With a few lines of code, you can achieve what might seem like a difficult task.

Today, we are going to build a scroll-triggered animation that rotates, translates, and scales a card (or a container) when the user scrolls.

What We're Building:

https://stackblitz.com/edit/stackblitz-starters-2mybwg?embed=1&file=src%2FScroll.tsx&view=preview

Here, as the user scrolls, three things are going to happen:

The text Unleash the power of Scroll Animations moves up a little bit.
The Frame (the black container which is holding the cards) rotates and aligns perfectly with the page.
The cards inside the frame translate up a bit – providing a parallax effect.

All of these actions are achieved with the help of the scrollYProgress value from the useScroll() function from Framer Motion. The scrollYProgress value (more on this later) gives you the progress between 0 to 1, determining where the user currently is on the page.

Let's jump into the code and see how to implement this animation from scratch.

Prerequisites

For this demo, we are going to use:

Next.js for writing our component
Tailwind CSS for styling and CSS
Framer Motion for animations

How to Setup the Project

Setting up the project is pretty simple. Here are the steps you should follow:

First, you'll need to install Next.js if you don't already have it.

Open your terminal and type the following command:

npx create-next-app@latest scroll-animation --typescript --eslint

This will initialize a Next.js application where you can go to the app directly for routes and the components folder to create your components.

We are going to keep it really simple for this demo and add the component in the components folder.

Next you'll need to install Tailwind CSS, which you can do like this:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Now add Tailwind to your project by copying the following file contents into the tailwind.config.ts file which gets created after you run the above step:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now add the following global styles in the globals.css file:

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

With these steps completed, you should be able to write the component and add it to your project seamlessly.

Now that we are done with the setup, let's deep dive into the component code that we are going to build.

How to Build the Scroll Component

There's essentially only one main component that we are going to work with. We are calling it Scroll, because why not? Here's the code:

export const Scroll = () => {
  return (
    
      
    
  );
};
export const ScrollCore = () => {
  return (
    
      
        
        
      
    
  );
};

export const Header = () => {
  return (
    
      
        Unleash the power of 
{' '}
        
          Scroll Animations
        
      
    
  );
};

export const Card = () => {
    // Going to implement later in the blog
};

The Scroll components is the container which contains a ScrollCore component.

The ScrollCore component holds the Header and the Card components:

The Header is the text component that translates to the top (as we saw in the preview
The Card component is the Frame that we talked about earlier.

Both of these components are styles with Tailwind CSS. We give a class of h-screen and w-screen to the container, and we want the container to take the entire height and width of the screen.

How to Build the Card Component

The Card component is pretty basic (without the animation) since we are going to render multiple cards inside a container with grids from Tailwind CSS. Here's the code:

import {users} from './users';

export const Card = () => {
  return (
    
      
        {users.map((user, idx) => (
          
            
              {user.badge}
            
            
            
              {user.name}
              {user.designation}
            
          
        ))}
      
    
  );
};

Here, we are giving a box shadow which I have taken from Box shadows for Tailwind CSS. Also we are giving it a background of #22222. In tailwind, we can use arbitrary values using the [] notation. For example, we have given the class bg-[#22222] for the background.

We are also using a users array to render out a list of users. The user array looks something like this:

export const users = [
  {
    name: 'Manu Arora',
    designation: 'Founder, Algochurn',
    image: 'https://picsum.photos/id/10/300/300',
    badge: 'Mentor',
  },
  {
    name: 'Sarah Singh',
    designation: "Founder, Sarah's Kitchen",
    image: 'https://picsum.photos/id/11/300/300',
    badge: 'Mentor',
  },
  // Rest of the users...
];

Here, we are rendering out the user's name, designation, image, and badge.

Now we're done with the basic cards and header design, so we can move on to animating these using Framer Motion.

How to Add the Animation Functions

Framer Motion provides helpful functions that you can use to animate anything on a webpage. Some of the use cases of these animations might be:

Animate when the user drags and drops
Animate when the user scrolls
Animate when the user clicks or hovers
Animate on page load

In this demo, we want to animate on scroll. For that, we can use the useScroll() function provided by Framer Motion.

To animate using scroll, we are going to:

Get scrollYProgress from useScroll() method
Use the useTransform hook to transform scrollYProgress values
Use the transformed values to animate our cards.

Let's take a look at the code snippet for the same:

import { useScroll, useTransform, motion } from 'framer-motion';

import { users } from './users';

export const Scroll = () => {
  return (
    
      
    
  );
};
export const ScrollCore = () => {
  const { scrollYProgress } = useScroll();

  const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
  const scale = useTransform(scrollYProgress, [0, 1], [1.05, 1]);
  const translate = useTransform(scrollYProgress, [0, 1], [0, -100]);

  return (
    
      
        
        
      
    
  );
};
// rest of the code

Let's break down what's happening in the code:

We are using the scrollYProgress value from the useScroll() function. This scrollYProgress is a motion value which we can use with motion.div from Framer Motion to animate various CSS properties. The CSS properties we are going to animate are rotate, scale and translate.

We combine these scrollYProgress values with another hook from framer-motion which is useTransform.

The useTransform hook is responsible from converting one value to another. For example, if we want to rotate the card from 45 degrees to 90 degrees when the user scrolls from the top of the page to bottom of the page, we could use something like this:

 const rotate = useTransform(scrollYProgress, [0, 1], [45, 90]);

This rotate value can now be passed to the style tag of a motion.div element. Remember that a regular a div cannot be used here since rotate is a MOTION VALUE and should be used with a motion.div element.

Similarly, we are going to add all the values for rotate, scale and translate like this:

const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
const scale = useTransform(scrollYProgress, [0, 1], [1.05, 1]);
const translate = useTransform(scrollYProgress, [0, 1], [0, -100]);

Here:

When a user scrolls from top to bottom (0 is starting, 1 is ending, meaning the user has scrolled from top to bottom), we want to rotate the card from 20 degrees to 0 degrees. But here's a catch: we also specify the perspective property and set it to 800px so that it gives a 3D effect.
We want the scale to go from 1.05 to 1 when the user scrolls.
And finally we want to translate the cards from 0 to -100 px in the Y direction (later on how we are going to animate the Y direction).

Now that we have all the animations setup, we just need to pass these values to the components' style tags and get the animations working.

How to Add the Animations

We saw earlier how we use the useScroll() hook to get scroll progress and get the rotate, scale and translate values (these values are called motion values, because they can only be used with a motion.div block). Now it's time to actually use these values within our component.

We can do this by passing down the rotate, scale and translate values to the Header and Card component and using them in their respective style tags.

Let's have a look at the code snippet to understand it better:

import { useScroll, useTransform, motion } from 'framer-motion';

import { users } from './users';

export const Scroll = () => {
  return (
    
      
    
  );
};
export const ScrollCore = () => {
  const { scrollYProgress } = useScroll();

  const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
  const scale = useTransform(scrollYProgress, [0, 1], [1.05, 1]);
  const translate = useTransform(scrollYProgress, [0, 1], [0, -100]);

  return (
    
      
        
        
      
    
  );
};
// rest of the code

Here, we are passing down the translate, rotate, and scale values inside the components:

For Header, we only want to translate the text from bottom to top a bit (sort of giving a parallax effect)
For Card, we want to do a bit more with rotation and translation.

Here's the code for the Header component:

export const Header = ({ translate }: any) => {
  return (
    
      
        Unleash the power of 
{' '}
        
          Scroll Animations
        
      
    
  );
};

Here, we converted the div to motion.div so that it can accept motion values.

We also animated the translateY property given by Framer Motion and added the translate value. Remember, translate goes from 0 to -100.

And that is it to animate the text. Essentially for the Header component, we have written just three lines of code to animate it. Pretty cool, huh?

Here's the code for the Card component:

export const Card = ({
  rotate,
  scale,
  translate,
}: {
  rotate: any;
  scale: any;
  translate: any;
}) => {
  return (
    
      
        {users.map((user, idx) => (
          
            
              {user.badge}
            
            
            
              {user.name}
              {user.designation}
            
          
        ))}
      
    
  );
};

This is the same code as before with just one difference: the div is now converted to a motion.div to accept values wherever required. Here, we want the cards inside of the container to translate, and the entire card itself to rotate.

From the code above, let's look at this part closely:


    // rest of the code...

Here, we want to:

rotateX so that it goes from giving an illusion of lying flat on the screen to standing straight. (Remember, as the user scrolls, the value goes from 20deg to 0deg.)
The scale of the container (or the frame) is also animated to go from 1.05 to 1.

Let's look at the cards inside this frame now:

{users.map((user, idx) => (
          
            
              {user.badge}
            
            
            
              {user.name}
              {user.designation}
            
          
        ))}

Here, the translateY property is animated and the div is converted to a motion.div.

And that's it. That's all it takes to animate on scroll using Framer Motion.

Conclusion

In this tutorial, you learned how to animate using Framer Motion. Essentially, we looked at two core functions:

useScroll()
useTransform()

There are other functions you can use which can help you achieve your animation goals. But I believe Framer Motion is a really simple animation API to work with, given its intuitive functions and ease of use.

Here's the complete source code for the demo.

I've created various other demos like this Parallax Effect Using Tailwind CSS and Framer Motion which essentially uses the same pattern that we discussed in this guide.

If you liked this demo and want me to create more of these cool Tailwind CSS and Framer motion components, let me know on Twitter and I'd be more than happy to work on it. :)

Happy coding ✨

tailwind - freeCodeCamp.org

How to Use Flex in Tailwind CSS and Justify Flex Items

Table of Contents

Prerequisites

What is Flexbox?

How Tailwind CSS Makes Flexbox Easy to Use

How to Use Flex in Tailwind

Flex Item Sizing: Basis, Grow, & Shrink

flex-basis

flex-grow

flex-shrink

Controlling Flex Direction

flex-row

flex-row-reverse

flex-col

flex-col-reverse

Responsive Control

Fine-Tuning Flexbox Layout

flex-wrap

flex-order

gap

Responsive Design

How to Justify and Align Flex Items in Tailwind

justify-content

Align Items

Practice Flexbox with Interactive Games

Flexbox Froggy

Flexbox Adventure (Coding Fantasy)

Conclusion

How to Integrate Tailwind with Django – With Code Examples

Table of Contents

A Quick Overview of Django

What is Tailwind CSS?

Why Django and Tailwind Work So Well Together?

How to Initialize a Django Project?

How to Integrate Tailwind CSS with Django?

Let’s Create a Chat Bubble app.

How to Use Prettier for Class Formatting?

Result:

How to Create a Chat Bubble Using FlyonUI Tailwind Components and Django

Result:

Conclusion

How to Build a Counter Button with React, TailwindCSS, and TypeScript

Prerequisites

Table of Contents

Chapter 1: How to Build the Counter Button

What is React?

Project setup

Remove boilerplate

Writing our first component

Styling our first component with Tailwind

Wait, but what is Tailwind?

How to add state

How to Evaluate JavaScript within JSX

Event handling

How to Pass an Event Handler as a Prop to Your JSX

Our working project

Chapter 2: How to Refactor the Project

Moving our component to another file

Fix the useState import error

Importing and Exporting Components

React Counter Button

Chapter 3: Two Components with Independent and Shared State

Two Components with Independent State

Two Components with Shared State

Passing Props Down to a Component

Read Props in Your Child Component

Tiny Crash Course in TypeScript

Chapter 4: How to Add Both Pairs of Buttons to Our Site

Chapter 5: How to Deploy the Site to Netlify

Publish to GitHub

Deploy to Netlify

Concluding Thoughts and Next Steps

How to Build a Login Page with the Material Tailwind Framework – Step by Step Guide

Table of Contents

1. Introduction to Tailwind CSS and Material Tailwind

What is Tailwind CSS?

What is Material Tailwind?

2. How to Set Up Your Development Environment

Install Node.js and npm

Fix the `useState` import error