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 is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. 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 — start monitoring for free.
Would you be interested in joining LogRocket's developer community?
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
Learn more →
Image component to optimize imagesExplore automatic image optimization using Next Image, the built-in image optimization solution for Next.js.
Discover how to integrate frontend AI tools for faster, more efficient development without sacrificing quality.
Is React Hook Form still worth using? In this guide, you will learn the differences, advantages, and best use cases of React Hook Form.
Walk through the process of deploying a Create React App project to GitHub Pages, customizing your domain, and automating deployments with GitHub Actions.
One Reply to "Styling Remix applications with Tailwind CSS"
how to purge it?