remix-run · kentcdodds · May 10, 2022 · May 7, 2022 · May 7, 2022 · May 7, 2022
diff --git a/contributors.yml b/contributors.yml
@@ -251,6 +251,7 @@
 - na2hiro
 - nareshbhatia
 - navid-kalaei
+- nexxeln
 - nicholaschiang
 - niconiahi
 - nielsdb97

diff --git a/examples/twind/.eslintrc.js b/examples/twind/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+};
diff --git a/examples/twind/.gitignore b/examples/twind/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
diff --git a/examples/twind/README.md b/examples/twind/README.md
@@ -0,0 +1,26 @@
+# Twind Example
+
+Integrate Twind with Remix
+
+## Preview
+
+Open this example on [CodeSandbox](https://codesandbox.com):
+
+[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/remix-run/remix/tree/main/examples/twind)
+
+## Example
+
+This example shows how to use Twind in Remix. Twind is a small compiler (~13kB) that converts Tailwind utility classes into CSS at runtime.
+
+Relevant files:
+
+- [app/twind.ts](./app/twind.ts) where a set up function has been exported.
+- [app/entry.client.tsx](./app/entry.client.tsx) where the set up function has been used.
+- [app/entry.server.tsx](./app/entry.server.tsx) where the twind styles have been added to the markup.
+- [remix.config.js](./remix.config.js) where the twind modules have been added to [`serverDependenciesToBundle`](https://remix.run/docs/en/v1/api/conventions#serverdependenciestobundle).
+- [app/root.tsx](./app/root.tsx), [app/routes/index.tsx](./app/routes/index.tsx), [app/routes/anything.tsx](./app/routes/anything.tsx) where some basic styling has been demonstrated.
+
+
+## Related Links
+
+[Twind](https://twind.dev/)
diff --git a/examples/twind/app/entry.client.tsx b/examples/twind/app/entry.client.tsx
@@ -0,0 +1,7 @@
+import { RemixBrowser } from "@remix-run/react";
+import { hydrate } from "react-dom";
+
+import { setupTwind } from "./twind";
+
+setupTwind();
+hydrate(<RemixBrowser />, document);
diff --git a/examples/twind/app/entry.server.tsx b/examples/twind/app/entry.server.tsx
@@ -0,0 +1,29 @@
+import { renderToString } from "react-dom/server";
+import type { EntryContext } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react" ;
+import { inline } from "twind";
+
+import { setupTwind } from "./twind";
+
+setupTwind();
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  let markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />,
+  );
+
+  // Add the twind styles to the markup
+  markup = inline(markup);
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  });
+}
diff --git a/examples/twind/app/root.tsx b/examples/twind/app/root.tsx
@@ -0,0 +1,32 @@
+import type { MetaFunction } from "@remix-run/node";
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+export const meta: MetaFunction = () => ({
+  charset: "utf-8",
+  title: "Remix + Twind",
+  viewport: "width=device-width,initial-scale=1",
+});
+
+export default function App() {
+  return (
+    <html lang="en" className="bg-[#121212] text-slate-100">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
diff --git a/examples/twind/app/routes/anything.tsx b/examples/twind/app/routes/anything.tsx
@@ -0,0 +1,13 @@
+import { Link } from "@remix-run/react";
+
+const linkClass = "transition-all duration-300 opacity-75 hover:(opacity-100 text-blue-500)";
+
+export default function Index() {
+
+  return (
+    <main className="py-16 px-4 max-w-screen-md mx-auto w-full">
+      <h1 className="text-4xl font-light mb-6">This works</h1>
+      <Link to="/" className={linkClass}>Back to Home</Link>
+    </main>
+  );
+}
diff --git a/examples/twind/app/routes/index.tsx b/examples/twind/app/routes/index.tsx
@@ -0,0 +1,47 @@
+import { Link } from "@remix-run/react";
+
+const linkClass = "transition-all duration-300 opacity-75 hover:(opacity-100 text-blue-500)";
+
+export default function Index() {
+  const links = [
+    {
+      href: "https://remix.run/tutorials/blog",
+      text: "15m Quickstart Blog Tutorial",
+    },
+    {
+      href: "https://remix.run/tutorials/jokes",
+      text: "Deep Dive Jokes App Tutorial",
+    },
+    {
+      href: "https://remix.run/docs",
+      text: "Remix Docs",
+    },
+    {
+      href: "https://twind.dev/",
+      text: "Twind Docs",
+    },
+  ];
+
+  return (
+    <main className="py-16 px-4 max-w-screen-md mx-auto w-full">
+      <h1 className="text-4xl font-light mb-6">Welcome to Remix + Twind 💿🚀</h1>
+      <ul className="list-disc grid gap-2">
+        {links.map((link) => (
+          <li key={link.href}>
+            <a
+              href={link.href}
+              className={linkClass}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {link.text}
+            </a>
+          </li>
+        ))}
+        <li>
+            <Link to="/anything" className={linkClass}>Some other route</Link>
+        </li>
+      </ul>
+    </main>
+  );
+}
diff --git a/examples/twind/app/twind.ts b/examples/twind/app/twind.ts
@@ -0,0 +1,7 @@
+import { setup } from "@twind/tailwind";
+
+// Exporting a function to call setup() to avoid module side effects
+// https://remix.run/docs/en/v1/guides/constraints#no-module-side-effects
+export function setupTwind() {
+  setup()
+}
diff --git a/examples/twind/package.json b/examples/twind/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "remix-example-template",
+  "private": true,
+  "description": "",
+  "license": "",
+  "sideEffects": false,
+  "scripts": {
+    "build": "remix build",
+    "dev": "remix dev",
+    "start": "remix-serve build"
+  },
+  "dependencies": {
+    "@remix-run/node": "1.4.3",
+    "@remix-run/react": "1.4.3",
+    "@remix-run/serve": "1.4.3",
+    "@twind/tailwind": "^1.0.0-next.32",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "twind": "^1.0.0-next.32"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "1.4.3",
+    "@remix-run/eslint-config": "1.4.3",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.13",
+    "eslint": "^8.10.0",
+    "typescript": "^4.6.2"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}
diff --git a/examples/twind/public/favicon.ico b/examples/twind/public/favicon.ico
diff --git a/examples/twind/remix.config.js b/examples/twind/remix.config.js
@@ -0,0 +1,16 @@
+/**
+ * @type {import('@remix-run/dev').AppConfig}
+ */
+module.exports = {
+  ignoredRouteFiles: ["**/.*"],
+  appDirectory: "app",
+  assetsBuildDirectory: "public/build",
+  serverBuildPath: "build/index.js",
+  publicPath: "/build/",
+  serverDependenciesToBundle: [
+    "twind", 
+    "@twind/tailwind", 
+    "@twind/preset-autoprefix", 
+    "@twind/preset-tailwind",
+  ],
+};
diff --git a/examples/twind/remix.env.d.ts b/examples/twind/remix.env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/dev" />
+/// <reference types="@remix-run/node/globals" />
diff --git a/examples/twind/sandbox.config.json b/examples/twind/sandbox.config.json
@@ -0,0 +1,6 @@
+{
+  "hardReloadOnChange": true,
+  "container": {
+    "port": 3000
+  }
+}
diff --git a/examples/twind/tsconfig.json b/examples/twind/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "target": "ES2019",
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "noEmit": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowJs": true
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="@remix-run/dev" />
		/// <reference types="@remix-run/node/globals" />