setup tailwind

2021-12-31 13:48:25 -06:00
parent dcace52ac9
commit 2293b771f3
6 changed files with 45 additions and 25 deletions
--- a/packages/docs-new/package.json
+++ b/packages/docs-new/package.json
@@ -17,14 +17,18 @@
    "react-router-dom": "^6.2.1"
  },
  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.0",
    "@types/compression": "^1.7.2",
    "@types/express": "^4.17.13",
    "@types/node": "*",
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.9",
    "@vitejs/plugin-react": "^1.1.3",
+    "autoprefixer": "^10.4.1",
    "compression": "^1.7.4",
    "esno": "^0.13.0",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.8",
    "typescript": "^4.5.4",
    "vite": "^2.7.10"
  }
--- a/packages/docs-new/postcss.config.cjs
+++ b/packages/docs-new/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/packages/docs-new/src/entry.server.tsx
+++ b/packages/docs-new/src/entry.server.tsx
@@ -17,6 +17,15 @@ export async function render(url: string) {
  return /* HTML */ `
    <!DOCTYPE html>
    <head>
+      <meta charset="utf-8" />
+      <meta name="viewport" content="width=device-width,initial-scale=1" />
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
+      <link
+        href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
+        rel="stylesheet"
+      />
+      <link rel="stylesheet" href="/src/tailwind.css" />
      ${renderToString(<>{headTags}</>)}
    </head>
    <body>
--- a/packages/docs-new/src/tailwind.css
+++ b/packages/docs-new/src/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/packages/docs-new/tailwind.config.cjs
+++ b/packages/docs-new/tailwind.config.cjs
@@ -0,0 +1,15 @@
+// @ts-nocheck
+module.exports = {
+  content: ["./src/**/*.{ts,tsx,md}"],
+  theme: {
+    fontFamily: {
+      sans: ["Rubik", "sans-serif"],
+      monospace: ["'JetBrains Mono'", "monospace"],
+    },
+    boxShadow: {
+      DEFAULT: "0 2px 9px 0 rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3)",
+    },
+    extend: {},
+  },
+  plugins: [require("@tailwindcss/typography")],
+}