├── .eslintrc.cjs
├── .gitattributes
├── .gitignore
├── README.md
├── app
├── entry.client.tsx
├── entry.server.tsx
├── root.tsx
├── routes
│ └── _index.tsx
└── tailwind.css
├── package-lock.json
├── package.json
├── public
└── favicon.ico
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | /**
2 | * This is intended to be a basic starting point for linting in your app.
3 | * It relies on recommended configs out of the box for simplicity, but you can
4 | * and should modify this configuration to best suit your team's needs.
5 | */
6 |
7 | /** @type {import('eslint').Linter.Config} */
8 | module.exports = {
9 | root: true,
10 | parserOptions: {
11 | ecmaVersion: "latest",
12 | sourceType: "module",
13 | ecmaFeatures: {
14 | jsx: true,
15 | },
16 | },
17 | env: {
18 | browser: true,
19 | commonjs: true,
20 | es6: true,
21 | },
22 |
23 | // Base config
24 | extends: ["eslint:recommended"],
25 |
26 | overrides: [
27 | // React
28 | {
29 | files: ["**/*.{js,jsx,ts,tsx}"],
30 | plugins: ["react", "jsx-a11y"],
31 | extends: [
32 | "plugin:react/recommended",
33 | "plugin:react/jsx-runtime",
34 | "plugin:react-hooks/recommended",
35 | "plugin:jsx-a11y/recommended",
36 | ],
37 | settings: {
38 | react: {
39 | version: "detect",
40 | },
41 | formComponents: ["Form"],
42 | linkComponents: [
43 | { name: "Link", linkAttribute: "to" },
44 | { name: "NavLink", linkAttribute: "to" },
45 | ],
46 | "import/resolver": {
47 | typescript: {},
48 | },
49 | },
50 | },
51 |
52 | // Typescript
53 | {
54 | files: ["**/*.{ts,tsx}"],
55 | plugins: ["@typescript-eslint", "import"],
56 | parser: "@typescript-eslint/parser",
57 | settings: {
58 | "import/internal-regex": "^~/",
59 | "import/resolver": {
60 | node: {
61 | extensions: [".ts", ".tsx"],
62 | },
63 | typescript: {
64 | alwaysTryTypes: true,
65 | },
66 | },
67 | },
68 | extends: [
69 | "plugin:@typescript-eslint/recommended",
70 | "plugin:import/recommended",
71 | "plugin:import/typescript",
72 | ],
73 | },
74 |
75 | // Node
76 | {
77 | files: [".eslintrc.cjs"],
78 | env: {
79 | node: true,
80 | },
81 | },
82 | ],
83 | };
84 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /.cache
4 | /build
5 | .env
6 | .DS_Store
7 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Remix + Vite + Tailwind v4 + Open Props!
2 |
3 | I'm sharing my local sandbox for integrating Open Props and Tailwind v4 in this [tailwind.css](https://github.com/argyleink/twop/blob/main/app/tailwind.css) file.
4 |
5 |
6 |
7 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/future/vite) for details on supported features.
8 |
9 | ## Development
10 |
11 | Run the Vite dev server:
12 |
13 | ```shellscript
14 | npm run dev
15 | ```
16 |
17 | ## Deployment
18 |
19 | First, build your app for production:
20 |
21 | ```sh
22 | npm run build
23 | ```
24 |
25 | Then run the app in production mode:
26 |
27 | ```sh
28 | npm start
29 | ```
30 |
31 | Now you'll need to pick a host to deploy it to.
32 |
33 | ### DIY
34 |
35 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
36 |
37 | Make sure to deploy the output of `npm run build`
38 |
39 | - `build/server`
40 | - `build/client`
41 |
--------------------------------------------------------------------------------
/app/entry.client.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * By default, Remix will handle hydrating your app on the client for you.
3 | * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
4 | * For more information, see https://remix.run/file-conventions/entry.client
5 | */
6 |
7 | import { RemixBrowser } from "@remix-run/react";
8 | import { startTransition, StrictMode } from "react";
9 | import { hydrateRoot } from "react-dom/client";
10 |
11 | startTransition(() => {
12 | hydrateRoot(
13 | document,
14 |
15 |
16 |
17 | );
18 | });
19 |
--------------------------------------------------------------------------------
/app/entry.server.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * By default, Remix will handle generating the HTTP Response for you.
3 | * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
4 | * For more information, see https://remix.run/file-conventions/entry.server
5 | */
6 |
7 | import { PassThrough } from "node:stream";
8 |
9 | import type { AppLoadContext, EntryContext } from "@remix-run/node";
10 | import { createReadableStreamFromReadable } from "@remix-run/node";
11 | import { RemixServer } from "@remix-run/react";
12 | import { isbot } from "isbot";
13 | import { renderToPipeableStream } from "react-dom/server";
14 |
15 | const ABORT_DELAY = 5_000;
16 |
17 | export default function handleRequest(
18 | request: Request,
19 | responseStatusCode: number,
20 | responseHeaders: Headers,
21 | remixContext: EntryContext,
22 | // This is ignored so we can keep it in the template for visibility. Feel
23 | // free to delete this parameter in your app if you're not using it!
24 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
25 | loadContext: AppLoadContext
26 | ) {
27 | return isbot(request.headers.get("user-agent") || "")
28 | ? handleBotRequest(
29 | request,
30 | responseStatusCode,
31 | responseHeaders,
32 | remixContext
33 | )
34 | : handleBrowserRequest(
35 | request,
36 | responseStatusCode,
37 | responseHeaders,
38 | remixContext
39 | );
40 | }
41 |
42 | function handleBotRequest(
43 | request: Request,
44 | responseStatusCode: number,
45 | responseHeaders: Headers,
46 | remixContext: EntryContext
47 | ) {
48 | return new Promise((resolve, reject) => {
49 | let shellRendered = false;
50 | const { pipe, abort } = renderToPipeableStream(
51 | ,
56 | {
57 | onAllReady() {
58 | shellRendered = true;
59 | const body = new PassThrough();
60 | const stream = createReadableStreamFromReadable(body);
61 |
62 | responseHeaders.set("Content-Type", "text/html");
63 |
64 | resolve(
65 | new Response(stream, {
66 | headers: responseHeaders,
67 | status: responseStatusCode,
68 | })
69 | );
70 |
71 | pipe(body);
72 | },
73 | onShellError(error: unknown) {
74 | reject(error);
75 | },
76 | onError(error: unknown) {
77 | responseStatusCode = 500;
78 | // Log streaming rendering errors from inside the shell. Don't log
79 | // errors encountered during initial shell rendering since they'll
80 | // reject and get logged in handleDocumentRequest.
81 | if (shellRendered) {
82 | console.error(error);
83 | }
84 | },
85 | }
86 | );
87 |
88 | setTimeout(abort, ABORT_DELAY);
89 | });
90 | }
91 |
92 | function handleBrowserRequest(
93 | request: Request,
94 | responseStatusCode: number,
95 | responseHeaders: Headers,
96 | remixContext: EntryContext
97 | ) {
98 | return new Promise((resolve, reject) => {
99 | let shellRendered = false;
100 | const { pipe, abort } = renderToPipeableStream(
101 | ,
106 | {
107 | onShellReady() {
108 | shellRendered = true;
109 | const body = new PassThrough();
110 | const stream = createReadableStreamFromReadable(body);
111 |
112 | responseHeaders.set("Content-Type", "text/html");
113 |
114 | resolve(
115 | new Response(stream, {
116 | headers: responseHeaders,
117 | status: responseStatusCode,
118 | })
119 | );
120 |
121 | pipe(body);
122 | },
123 | onShellError(error: unknown) {
124 | reject(error);
125 | },
126 | onError(error: unknown) {
127 | responseStatusCode = 500;
128 | // Log streaming rendering errors from inside the shell. Don't log
129 | // errors encountered during initial shell rendering since they'll
130 | // reject and get logged in handleDocumentRequest.
131 | if (shellRendered) {
132 | console.error(error);
133 | }
134 | },
135 | }
136 | );
137 |
138 | setTimeout(abort, ABORT_DELAY);
139 | });
140 | }
141 |
--------------------------------------------------------------------------------
/app/root.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Links,
3 | Meta,
4 | Outlet,
5 | Scripts,
6 | ScrollRestoration,
7 | } from "@remix-run/react";
8 |
9 | import stylesheet from "~/tailwind.css";
10 |
11 | export const links: LinksFunction = () => [
12 | { rel: "stylesheet", href: stylesheet },
13 | ];
14 |
15 | export function Layout({ children }: { children: React.ReactNode }) {
16 | return (
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | {children}
26 |
27 |
28 |
29 |
30 | );
31 | }
32 |
33 | export default function App() {
34 | return ;
35 | }
36 |
--------------------------------------------------------------------------------
/app/routes/_index.tsx:
--------------------------------------------------------------------------------
1 | import type { MetaFunction } from "@remix-run/node";
2 |
3 | export const meta: MetaFunction = () => {
4 | return [
5 | { title: "New TWOP App" },
6 | { name: "description", content: "Welcome to Remix!" },
7 | ];
8 | };
9 |
10 | export default function Index() {
11 | return (
12 |
13 |
14 |
15 | Remix | Tailwind | Open Props
16 | TWOP
17 |
18 |
50 |
51 |