Nefe James Nefe is a frontend developer who enjoys learning new things and sharing his knowledge with others.

Styling Remix applications with Tailwind CSS

3 min read 1053

Introduction

Remix is a full stack framework for building React applications. It was made by the creators of React Router and is one of the hottest frameworks of the moment, having already gained 11k stars on GitHub.

Remix provides a unique approach to building applications, and provides several useful features such as server-side rendering, file-system-based routing, TypeScript support, built-in support for cookies and sessions, and more. Remix was initially released as a paid product but was recently made open source.

Tailwind CSS is a utility-first framework that has grown in popularity over the years. It comes packed with several useful utility classes, JIT mode, scroll snap API, and more that enable developers to quickly ship frontend user interfaces.

Tailwind CSS has the benefits of inline-style collocation for developer ergonomics and generates a CSS file for Remix to import. The generated CSS output is usually around 8-10kb, even for large applications.

In this article, we will learn how to set up and style a Remix application with Tailwind CSS.

Setting up a new Remix application

To set up a new Remix application, we have to use a tool called create-remix.

Run the command below in your terminal to get started:

npx [email protected]

The command above triggers a CLI where we can configure the application.

The images below show the configuration options the CLI provides:

Remix setup on IDE reading "where would you like to create your app?"

We made a custom demo for .
No really. Click here to check it out.

Remix setup on IDE asking "where do you want to deploy?"

Remix setup on IDE reading "TypeScript or JavaScript?"

Remix IDE setup reading "Do you want me to run npm install?"

That’s about it! Let’s add Tailwind CSS to the application next.

Integrating Tailwind CSS with Remix

We need to follow the steps below to integrate Tailwind into our application:

First, run the command below to install Tailwind CSS:

npm add -D concurrently tailwindcss

Next, we need to initialize Tailwind and create the tailwind.config.js file in the root of our application:

npx tailwindcss init

Now we can update the tailwind.config.js file. We add the paths to all of our template files there:

module.exports = {
  content: ["./app/**/*.{ts,tsx,jsx,js}"], //paths added to config
  theme: {
    extend: {},
  },
  variants: {},
  plugins: []
};

Next we will update the scripts in the package.json file, like so:

"scripts": {
    // ...
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -o ./app/tailwind.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -o ./app/tailwind.css --watch",
    // ...
},

With the changes we have made to the scripts, starting our dev server will generate a tailwind.css file.

Finally, link the generated stylesheet with our app:

import { Links, LiveReload, Outlet, Scripts, ScrollRestoration } from "remix";

import styles from "./tailwind.css";

export function links() {
  return [{ rel: "stylesheet", href: styles }];
}

export default function App() {
  return (
    <html lang="en">
      <head>
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        {process.env.NODE_ENV === "development" && <LiveReload />}
      </body>
    </html>
  );
}

We import the styles from the tailwind.css file that was generated into our app/root.jsx file.

Remix has a unique approach for linking stylesheets and other external resources; we create and export a links function into the page we want the styles to be applied. In this case, we want to use the Tailwind styles throughout our applications. Remix loads the links in the background using this custom links component.

With that, we have successfully added Tailwind CSS into the application. Let’s use it to style some components next.

Styling a contact form in Remix with Tailwind CSS

Let’s set up a basic contact form that we will style later:

export default function Home() {
  return (
    <section> 
      <form>
        <h4>A Remix form not styled with Tailwind</h4>
        <div>
          <input type="text" placeholder="First Name" />
          <input type="text" placeholder="Last Name" />
          <input type="email" placeholder="Email" />
          <textarea
            cols="5"
            rows="2"
            placeholder="Write your message..."
          ></textarea>
        </div>
        <button type="submit">Submit</button>
      </form>
    </section>
  );
}

In this code block, we set up a section element and put a form inside it. The form contains an h4 heading and a div, where we put the input, textarea, and button elements.

The image below shows how the form looks without any applied styles:

Unstyled remix form

Now, we apply Tailwind’s utility classes to the form:

export default function Home() {
  return (
    <section className="container mx-auto my-20 md:w-1/3 p-5 border border-blue-700 rounded-lg">
      <form className="space-y-10">
        <h4 className="text-center text-3xl text-blue-700">
          A Remix form styled with Tailwind
        </h4>
        <div className="grid grid-cols-2 gap-5">
          <input
            type="text"
            className="border border-gray-700 px-4 py-3 focus:outline-none focus:border-blue-700 rounded-lg"
            placeholder="First Name"
          />
          <input
            type="text"
            className="border border-gray-700 px-4 py-3 focus:outline-none focus:border-blue-700 rounded-lg"
            placeholder="Last Name"
          />
          <input
            type="email"
            className="border border-gray-700 px-4 py-3 focus:outline-none focus:border-blue-700 col-span-2 rounded-lg"
            placeholder="Email"
          />
          <textarea
            cols="5"
            rows="2"
            className="border border-gray-700 px-4 py-2 focus:outline-none focus:border-blue-700 col-span-2 rounded-lg"
            placeholder="Write your message..."
          ></textarea>
        </div>
        <button
          type="submit"
          className="focus:outline-none mt-5 bg-blue-700 px-4 py-3 text-white w-full text-lg rounded-lg"
        >
          Submit
        </button>
      </form>
    </section>
  );
}

Let’s break down the classes we added to the elements:

In the section element, the container class sets the max-width of the section to the minimum width of the current breakpoint, while mx-auto centers it. md:w-1/3 sets the width to 33.333% of its container.

In the form element, space-y-10 adds a top margin of 2.5rem to the form.

Div is the container div where the input elements sit. We set it to display a grid by giving it a grid class. grid-cols-2 defines how many columns the grid will have, and gap-5 adds spacing between the grid columns.

border-gray-700 gives the input class a dark gray border and rounded-lg adds a border radius.

For the button class, text-white sets the text color to white, and bg-blue-700 changes the background color of the button to a dark blue shade.

Here’s what our form looks like after this styling has been applied:

Remix form styled with Tailwind CSS

Conclusion

Integrating Tailwind in a Remix application is straightforward. Combining Remix’s unique approach to building web applications with Tailwind opens the door to new possibilities in web development.

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — .

Nefe James Nefe is a frontend developer who enjoys learning new things and sharing his knowledge with others.

One Reply to “Styling Remix applications with Tailwind CSS”

Leave a Reply