Steez(e) – Zalgorithm

Adventures with Remix continued.

❗ This is not a tutorial ❗ Maybe it will inspire someone to mess around on the internet and see what they can pull off.

I’m going to try to add Tailwind to the app: https://remix.run/docs/en/main/styling/tailwind.

On my local computer:

npm install -D tailwindcss

Then create a tailwind initialization file:

npx tailwindcss init --ts

Edit the config file to tell it to generate classes for js, jsx, ts, tsx files in any children of the app directory:

import type { Config } from "tailwindcss";

export default {
  # this is the line that was edited
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

What does it mean to have Tailwind generate “classes”?

Include the @tailwind directives in a CSS file:

// app/tailwind.css

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

and add tailwind.css to app/root.tsx:

import type { LinksFunction } from "@remix-run/node";
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

import styles from "./tailwind.css";

export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

and some styles to test things out:

// app/routes/_index.tsx

import type { MetaFunction } from "@remix-run/node";

export const meta: MetaFunction = () => {
  return [
    { title: "Hello World!" },
    { name: "description", content: "Hello World!" },
  ];
};

export default function Index() {
  return (
    <div className="max-w-md mx-auto my-2">
      <h1 className="text-3xl">Hello World!</h1>
      <p className="my-1">
        This is a test, this is only a test.... Please do not adjust your set.
        Normal programming will resume shortly...
      </p>
      <p>Soon I promise...</p>
    </div>
  );
}

Theoretically, I should just have to push the changes to the server and rebuild the app.

git add .
git commit -m "Add some steeze"
git push live main

I’m running the app with pm2 (https://github.com/Unitech/pm2). If pm2 wasn’t being used, the Tailwind modules could be loaded with npm install, then rebuild the app with npm run build, then restart the app with npm start. (Or maybe stop the app first?)

In any case, with pm2, I ran:

npm install
npm run build

Then took a wild guess and ran:

pm2 reload

That returned:

error: missing required argument `id|name|namespace|all'

I guess for my case, pm2 reload all would have done the trick, but I took another guess and ran pm2 list:

│ id │ name         │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │
├────┼──────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0  │ npm start    │ default     │ N/A     │ fork    │ 30583    │ 2h     │ 0    │ online    │ 0%       │ 58.6mb   │ foo(me)  │ disabled

Then ran:

pm2 reload 0

# success!

Use --update-env to update environment variables
[PM2] Applying action reloadProcessId on app [0](ids: [ '0' ])
[PM2] [npm start](0) ✓

https://hello.zalgorithm.com/