diff --git a/.changeset/yellow-numbers-serve.md b/.changeset/yellow-numbers-serve.md
new file mode 100644
index 0000000000..39dc4f9162
--- /dev/null
+++ b/.changeset/yellow-numbers-serve.md
@@ -0,0 +1,5 @@
+---
+"@blitzjs/recipe-tailwind": minor
+---
+
+support both directory style in tailwind recipe
diff --git a/recipes/tailwind/index.ts b/recipes/tailwind/index.ts
index 3f6b1a713c..ef0e751d4d 100644
--- a/recipes/tailwind/index.ts
+++ b/recipes/tailwind/index.ts
@@ -29,7 +29,7 @@ export default RecipeBuilder()
     stepId: "addStyles",
     stepName: "Stylesheet",
     explanation: `Adds a root CSS stylesheet where Tailwind is imported and where you can add global styles`,
-    targetDirectory: "./app/core",
+    targetDirectory: `./${paths.appSrcDirectory()}/core`,
     templatePath: join(__dirname, "templates", "styles"),
     templateValues: {},
   })
@@ -39,7 +39,10 @@ export default RecipeBuilder()
     explanation: `Imports the stylesheet we just added into your app`,
     singleFileSearch: paths.app(),
     transform(program) {
-      const stylesImport = j.importDeclaration([], j.literal("app/core/styles/index.css"))
+      const stylesImport = j.importDeclaration(
+        [],
+        j.literal(`${paths.appSrcDirectory()}/core/styles/index.css`),
+      )
       return addImport(program, stylesImport)
     },
   })