The Replay is a weekly newsletter for dev and engineering leaders.
Delivered once a week, it's your curated guide to the most important conversations around frontend dev, emerging AI tools, and the state of modern software.
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.
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 create-remix@latest
The command above triggers a CLI where we can configure the application.
The images below show the configuration options the CLI provides:
That’s about it! Let’s add Tailwind CSS to the application next.
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.
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:
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:
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.
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.
LogRocket lets you replay user sessions, eliminating guesswork around why bugs happen by showing exactly what users experienced. It captures console logs, errors, network requests, and pixel-perfect DOM recordings — compatible with all frameworks.
LogRocket's Galileo AI watches sessions for you, instantly identifying and explaining user struggles with automated monitoring of your entire product experience.
Modernize how you debug web and mobile apps — start monitoring for free.
CI/CD isn’t optional anymore. Discover how automated builds and deployments prevent costly mistakes, speed up releases, and keep your software stable.
A quick comparison of five AI code review tools tested on the same codebase to see which ones truly catch bugs and surface real issues.
Learn more →
corner-shapeLearn about CSS’s corner-shape property and how to use it, as well as the more advanced side of border-radius and why it’s crucial to using corner-shape effectively.
An AI reality check, Prisma v7, and “caveman compression”: discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the November 26th issue.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
One Reply to "Styling Remix applications with Tailwind CSS"
how to purge it?