Integrate Tailwind CSS

apps/homeschool/app/layout.tsx

@@ -1,3 +1,5 @@
+import "tailwind-config/global.css";
+
 export default function RootLayout({
   children,
 }: {

apps/homeschool/package.json

@@ -20,6 +20,7 @@
     "@types/react-dom": "^18.0.7",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",
+    "tailwind-config": "workspace:*",
     "typescript": "^4.5.3"
   }
-}
+}

apps/homeschool/postcss.config.js

@@ -0,0 +1 @@
+module.exports = require("tailwind-config/postcss.config.js");

apps/homeschool/tailwind.config.js

@@ -0,0 +1 @@
+module.exports = require("tailwind-config/tailwind.config.js");

apps/homeschooling/app/root.tsx

@@ -1,4 +1,3 @@
-import { cssBundleHref } from "@remix-run/css-bundle";
 import type { LinksFunction } from "@remix-run/node";
 import {
   Links,
@@ -8,9 +7,10 @@ import {
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
+import stylesheet from "tailwind-config/global.css";
 
 export const links: LinksFunction = () => [
-  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
+  { rel: "stylesheet", href: stylesheet },
 ];
 
 export default function App() {

apps/homeschooling/app/routes/_index.tsx

@@ -10,7 +10,7 @@ export const meta: V2_MetaFunction = () => {
 export default function Index() {
   return (
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
-      <h1>Welcome to Remix</h1>
+      <h1 className="text-red-600">Welcome to Remix</h1>
       <ul>
         <li>
           <a

apps/homeschooling/package.json

@@ -27,9 +27,10 @@
     "@types/source-map-support": "^0.5.6",
     "eslint": "^8.38.0",
     "eslint-config-custom": "workspace:*",
+    "tailwind-config": "workspace:*",
     "typescript": "^5.0.4"
   },
   "engines": {
     "node": ">=18.0.0"
   }
-}
+}

apps/homeschooling/postcss.config.js

@@ -0,0 +1 @@
+module.exports = require("tailwind-config/postcss.config.js");

apps/homeschooling/remix.config.js

@@ -1,5 +1,6 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
+  tailwind: true,
   ignoredRouteFiles: ["**/.*"],
   // When running locally in development mode, we use the built-in remix
   // server. This does not understand the vercel lambda module format,

apps/homeschooling/tailwind.config.js

@@ -0,0 +1 @@
+module.exports = require("tailwind-config/tailwind.config.js");

packages/tailwind-config/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/tailwind-config/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "tailwind-config",
+  "version": "0.0.0",
+  "private": true,
+  "main": "index.js",
+  "devDependencies": {
+    "autoprefixer": "^10.4.12",
+    "postcss": "^8.4.27",
+    "tailwindcss": "^3.3.0"
+  }
+}

packages/tailwind-config/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/tailwind-config/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "../../packages/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

packages/ui/Button.tsx

@@ -3,5 +3,9 @@
 import * as React from "react";
 
 export const Button = () => {
-  return <button onClick={() => alert("boop")}>Boop</button>;
+  return (
+    <button className="bg-gray-300" onClick={() => alert("boop")}>
+      Boop
+    </button>
+  );
 };

packages/ui/package.json

@@ -14,7 +14,8 @@
     "eslint": "^7.32.0",
     "eslint-config-custom": "workspace:*",
     "react": "^17.0.2",
+    "tailwind-config": "workspace:*",
     "tsconfig": "workspace:*",
     "typescript": "^4.5.2"
   }
-}
+}

packages/ui/postcss.config.js

@@ -0,0 +1 @@
+module.exports = require("tailwind-config/postcss.config.js");

packages/ui/tailwind.config.js

@@ -0,0 +1 @@
+module.exports = require("tailwind-config/tailwind.config.js");