The root.tsx file in Remix

The Remix root.tsx file

This tutorial will guide you through updating the user interface (UI) in one of the most important files of a Remix project: the root.tsx file.

We’ll start with the basics, so don’t worry if you’re not familiar with these technologies yet. Let’s dive in!

Getting Started

Before we begin, ensure you have npm (Node Package Manager) installed on your system as it’s essential for running our project server and managing our dependencies.

1. Start the Server

First, we need to start our development server. Open your terminal, navigate to your project directory, and run:

Running the server with npm

npm run dev

This command starts a local development server. Once it is up and running, you can view your project in a web browser by going to http://localhost:3000:

2. Locate the app/root.tsx file

The root.tsx file is located in the app directory of your project.

Note

File Path Conventions

It is convention to write the path to a file starting from the root of the project. Each folder - or directory - is separated by a /.

In this case, the, because the root.tsx file is inside the app folder, the path to the root.tsx file is written as app/root.tsx.

Look carefully through the project structure to find it in the VS Code file explorer (or your own code editor):

3. Open and update root.tsx

What is the root.tsx file?

The root.tsx file in a Remix project serves as the entry point for your application’s user interface. It renders the initial HTML structure of your project, and provides the foundation for the rest of your application’s components and pages to be displayed.

Think of it as the starting point where all the UI elements come together and get rendered on the screen.

At the moment, it doesn’t seem all that impressive, but we’ll change that soon!

Updating the text

To change the existing text, locate the <h1> tag inside the App function of your root.tsx file:

app/root.tsx

import { type LinksFunction } from '@remix-run/node'
import Document from '~/components/shared-layout/Document'
import { useNonce } from '~/utils/nonce-provider.ts'
import rootLinkElements from '~/utils/providers/rootLinkElements'

export const links: LinksFunction = () => {
  return rootLinkElements
}
export { headers, meta } from './__root.client.tsx'
export { action, loader } from './__root.server.tsx'

export default function App() {
  const nonce = useNonce()

  return (
    <Document nonce={nonce}>
      <div className="flex h-screen flex-col justify-between">
        <div className="flex-1">
          <main className="grid h-full place-items-center">
            <h1 className="text-mega">Welcome to Epic News!</h1>
          </main>
        </div>
      </div>
    </Document>
  )
}

Change "Welcome to Epic News!" to any message you like, such as Your Journey Begins!.

app/root.tsx

<h1 className="text-mega">Your Journey Begins!</h1>

Save the file and your browser should automatically refresh, displaying the new message.

3. Add a New Element to the Page

Let’s add a new paragraph (<p>) element below the <h1> tag. This will demonstrate how to insert new content into your page.

app/root.tsx

<main className="grid h-full place-items-center">
  <h1 className="text-mega">Your Journey Begins!</h1>
  <p>Welcome to Epic News, where the latest developments in tech are found.</p>
</main>

4. Style the New Element Using Tailwind Classes

To style the paragraph, we’ll use TailwindCSS, a utility-first CSS framework. If you’re not familiar with Tailwind, it lets you style elements by adding class names directly in your HTML (or JSX in this case).

app/root.tsx

<p className="text-base text-gray-600">
  Welcome to Epic News, where the latest developments in tech are found.
</p>

5. Make the New Element Responsive

Tailwind makes creating responsive designs straightforward. To demonstrate, let’s make the font size of our paragraph larger on medium (md) and large (lg) screens.

app/root.tsx

<p className="text-base text-gray-600 md:text-lg lg:text-xl">
  Welcome to Epic News, where the latest developments in tech are found.
</p>

Note

Responsive Design

In web design, responsive design is an approach that makes web pages render well on a variety of devices and window or screen sizes.

Traditionally, responsive design is achieved using media queries in CSS. For example, let’s say we have a class called element, that should have a blue background:

.element {
  background-color: blue;
}

Now, let’s say that on devices that are at least 768px wide, we want the .element class to have a red background instead. We can use a media query to achieve this:

/* When the browser is at least 768px and above */
@media screen and (min-width: 768px) {
  .element {
    background-color: red;
  }
}

Now, as soon at the page width (or the viewport) reaches 768px, the background colour will turn red.

This is a simple example, but it shows how we can use media queries to make our design responsive.

Tailwind’s Responsive Design prefixes

In Tailwind, md: and lg: are prefixes that make writing responsive styles much simpler.

Rather than writing full media-queries, we just apply classes at specific given breakpoints, allowing for mobile-first designs.

app/root.tsx

<p className="text-base text-gray-600 md:text-lg lg:text-xl">
  Welcome to Epic News, where the latest developments in tech are found.
</p>

In this example, the text size will be lg (large) on screens that are at least 1024px wide, and xl (extra large) on screens that are at least 1280px wide.

Try making your browser window wider and narrower. Notice how the text size changes according to the width of your viewport.

Challenge

Code Challenges

Now that you’ve seen how to update the UI, try these challenges to practice your new skills:

1. Change the Background Color: Update the background color of the <div> that wraps the <main> tag.
2. Add a Button: Insert a button below the paragraph with the text “Learn More”. Style it with Tailwind to look appealing.
3. Make the Button Responsive: Adjust the size and padding of the button for small and large screens.

---

Hints

• Remember, start with mobile-first designs in mind and then scale up to larger screens.
• Use the Tailwind CSS docs to learn how to use their classes. Below are a few key guides to get you started with the challenges above:
  • https://tailwindcss.com/docs/background-color
  • https://tailwindcss.com/docs/text-color
  • https://tailwindcss.com/docs/padding
  • https://tailwindcss.com/docs/border-radius
  • https://tailwindcss.com/docs/box-shadow

---

Extra Credit 🚀🚀

1. Create a series of UI ‘Pills’ - small elements that show the status of something like this:

​Tailwind focus: text colour, background colour, padding, border colour, border radius

---

2. Team member card component

Create a card component for a team member that includes:

• A circular image at the top (use placeholders if needed).
• A title and a short description.
• Buttons for their Twitter/X and LinkedIn profiles.

Tailwind Focus: image positioning, object cover, padding, margins, border radius, background colour

3. Use your card component to create the ‘Meet our team’ section below:

There are actually lots of ways you could complete these challenges. Below are a few.

---

1. Change the Background Color

app/root.tsx

<div class="flex h-screen flex-col justify-between bg-blue-100">

2. Add a Button

app/root.tsx

<button class="px-4 py-2 bg-blue-500 text-white rounded-md">
  Learn More
</button>

3. Make the Button Responsive

app/root.tsx

<button class="px-4 py-2 md:px-6 md:py-3 lg:px-8 lg:py-4 bg-blue-500 text-white rounded-md">
  Learn More
</button>

Click to reveal

Congratulations! 🥳

You’ve just updated your first Remix UI, added elements, styled them, and made them responsive with Tailwind.

Keep experimenting with different elements and styles to further enhance your page.