tailwindcss

apps/web/layout.tsx

@@ -0,0 +1,3 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}

apps/web/package.json

@@ -5,13 +5,19 @@
   "scripts": {
     "dev": "vocs dev",
     "build": "vocs build",
-    "preview": "vocs preview"
+    "preview": "vocs preview",
+    "type:check": "tsc --noEmit"
   },
   "dependencies": {
-    "@types/react": "latest",
-    "react": "latest",
-    "react-dom": "latest",
-    "typescript": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "vocs": "latest"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.74",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.3"
   }
 }

apps/web/pages/introduction.mdx

@@ -4,3 +4,5 @@ description: Description of introduction section
 ---
 
 # Introduction2
+
+<p className="text-4xl text-red-900">With some Tailwind CSS</p>

apps/web/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

apps/web/styles.css

@@ -0,0 +1,5 @@
+@layer vocs_preflight {
+  @tailwind base;
+}
+@tailwind components;
+@tailwind utilities;

apps/web/tailwind.config.cjs

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{html,md,mdx,tsx,js,jsx}',
+    './components/**/*.{html,md,mdx,tsx,js,jsx}',
+    './layout.tsx',
+    './styles.css',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

apps/web/tsconfig.json

@@ -3,6 +3,7 @@
     "target": "ES2022",
     "useDefineForClassFields": true,
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": [],
     "module": "ESNext",
     "skipLibCheck": true,
 
@@ -20,5 +21,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["**/*.ts", "**/*.tsx"]
+  "exclude": ["**/*.js", "**/*.cjs", "**/*.mjs"]
 }