Implement a Tailwind content path wrapper (#1731)

examples/hackathon-submissions/tailwind.config.cjs

@@ -1,6 +1,8 @@
+const { resolveProjectPath } = require('wasp/client')
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  content: [resolveProjectPath('./src/**/*.{js,ts,jsx,tsx}')],
   theme: {
     extend: {
       skew: {

examples/waspello/tailwind.config.cjs

@@ -1,7 +1,9 @@
+const { resolveProjectPath } = require('wasp/client')
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
+    resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}'),
   ],
   corePlugins: {
     //preflight: false

examples/websockets-realtime-voting/tailwind.config.cjs

@@ -1,8 +1,10 @@
+const { resolveProjectPath } = require('wasp/client')
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-    "node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}",
+    resolveProjectPath("./src/**/*.{js,jsx,ts,tsx}"),
+    resolveProjectPath("node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}"),
   ],
   theme: {
     extend: {},

waspc/data/Generator/templates/sdk/client/index.ts

@@ -0,0 +1,11 @@
+import * as path from 'path';
+
+// PUBLIC API
+/**
+ * Wasp runs the client code in the `web-app` directory which is nested in the
+ * .wasp/out/web-app directory. This function resolves a project root dir path
+ * to be relative to the `web-app` directory i.e. `../../../projectDirPath`.
+ */
+export function resolveProjectPath(path: string): string {
+  return path.join('../../../', path);
+}

waspc/data/Generator/templates/sdk/package.json

@@ -109,7 +109,8 @@
       "./server/jobs": "./dist/server/jobs/index.js",
       "./server/operations": "./dist/server/operations/index.js",
       "./client/router": "./dist/client/router/index.js",
-      "./client/test": "./dist/client/test/index.js"
+      "./client/test": "./dist/client/test/index.js",
+      "./client": "./dist/client/index.js"
    },
    {=!
      TypeScript doesn't care about the redirects we define above in "exports" field; those

waspc/examples/pg-vector-example/tailwind.config.cjs

@@ -1,10 +1,11 @@
+const { resolveProjectPath } = require('wasp/client')
 const { nextui } = require("@nextui-org/react");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
+    resolveProjectPath("./src/**/*.{js,jsx,ts,tsx}"),
+    resolveProjectPath("./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"),
   ],
   theme: {
     extend: {},

waspc/examples/todo-typescript/postcss.config.cjs

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

waspc/examples/todo-typescript/src/Main.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 * {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -71,3 +75,23 @@ li {
   justify-content: space-between;
   align-items: center;
 }
+
+.button {
+  @apply bg-cyan-500 text-white font-bold py-2 px-4 rounded;
+}
+
+a {
+  @apply text-cyan-500 underline;
+}
+
+input {
+  @apply border border-gray-400 rounded p-2;
+}
+
+h1 {
+  @apply text-3xl font-bold;
+}
+
+h2 {
+  @apply text-2xl font-bold;
+}

waspc/examples/todo-typescript/tailwind.config.cjs

@@ -0,0 +1,10 @@
+const { resolveProjectPath } = require('wasp/client')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}')],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

waspc/examples/todoApp/tailwind.config.cjs

@@ -1,7 +1,9 @@
+const { resolveProjectPath } = require('wasp/client')
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
+    resolveProjectPath("./src/**/*.{js,jsx,ts,tsx}"),
   ],
   theme: {
     extend: {},

waspc/headless-test/examples/todoApp/tailwind.config.cjs

@@ -1,7 +1,9 @@
+const { resolveProjectPath } = require('wasp/client')
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
+    resolveProjectPath("./src/**/*.{js,jsx,ts,tsx}"),
   ],
   theme: {
     extend: {},

waspc/src/Wasp/AI/GenerateNewProject/Skeleton.hs

@@ -296,12 +296,13 @@ generateTailwindConfigFile :: NewProjectDetails -> File
 generateTailwindConfigFile newProjectDetails =
   ( "tailwind.config.cjs",
     [trimming|
+      const { resolveProjectPath } = require('wasp/client')
       const colors = require('tailwindcss/colors')
 
       /** @type {import('tailwindcss').Config} */
       module.exports = {
         content: [
-          "./src/**/*.{js,jsx,ts,tsx}",
+          resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}'),
         ],
         theme: {
           extend: {

waspc/src/Wasp/Generator/SdkGenerator.hs

@@ -88,6 +88,7 @@ genSdkReal spec =
       genFileCopy [relfile|types/index.ts|],
       genFileCopy [relfile|client/test/vitest/helpers.tsx|],
       genFileCopy [relfile|client/test/index.ts|],
+      genFileCopy [relfile|client/index.ts|],
       genServerConfigFile spec,
       genTsConfigJson,
       genServerUtils spec,

web/docs/project/css-frameworks.md

@@ -40,9 +40,11 @@ Make sure to use the `.cjs` extension for these config files, if you name them w
 1. Add `./tailwind.config.cjs`.
 
   ```js title="./tailwind.config.cjs"
+  const { resolveProjectPath } = require('wasp/client')
+
   /** @type {import('tailwindcss').Config} */
   module.exports = {
-    content: [ "./src/**/*.{js,jsx,ts,tsx}" ],
+    content: [resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}')],
     theme: {
       extend: {},
     },