Remix Starter

Prerequisites

This is the tech stack I use for my projects:

• Bun for command-line tools
• Remix for full-stack framework
• thailwindcss for styling
• shadcn/ui for basic UI components
• Cloudflare Pages for hosting
• Cloudflare for domain management and CDN

Exploring more tools.

Bun

Bun is a new JavaScript runtime built from scratch to serve the modern JavaScript ecosystem.

From Installation, I use curl command in my terminal to install Bun in MacOS:

curl -fsSL https://bun.sh/install | bash

Create Remix

Starting from version 2.7, Remix recommends using the Vite template to create a new Remix project.

bun create remix --template remix-run/remix/templates/vite

Add tailwindcss

TailwindCSS is a utility-first CSS framework, and I love it. Now, let’s add it to my Remix projects.

bun add -D tailwindcss postcss autoprefixer
bunx tailwindcss init --ts -p

add content: ["./app/**/*.{js,jsx,ts,tsx}"] to tailwind.config.ts.

create app/tailwind.css:

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

import tailwind into app/root.tsx:

import "~/tailwind.css";

create postcss.config.mjs:

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

Conclusions

This article shows you how to develop a quick template based on Remix from scratch and shares it with everyone. It’s really helpful for getting a project off the ground fast.

If you spot any mistakes in the article, or if you have any questions, don’t hesitate to drop me a message on Twitter.

I’m working on polishing my English writing. I’d be thankful if you could spot any parts that don’t quite match a native speaker’s touch. Just like this sentence.

Let’s stay connected.