feat: add tailwind

ettysekhon · Jan 1, 2023 · c8e1b50 · c8e1b50
1 parent dc97ed8
commit c8e1b50
Show file tree

Hide file tree

Showing 41 changed files with 1,514 additions and 434 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# `Turborepo` Vite starter
+# `Turborepo` Vite & Tailwind starter
 
 This is an official starter Turborepo.
 
@@ -8,18 +8,35 @@ This Turborepo includes the following packages and apps:
 
 ### Apps and Packages
 
-- `docs`: a vanilla [vite](https://vitejs.dev) ts app
-- `web`: another vanilla [vite](https://vitejs.dev) ts app
-- `ui`: a stub component & utility library shared by both `web` and `docs` applications
+- `web`: a react [vite](https://vitejs.dev) ts app with [Tailwind CSS](https://tailwindcss.com/)
+- `ui`: a stub React component library with [Tailwind CSS](https://tailwindcss.com/) shared by `web`
 - `eslint-config-custom`: shared `eslint` configurations
 - `tsconfig`: `tsconfig.json`s used throughout the monorepo
 
 Each package and app is 100% [TypeScript](https://www.typescriptlang.org/).
 
+### Building packages/ui
+
+This example is setup to build `packages/ui` and output the transpiled source and compiled styles to `dist/`. This was chosen to make sharing one `tailwind.config.js` as easy as possible, and to ensure only the CSS that is used by the current application and its dependencies is generated.
+
+Another option is to consume `packages/ui` directly from source without building. If using this option, you will need to update your `tailwind.config.js` to be aware of your package locations, so it can find all usages of the `tailwindcss` class names.
+
+For example, in [tailwind.config.js](packages/tailwind-config/tailwind.config.js):
+
+```js
+  content: [
+    // app content
+    `src/**/*.{js,ts,jsx,tsx}`,
+    // include packages if not transpiling
+    "../../packages/**/*.{js,ts,jsx,tsx}",
+  ],
+```
+
 ### Utilities
 
 This Turborepo has some additional tools already setup for you:
 
+- [Tailwind CSS](https://tailwindcss.com/) for styles
 - [TypeScript](https://www.typescriptlang.org/) for static type checking
 - [ESLint](https://eslint.org/) for code linting
 - [Jest](https://jestjs.io) test runner for all things JavaScript

diff --git a/apps/docs/.eslintrc.cjs b/apps/docs/.eslintrc.cjs
diff --git a/apps/docs/favicon.svg b/apps/docs/favicon.svg
diff --git a/apps/docs/index.html b/apps/docs/index.html
diff --git a/apps/docs/package.json b/apps/docs/package.json
diff --git a/apps/docs/public/vite.svg b/apps/docs/public/vite.svg
diff --git a/apps/docs/src/main.ts b/apps/docs/src/main.ts
diff --git a/apps/docs/src/style.css b/apps/docs/src/style.css
diff --git a/apps/docs/src/typescript.svg b/apps/docs/src/typescript.svg
diff --git a/apps/docs/src/vite-env.d.ts b/apps/docs/src/vite-env.d.ts
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
diff --git a/apps/web/favicon.svg b/apps/web/favicon.svg
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -2,12 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + TS</title>
+    <title>Admin | Kitchen Sink</title>
   </head>
   <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -4,17 +4,27 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0 --port 3001 --clearScreen false",
     "build": "tsc && vite build",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
     "preview": "vite preview",
-    "lint": "TIMING=1 eslint \"src/**/*.ts\""
+    "lint": "tsc --noEmit && TIMING=1 eslint \"src/**/*.ts*\""
   },
   "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "ui": "workspace:*"
   },
   "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^3.0.0",
+    "autoprefixer": "^10.4.13",
     "eslint": "^7.32.0",
     "eslint-config-custom": "workspace:*",
+    "postcss": "^8.4.20",
+    "tailwind-config": "workspace:*",
+    "tailwindcss": "^3.2.4",
     "tsconfig": "workspace:*",
     "typescript": "^4.9.4",
     "vite": "^4.0.3"

diff --git a/apps/web/public/favicon.ico b/apps/web/public/favicon.ico
diff --git a/apps/web/public/vite.svg b/apps/web/public/vite.svg
diff --git a/apps/web/src/App.css b/apps/web/src/App.css
@@ -0,0 +1,40 @@
+.container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0 16px;
+  text-align: center;
+}
+
+.title {
+  font-size: 3rem;
+  font-weight: 700;
+  margin: 0;
+}
+
+.title span {
+  display: inline-block;
+  background-image: linear-gradient(to right, #3b82f6, #ef4444);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.description {
+  color: #9ca3af;
+  font-weight: 500;
+}
+
+.description a {
+  color: #3b82f6;
+  text-decoration: none;
+}
+
+.description a:hover {
+  text-decoration: underline;
+}
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
@@ -0,0 +1,19 @@
+import { Button } from "ui";
+
+function App() {
+  return (
+    <main className="mx-auto w-auto px-4 pt-16 pb-8 sm:pt-24 lg:px-8">
+      <h1 className="mx-auto max-w-5xl text-center text-6xl font-extrabold leading-[1.1] tracking-tighter text-white sm:text-7xl lg:text-8xl xl:text-8xl">
+        Web <br className="hidden lg:block" />
+        <span className="inline-block bg-gradient-to-r from-brandred to-brandblue bg-clip-text text-transparent">
+          Turborepo Example
+        </span>{" "}
+      </h1>
+      <div className="mx-auto mt-5 max-w-xl sm:flex sm:justify-center md:mt-8">
+        <Button />
+      </div>
+    </main>
+  );
+}
+
+export default App;
diff --git a/apps/web/src/main.ts b/apps/web/src/main.ts
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import "./styles/globals.css";
+// include styles from the ui package
+import "ui/styles.css";
+import App from "./App";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);