Wedges

Setting up Remix

To set up a new Remix project, run the following command in your terminal:

npx create-remix@latest my-remix-app
cd my-remix-app

More information can be found in the official Remix Documentation.

Install Wedges

pnpm add @lemonsqueezy/wedges

Install Tailwind CSS

By default, Remix does not include Tailwind CSS, so we'll need to do that manually.

More information can be found in the official Tailwind CSS installation guide.

Let's start by installing the Tailwind CSS:

pnpm add tailwindcss -D

Then run the init command to generate tailwind.config.ts file:

pnpm dlx tailwindcss init --ts

Configure Tailwind CSS

Update your tailwind.config.ts file to add the necessary configuration for Wedges:

import type { Config } from 'tailwindcss'
import { wedgesTW } from '@lemonsqueezy/wedges'
 
export default {
  content: [
    './app/**/*.{js,jsx,ts,tsx}',
    'node_modules/@lemonsqueezy/wedges/dist/**/*.{js,ts,jsx,tsx}'
],
  theme: {
    extend: {},
  },
  darkMode: 'class',
  plugins: [wedgesTW()],
} satisfies Config

Add the Directives

Create a ./app/tailwind.css file and add the @tailwind directives for each of Tailwind’s layers.

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

Import the CSS File

Import the newly-created tailwind.css file in your ./app/root.jsx file.

import stylesheet from "~/tailwind.css";
 
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: stylesheet },
];

Start the Dev Server

pnpm dev

All Done!

You can now start using the components in your application.

import { Alert } from "@lemonsqueezy/wedges";
 
export default function Index() {
  return <Alert>You're awesome!</Alert>;
}