diff --git a/.github/workflows/build-remote.js b/.github/workflows/build-remote.js
index d102e7ccb..0d9122937 100644
--- a/.github/workflows/build-remote.js
+++ b/.github/workflows/build-remote.js
@@ -26,6 +26,7 @@ const buildRemote = async () => {
         antd: "antd-example",
         mui: "mui-example",
         no: "headless-example",
+        tailwindcss: "headless-example",
     };
 
     let AUTH_PROVIDER = dataProviderMap[DATA_PROVIDER];
diff --git a/.github/workflows/build-template.js b/.github/workflows/build-template.js
index 9911de2a1..ce4c220e1 100644
--- a/.github/workflows/build-template.js
+++ b/.github/workflows/build-template.js
@@ -33,6 +33,7 @@ const buildTemplate = async () => {
         antd: "antd-example",
         mui: "mui-example",
         no: "headless-example",
+        tailwindcss: "headless-example",
     };
 
     let AUTH_PROVIDER = dataProviderMap[DATA_PROVIDER];
diff --git a/.github/workflows/test-local.yaml b/.github/workflows/test-local.yaml
index cfef95cc3..b001356cc 100644
--- a/.github/workflows/test-local.yaml
+++ b/.github/workflows/test-local.yaml
@@ -23,7 +23,7 @@ jobs:
             appwrite,
             hasura,
           ]
-        ui_framework: [antd, mui, no]
+        ui_framework: [tailwindcss, antd, mui, no]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -80,7 +80,7 @@ jobs:
             appwrite,
             hasura,
           ]
-        ui_framework: [antd, mui, no]
+        ui_framework: [tailwindcss, antd, mui, no]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -138,7 +138,7 @@ jobs:
             appwrite,
             hasura,
           ]
-        ui_framework: [antd, mui, no]
+        ui_framework: [tailwindcss, antd, mui, no]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
diff --git a/.github/workflows/test-remote.yaml b/.github/workflows/test-remote.yaml
index 20a9aa40c..b29cbe49d 100644
--- a/.github/workflows/test-remote.yaml
+++ b/.github/workflows/test-remote.yaml
@@ -23,7 +23,7 @@ jobs:
             appwrite,
             hasura,
           ]
-        ui_framework: [antd, mui, no]
+        ui_framework: [tailwindcss, antd, mui, no]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -81,7 +81,7 @@ jobs:
             appwrite,
             hasura,
           ]
-        ui_framework: [antd, mui, no]
+        ui_framework: [tailwindcss, antd, mui, no]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -140,7 +140,7 @@ jobs:
             appwrite,
             hasura,
           ]
-        ui_framework: [antd, mui, no]
+        ui_framework: [tailwindcss, antd, mui, no]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
diff --git a/cypress/e2e/build-test.cy.js b/cypress/e2e/build-test.cy.js
index 0550b4529..c87966225 100644
--- a/cypress/e2e/build-test.cy.js
+++ b/cypress/e2e/build-test.cy.js
@@ -88,7 +88,10 @@ describe("build test", () => {
 
             cy.contains("Sign in to your account").should("exist");
 
-            if (Cypress.env("UI_FRAMEWORK") === "no") {
+            if (
+                Cypress.env("UI_FRAMEWORK") === "no" ||
+                Cypress.env("UI_FRAMEWORK") === "tailwindcss"
+            ) {
                 if (Cypress.env("DATA_PROVIDER") === "supabase") {
                     cy.get("input[name='email']").type("info@refine.dev");
                     cy.get("input[name='password']").type("refine-supabase");
@@ -125,7 +128,10 @@ describe("build test", () => {
                 cy.title().should("eq", "Blog posts | Refine");
             }
 
-            if (Cypress.env("UI_FRAMEWORK") !== "no") {
+            if (
+                Cypress.env("UI_FRAMEWORK") !== "no" &&
+                Cypress.env("UI_FRAMEWORK") !== "tailwindcss"
+            ) {
                 cy.contains("Categories").should("exist");
 
                 cy.contains("Logout").should("exist");
diff --git a/presets.js b/presets.js
index db7e097e4..a7881de1c 100644
--- a/presets.js
+++ b/presets.js
@@ -99,5 +99,42 @@ module.exports = {
                 "headless-example": "no",
             },
         },
+        {
+            name: "refine-vite-tailwind",
+            type: "refine-vite",
+            answers: {
+                "ui-framework": "tailwindcss",
+                "router-provider": "react-router-v6",
+                "data-provider": "data-provider-custom-json-rest",
+                "auth-provider": "none",
+                "antd-example": "no",
+                "mui-example": "no",
+                "headless-example": "no",
+            },
+        },
+        {
+            name: "refine-nextjs-tailwind",
+            type: "refine-nextjs",
+            answers: {
+                "ui-framework": "tailwindcss",
+                "data-provider": "data-provider-custom-json-rest",
+                "auth-provider": "none",
+                "antd-example": "no",
+                "mui-example": "no",
+                "headless-example": "no",
+            },
+        },
+        {
+            name: "refine-remix-tailwind",
+            type: "refine-remix",
+            answers: {
+                "ui-framework": "tailwindcss",
+                "data-provider": "data-provider-custom-json-rest",
+                "auth-provider": "none",
+                "antd-example": "no",
+                "mui-example": "no",
+                "headless-example": "no",
+            },
+        },
     ],
 };
diff --git a/refine-nextjs/plugins/_base/extend.js b/refine-nextjs/plugins/_base/extend.js
index bce99a718..1c6282bda 100644
--- a/refine-nextjs/plugins/_base/extend.js
+++ b/refine-nextjs/plugins/_base/extend.js
@@ -27,6 +27,8 @@ module.exports = {
         const uiFramework = answers["ui-framework"];
         const dataProvider = answers["data-provider"];
         const authProvider = answers["auth-provider"];
+        const isHeadless =
+            uiFramework === "no" || uiFramework === "tailwindcss";
 
         // ## isNextAuthCheck
         if (
@@ -67,7 +69,7 @@ module.exports = {
         ];
 
         // update for headless
-        if (uiFramework === "no") {
+        if (isHeadless) {
             base._app.authPageProps = [
                 `
                 renderContent={(content) => (
@@ -117,10 +119,7 @@ module.exports = {
             base.selectedSvg = svgFromAnswers;
         }
 
-        if (
-            answers["ui-framework"] !== "no" &&
-            (answers["title"] || answers["svg"])
-        ) {
+        if (!isHeadless && (answers["title"] || answers["svg"])) {
             if (answers["ui-framework"] === "antd") {
                 base._app.refineAntdImports.push("ThemedTitleV2");
             }
@@ -129,16 +128,13 @@ module.exports = {
             }
         }
 
-        if (
-            answers["ui-framework"] !== "no" &&
-            (answers["title"] || answers["svg"])
-        ) {
+        if (!isHeadless && (answers["title"] || answers["svg"])) {
             base._app.localImport.push(
                 'import { AppIcon } from "@components/app-icon";',
             );
         }
 
-        if (answers["ui-framework"] === "no") {
+        if (isHeadless) {
             base._app.localImport.push(
                 `import { Layout } from "@components/layout";`,
             );
@@ -146,7 +142,7 @@ module.exports = {
         }
 
         // this impementation required for getting default ColorModeContextProvider's theme from cookie
-        if (answers["ui-framework"] !== "no") {
+        if (!isHeadless) {
             base._app.nextjsInner.push(
                 `const cookieStore = cookies();`,
                 `const theme = cookieStore.get("theme");`,
@@ -187,7 +183,7 @@ module.exports = {
         } else if (dataProvider === "data-provider-supabase") {
             base.blogPostCategoryIdFormField = `"categoryId"`;
         } else {
-            if (uiFramework === "mui" || uiFramework === "no") {
+            if (uiFramework === "mui" || isHeadless) {
                 base.blogPostCategoryIdFormField = `"category.id"`;
             } else {
                 base.blogPostCategoryIdFormField = `["category", "id"]`;
@@ -196,7 +192,7 @@ module.exports = {
 
         // ## blogPostCategoryTableField
         if (base.isGraphQL) {
-            if (uiFramework === "no") {
+            if (isHeadless) {
                 base.blogPostCategoryTableField = `"category.title"`;
             }
             if (uiFramework === "antd") {
@@ -227,7 +223,7 @@ module.exports = {
                 { value: "rejected", label: "Rejected" },
             ]);
         }
-        if (uiFramework === "no" || uiFramework === "mui") {
+        if (isHeadless || uiFramework === "mui") {
             base.blogPostStatusOptions = JSON.parse(base.blogPostStatusOptions);
         }
 
@@ -239,17 +235,16 @@ module.exports = {
         }
 
         // ## Refine options.title
-        if (
-            answers["ui-framework"] !== "no" &&
-            (answers["title"] || answers["svg"])
-        ) {
+        if (!isHeadless && (answers["title"] || answers["svg"])) {
             if (!base._app.refineOptions) {
                 base._app.refineOptions = [];
             }
-            const textLine = answers["title"] ? `text: "${answers["title"]}",` : "";
+            const textLine = answers["title"]
+                ? `text: "${answers["title"]}",`
+                : "";
             const iconLine = answers["svg"] ? `icon: <AppIcon />,` : "";
             const template = `title: { ${textLine} ${iconLine} },`;
-            
+
             base._app.refineOptions.push(template);
         }
 
diff --git a/refine-nextjs/plugins/_base/src/components/auth-page/index.tsx b/refine-nextjs/plugins/_base/src/components/auth-page/index.tsx
index 3701a6ea8..74cb2667f 100644
--- a/refine-nextjs/plugins/_base/src/components/auth-page/index.tsx
+++ b/refine-nextjs/plugins/_base/src/components/auth-page/index.tsx
@@ -9,7 +9,7 @@
           AuthPage as AuthPageBase,
       } from "@refinedev/mui";
   <%_ } _%>
-  <%_ if (answers[`ui-framework`] === "no") { _%>
+  <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
   import { AuthPage as AuthPageBase } from "@refinedev/core";
   <%_ } _%>
   import type { AuthPageProps } from '@refinedev/core'
diff --git a/refine-nextjs/plugins/_base/src/styles/global.css b/refine-nextjs/plugins/_base/src/styles/global.css
index 7d0bec252..2b664c8b2 100644
--- a/refine-nextjs/plugins/_base/src/styles/global.css
+++ b/refine-nextjs/plugins/_base/src/styles/global.css
@@ -1,5 +1,6 @@
 body {
     margin: 0px;
+    background: white;
 }
 
 table {
diff --git a/refine-nextjs/plugins/auth-provider-auth0/src/app/_refine_context.tsx b/refine-nextjs/plugins/auth-provider-auth0/src/app/_refine_context.tsx
index 7ac578cc4..d34219586 100644
--- a/refine-nextjs/plugins/auth-provider-auth0/src/app/_refine_context.tsx
+++ b/refine-nextjs/plugins/auth-provider-auth0/src/app/_refine_context.tsx
@@ -28,7 +28,7 @@ import routerProvider from "@refinedev/nextjs-router";
 %>
 
 type RefineContextProps = {
-    <%_ if (answers["ui-framework"] !== 'no') { _%>
+    <%_ if (answers["ui-framework"] !== "no" && answers["ui-framework"] !== "tailwindcss") { _%>
         defaultMode?: string;
     <%_ } _%>  
 };
@@ -42,7 +42,7 @@ export const RefineContext = (props: React.PropsWithChildren<RefineContextProps>
   }
 
 type AppProps = {
-    <%_ if (answers["ui-framework"] !== 'no') { _%>
+    <%_ if (answers["ui-framework"] !== "no" && answers["ui-framework"] !== "tailwindcss") { _%>
         defaultMode?: string;
     <%_ } _%>  
 };
@@ -120,7 +120,7 @@ const App = (props: React.PropsWithChildren<AppProps>) => {
     };
 
 
-    <%_ if (answers["ui-framework"] !== 'no') { _%>
+    <%_ if (answers["ui-framework"] !== "no" && answers["ui-framework"] !== "tailwindcss") { _%>
          const defaultMode = props?.defaultMode
     <%_ } _%>  
 
diff --git a/refine-nextjs/plugins/auth-provider-auth0/src/app/login/page.tsx b/refine-nextjs/plugins/auth-provider-auth0/src/app/login/page.tsx
index 367b4d717..13a53d605 100644
--- a/refine-nextjs/plugins/auth-provider-auth0/src/app/login/page.tsx
+++ b/refine-nextjs/plugins/auth-provider-auth0/src/app/login/page.tsx
@@ -96,7 +96,7 @@ export default function Login() {
         );
     <%_ } _%>
 
-    <%_ if (answers["ui-framework"] === "no") { _%>
+    <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
         return(
             <div
                 style={{
diff --git a/refine-nextjs/plugins/auth-provider-google/src/app/_refine_context.tsx b/refine-nextjs/plugins/auth-provider-google/src/app/_refine_context.tsx
index 6a1a0f031..c6b1d252a 100644
--- a/refine-nextjs/plugins/auth-provider-google/src/app/_refine_context.tsx
+++ b/refine-nextjs/plugins/auth-provider-google/src/app/_refine_context.tsx
@@ -28,7 +28,7 @@ import routerProvider from "@refinedev/nextjs-router";
 %>
 
 type RefineContextProps = {
-    <%_ if (answers["ui-framework"] !== 'no') { _%>
+    <%_ if (answers["ui-framework"] !== "no" && answers["ui-framework"] !== "tailwindcss") { _%>
         defaultMode?: string;
     <%_ } _%>  
 };
@@ -42,7 +42,7 @@ export const RefineContext = (props: React.PropsWithChildren<RefineContextProps>
   }
 
 type AppProps = {
-    <%_ if (answers["ui-framework"] !== 'no') { _%>
+    <%_ if (answers["ui-framework"] !== "no" && answers["ui-framework"] !== "tailwindcss") { _%>
         defaultMode?: string;
     <%_ } _%>  
 };
@@ -120,7 +120,7 @@ const App = (props: React.PropsWithChildren<AppProps>) => {
     };
 
 
-    <%_ if (answers["ui-framework"] !== 'no') { _%>
+    <%_ if (answers["ui-framework"] !== "no" && answers["ui-framework"] !== "tailwindcss") { _%>
          const defaultMode = props?.defaultMode
     <%_ } _%>  
 
diff --git a/refine-nextjs/plugins/auth-provider-google/src/app/login/page.tsx b/refine-nextjs/plugins/auth-provider-google/src/app/login/page.tsx
index c2d16e46e..7624d71bb 100644
--- a/refine-nextjs/plugins/auth-provider-google/src/app/login/page.tsx
+++ b/refine-nextjs/plugins/auth-provider-google/src/app/login/page.tsx
@@ -94,7 +94,7 @@ export default function Login() {
         );
     <%_ } _%>
 
-    <%_ if (answers["ui-framework"] === "no") { _%>
+    <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
         return(
             <div
                 style={{
diff --git a/refine-nextjs/plugins/auth-provider-keycloak/src/app/_refine_context.tsx b/refine-nextjs/plugins/auth-provider-keycloak/src/app/_refine_context.tsx
index 92a911c82..b32ab4e7d 100644
--- a/refine-nextjs/plugins/auth-provider-keycloak/src/app/_refine_context.tsx
+++ b/refine-nextjs/plugins/auth-provider-keycloak/src/app/_refine_context.tsx
@@ -28,7 +28,7 @@ import routerProvider from "@refinedev/nextjs-router";
 %>
 
 type RefineContextProps = {
-    <%_ if (answers["ui-framework"] !== 'no') { _%>
+    <%_ if (answers["ui-framework"] !== "no" && answers["ui-framework"] !== "tailwindcss") { _%>
         defaultMode?: string;
     <%_ } _%>  
 };
@@ -42,7 +42,7 @@ export const RefineContext = (props: React.PropsWithChildren<RefineContextProps>
   }
 
 type AppProps = {
-    <%_ if (answers["ui-framework"] !== 'no') { _%>
+    <%_ if (answers["ui-framework"] !== "no" && answers["ui-framework"] !== "tailwindcss") { _%>
         defaultMode?: string;
     <%_ } _%>  
 };
@@ -120,7 +120,7 @@ const App = (props: React.PropsWithChildren<AppProps>) => {
     };
 
 
-    <%_ if (answers["ui-framework"] !== 'no') { _%>
+    <%_ if (answers["ui-framework"] !== "no" && answers["ui-framework"] !== "tailwindcss") { _%>
          const defaultMode = props?.defaultMode
     <%_ } _%>  
 
diff --git a/refine-nextjs/plugins/auth-provider-keycloak/src/app/login/page.tsx b/refine-nextjs/plugins/auth-provider-keycloak/src/app/login/page.tsx
index 3598fc965..6cae19c4d 100644
--- a/refine-nextjs/plugins/auth-provider-keycloak/src/app/login/page.tsx
+++ b/refine-nextjs/plugins/auth-provider-keycloak/src/app/login/page.tsx
@@ -95,7 +95,7 @@ export default function Login() {
         );
     <%_ } _%>
 
-    <%_ if (answers["ui-framework"] === "no") { _%>
+    <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
         return(
             <div
                 style={{
diff --git a/refine-nextjs/plugins/tailwindcss/meta.json b/refine-nextjs/plugins/tailwindcss/meta.json
new file mode 100644
index 000000000..ab0662175
--- /dev/null
+++ b/refine-nextjs/plugins/tailwindcss/meta.json
@@ -0,0 +1,4 @@
+{
+  "name": "Tailwind CSS",
+  "url": "https://refine.dev/docs/guides-concepts/general-concepts/#headless-concept"
+}
diff --git a/refine-nextjs/plugins/tailwindcss/package.json b/refine-nextjs/plugins/tailwindcss/package.json
new file mode 100644
index 000000000..9dc73ff2e
--- /dev/null
+++ b/refine-nextjs/plugins/tailwindcss/package.json
@@ -0,0 +1,7 @@
+{
+  "devDependencies": {
+    "tailwindcss": "^3.4.3",
+    "postcss": "^8.4.38",
+    "autoprefixer": "^10.4.19"
+  }
+}
diff --git a/refine-nextjs/plugins/tailwindcss/postcss.config.js b/refine-nextjs/plugins/tailwindcss/postcss.config.js
new file mode 100644
index 000000000..67cdf1a55
--- /dev/null
+++ b/refine-nextjs/plugins/tailwindcss/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};
diff --git a/refine-nextjs/plugins/tailwindcss/src/styles/global.css b/refine-nextjs/plugins/tailwindcss/src/styles/global.css
new file mode 100644
index 000000000..d99ff9c0c
--- /dev/null
+++ b/refine-nextjs/plugins/tailwindcss/src/styles/global.css
@@ -0,0 +1,104 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* 
+* These styles were added to improve the appearance of the example pages.
+* It is safe to delete them, and they are not intended to be used by Refine components.
+*/
+@layer base {
+    input {
+        @apply border border-gray-300 rounded-sm;
+    }
+
+    input[type="submit"] {
+        @apply bg-[#EFEFEF];
+    }
+
+    button {
+        @apply border border-gray-300 px-2 rounded-sm bg-[#EFEFEF];
+    }
+
+    h1 {
+        @apply text-2xl font-bold my-6;
+    }
+
+    ul {
+        @apply list-disc my-4;
+    }
+
+    a {
+        @apply text-blue-700 underline;
+    }
+
+    label {
+        @apply text-sm font-medium;
+    }
+
+    body {
+        @apply m-0 bg-white;
+    }
+
+    table {
+        @apply border border-black border-collapse;
+    }
+
+    table th,
+    table td {
+        @apply m-0 p-2 border-b border-r border-black;
+    }
+
+    table tr:last-child td {
+        @apply border-b-0;
+    }
+
+    table th:last-child,
+    table td:last-child {
+        @apply border-r-0;
+    }
+
+    .layout {
+        @apply flex gap-4;
+    }
+
+    @media (max-width: 751px) {
+        .layout {
+            @apply block;
+        }
+    }
+
+    .layout .content {
+        @apply flex flex-col flex-grow;
+    }
+
+    .breadcrumb {
+        @apply flex gap-6 p-2 px-4 border-b border-gray-300;
+        list-style-type: "/ ";
+    }
+
+    .breadcrumb a {
+        @apply text-blue-700 no-underline;
+    }
+
+    .menu {
+        @apply flex-shrink-0 p-2 pr-4 border-r border-gray-300;
+    }
+
+    .menu a {
+        @apply text-black;
+    }
+
+    .menu .active {
+        @apply font-bold;
+    }
+
+    @media (max-width: 751px) {
+        .menu {
+            @apply border-r-0 border-b border-gray-300;
+        }
+    }
+
+    .menu ul {
+        @apply pl-4;
+    }
+}
diff --git a/refine-nextjs/plugins/tailwindcss/tailwind.config.js b/refine-nextjs/plugins/tailwindcss/tailwind.config.js
new file mode 100644
index 000000000..b23c6cf2d
--- /dev/null
+++ b/refine-nextjs/plugins/tailwindcss/tailwind.config.js
@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        "./app/**/*.{js,ts,jsx,tsx,mdx}",
+        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+        "./components/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+};
diff --git a/refine-nextjs/prompt.js b/refine-nextjs/prompt.js
index bc19573c1..9aa300b4c 100644
--- a/refine-nextjs/prompt.js
+++ b/refine-nextjs/prompt.js
@@ -75,6 +75,11 @@ module.exports = {
                     name: "mui",
                     hint: "Installs Material UI package.",
                 },
+                {
+                    message: "Tailwind CSS",
+                    name: "tailwindcss",
+                    hint: "Installs Tailwind CSS package.",
+                },
             ],
             default: "no",
         },
@@ -193,7 +198,8 @@ module.exports = {
             when: function (answers) {
                 return (
                     typeof answers["svg"] === "undefined" ||
-                    answers["ui-framework"] === "no"
+                    answers["ui-framework"] === "no" ||
+                    answers["ui-framework"] === "tailwindcss"
                 );
             },
             pattern: ["src/components/app-icon/index.tsx"],
@@ -201,7 +207,10 @@ module.exports = {
         {
             plugin: ["_base"],
             when: function (answers) {
-                return answers["ui-framework"] !== "no";
+                return (
+                    answers["ui-framework"] !== "no" &&
+                    answers["ui-framework"] !== "tailwindcss"
+                );
             },
             pattern: [
                 "src/components/breadcrumb/index.tsx",
diff --git a/refine-nextjs/template/src/app/not-found.tsx b/refine-nextjs/template/src/app/not-found.tsx
index 514181f07..b0e9398fd 100644
--- a/refine-nextjs/template/src/app/not-found.tsx
+++ b/refine-nextjs/template/src/app/not-found.tsx
@@ -7,7 +7,7 @@ import { Suspense } from 'react'
 <%_ if (answers["ui-framework"] === 'mui') { _%>
     import { ErrorComponent } from "@refinedev/mui";
 <%_ } _%>
-<%_ if (answers["ui-framework"] === 'no') { _%>
+<%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { ErrorComponent } from "@refinedev/core";
 <%_ } _%>
 import { Authenticated } from '@refinedev/core'
diff --git a/refine-remix/plugins/_base/extend.js b/refine-remix/plugins/_base/extend.js
index c1f368026..1ec88ecc9 100644
--- a/refine-remix/plugins/_base/extend.js
+++ b/refine-remix/plugins/_base/extend.js
@@ -26,6 +26,8 @@ module.exports = {
         const dataProvider = answers["data-provider"];
         const authProvider = answers["auth-provider"];
         const uiFramework = answers["ui-framework"];
+        const isHeadless =
+            uiFramework === "no" || uiFramework === "tailwindcss";
 
         // ## isNextAuthCheck
         if (
@@ -66,7 +68,7 @@ module.exports = {
         ];
 
         // update for headless
-        if (uiFramework === "no") {
+        if (isHeadless) {
             base._app.authPageProps = [
                 `
                 renderContent={(content) => (
@@ -116,16 +118,13 @@ module.exports = {
             base.selectedSvg = svgFromAnswers;
         }
 
-        if (
-            answers["ui-framework"] !== "no" &&
-            (answers["title"] || answers["svg"])
-        ) {
+        if (!isHeadless && (answers["title"] || answers["svg"])) {
             base._app.localImport.push(
                 'import { AppIcon } from "@components/app-icon";',
             );
         }
 
-        if (answers["ui-framework"] === "no") {
+        if (isHeadless) {
             base._app.localImport.push(`import styles from "~/global.css";`);
             base._app.styleImport.push('{ rel: "stylesheet", href: styles }');
         }
@@ -154,7 +153,7 @@ module.exports = {
         } else if (dataProvider === "data-provider-supabase") {
             base.blogPostCategoryIdFormField = `"categoryId"`;
         } else {
-            if (uiFramework === "mui" || uiFramework === "no") {
+            if (uiFramework === "mui" || isHeadless) {
                 base.blogPostCategoryIdFormField = `"category.id"`;
             } else {
                 base.blogPostCategoryIdFormField = `["category", "id"]`;
@@ -163,7 +162,7 @@ module.exports = {
 
         // ## blogPostCategoryTableField
         if (base.isGraphQL) {
-            if (uiFramework === "no") {
+            if (isHeadless) {
                 base.blogPostCategoryTableField = `"category.title"`;
             }
             if (uiFramework === "antd") {
@@ -194,7 +193,7 @@ module.exports = {
                 { value: "rejected", label: "Rejected" },
             ]);
         }
-        if (uiFramework === "no" || uiFramework === "mui") {
+        if (isHeadless || uiFramework === "mui") {
             base.blogPostStatusOptions = JSON.parse(base.blogPostStatusOptions);
         }
 
@@ -206,17 +205,16 @@ module.exports = {
         }
 
         // ## Refine options.title
-        if (
-            answers["ui-framework"] !== "no" &&
-            (answers["title"] || answers["svg"])
-        ) {
+        if (!isHeadless && (answers["title"] || answers["svg"])) {
             if (!base._app.refineOptions) {
                 base._app.refineOptions = [];
             }
-            const textLine = answers["title"] ? `text: "${answers["title"]}",` : "";
+            const textLine = answers["title"]
+                ? `text: "${answers["title"]}",`
+                : "";
             const iconLine = answers["svg"] ? `icon: <AppIcon />,` : "";
             const template = `title: { ${textLine} ${iconLine} },`;
-            
+
             base._app.refineOptions.push(template);
         }
 
diff --git a/refine-remix/plugins/auth-provider-auth0/app/routes/_auth.login.tsx b/refine-remix/plugins/auth-provider-auth0/app/routes/_auth.login.tsx
index 74e3d2653..1fd08fb5f 100644
--- a/refine-remix/plugins/auth-provider-auth0/app/routes/_auth.login.tsx
+++ b/refine-remix/plugins/auth-provider-auth0/app/routes/_auth.login.tsx
@@ -101,7 +101,7 @@ export default function Login() {
         );
     <%_ } _%>
 
-    <%_ if (answers["ui-framework"] === "no") { _%>
+    <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
         return(
             <div
                 style={{
diff --git a/refine-remix/plugins/auth-provider-auth0/app/routes/_layout.tsx b/refine-remix/plugins/auth-provider-auth0/app/routes/_layout.tsx
index d5551222e..1dd67cf89 100644
--- a/refine-remix/plugins/auth-provider-auth0/app/routes/_layout.tsx
+++ b/refine-remix/plugins/auth-provider-auth0/app/routes/_layout.tsx
@@ -15,7 +15,7 @@ import {
 
 import { Header } from "@components/header";
 import { authenticator } from "~/utils/auth.server";
-<%_ if (answers["ui-framework"] === 'no') { _%>
+<%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
 import { Layout } from "~/components/layout";
 <%_ } _%>
 
@@ -23,7 +23,7 @@ import { Layout } from "~/components/layout";
 export default function BaseLayout() {
     return (
         <>
-             <%_ if (answers["ui-framework"] === 'no') { _%>
+             <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
                <Layout>
                     <Outlet />
                 </Layout>
diff --git a/refine-remix/plugins/auth-provider-custom/app/routes/_auth.forgot-password.tsx b/refine-remix/plugins/auth-provider-custom/app/routes/_auth.forgot-password.tsx
index 9fd0f3ac8..488681418 100644
--- a/refine-remix/plugins/auth-provider-custom/app/routes/_auth.forgot-password.tsx
+++ b/refine-remix/plugins/auth-provider-custom/app/routes/_auth.forgot-password.tsx
@@ -8,7 +8,7 @@ import {
     AuthPage,
 } from "@refinedev/mui";
 <%_ } _%>
-<%_ if (answers[`ui-framework`] === "no") { _%>
+<%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { AuthPage } from "@refinedev/core";
 <%_ } _%>
 
diff --git a/refine-remix/plugins/auth-provider-custom/app/routes/_auth.login.tsx b/refine-remix/plugins/auth-provider-custom/app/routes/_auth.login.tsx
index f479d7478..c189d77ad 100644
--- a/refine-remix/plugins/auth-provider-custom/app/routes/_auth.login.tsx
+++ b/refine-remix/plugins/auth-provider-custom/app/routes/_auth.login.tsx
@@ -8,7 +8,7 @@ import {
     AuthPage,
 } from "@refinedev/mui";
 <%_ } _%>
-<%_ if (answers[`ui-framework`] === "no") { _%>
+<%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { AuthPage } from "@refinedev/core";
 <%_ } _%>
 
diff --git a/refine-remix/plugins/auth-provider-custom/app/routes/_auth.register.tsx b/refine-remix/plugins/auth-provider-custom/app/routes/_auth.register.tsx
index 2f5c44bdd..05b1325fb 100644
--- a/refine-remix/plugins/auth-provider-custom/app/routes/_auth.register.tsx
+++ b/refine-remix/plugins/auth-provider-custom/app/routes/_auth.register.tsx
@@ -8,7 +8,7 @@ import {
     AuthPage,
 } from "@refinedev/mui";
 <%_ } _%>
-<%_ if (answers[`ui-framework`] === "no") { _%>
+<%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { AuthPage } from "@refinedev/core";
 <%_ } _%>
 
diff --git a/refine-remix/plugins/auth-provider-custom/app/routes/_layout.tsx b/refine-remix/plugins/auth-provider-custom/app/routes/_layout.tsx
index 458c28b22..b94cb4fe0 100644
--- a/refine-remix/plugins/auth-provider-custom/app/routes/_layout.tsx
+++ b/refine-remix/plugins/auth-provider-custom/app/routes/_layout.tsx
@@ -15,14 +15,14 @@ import {
 
 import { Header } from "@components/header";
 import { authProvider } from "~/authProvider";
-<%_ if (answers["ui-framework"] === 'no') { _%>
+<%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
 import { Layout } from "~/components/layout";
 <%_ } _%>
 
 export default function BaseLayout() {
     return (
         <>
-             <%_ if (answers["ui-framework"] === 'no') { _%>
+             <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
                 <Layout>
                     <Outlet />
                 </Layout>
diff --git a/refine-remix/plugins/auth-provider-google/app/routes/_auth.login.tsx b/refine-remix/plugins/auth-provider-google/app/routes/_auth.login.tsx
index a6212e737..0194ba4d4 100644
--- a/refine-remix/plugins/auth-provider-google/app/routes/_auth.login.tsx
+++ b/refine-remix/plugins/auth-provider-google/app/routes/_auth.login.tsx
@@ -99,7 +99,7 @@ export default function Login() {
         );
     <%_ } _%>
 
-    <%_ if (answers["ui-framework"] === "no") { _%>
+    <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
         return(
             <div
                 style={{
diff --git a/refine-remix/plugins/auth-provider-google/app/routes/_layout.tsx b/refine-remix/plugins/auth-provider-google/app/routes/_layout.tsx
index 1cfda9950..959b43485 100644
--- a/refine-remix/plugins/auth-provider-google/app/routes/_layout.tsx
+++ b/refine-remix/plugins/auth-provider-google/app/routes/_layout.tsx
@@ -15,14 +15,14 @@ import {
 
 import { Header } from "@components/header";
 import { authenticator } from "~/utils/auth.server";
-<%_ if (answers["ui-framework"] === 'no') { _%>
+<%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
 import { Layout } from "~/components/layout";
 <%_ } _%>
 
 export default function BaseLayout() {
     return (
         <>
-             <%_ if (answers["ui-framework"] === 'no') { _%>
+             <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
                 <Layout>
                     <Outlet />
                 </Layout>
diff --git a/refine-remix/plugins/auth-provider-keycloak/app/routes/_auth.login.tsx b/refine-remix/plugins/auth-provider-keycloak/app/routes/_auth.login.tsx
index 2643582a4..3667fe8d9 100644
--- a/refine-remix/plugins/auth-provider-keycloak/app/routes/_auth.login.tsx
+++ b/refine-remix/plugins/auth-provider-keycloak/app/routes/_auth.login.tsx
@@ -101,7 +101,7 @@ export default function Login() {
         );
     <%_ } _%>
 
-    <%_ if (answers["ui-framework"] === "no") { _%>
+    <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
         return(
             <div
                 style={{
diff --git a/refine-remix/plugins/auth-provider-keycloak/app/routes/_layout.tsx b/refine-remix/plugins/auth-provider-keycloak/app/routes/_layout.tsx
index 1cfda9950..959b43485 100644
--- a/refine-remix/plugins/auth-provider-keycloak/app/routes/_layout.tsx
+++ b/refine-remix/plugins/auth-provider-keycloak/app/routes/_layout.tsx
@@ -15,14 +15,14 @@ import {
 
 import { Header } from "@components/header";
 import { authenticator } from "~/utils/auth.server";
-<%_ if (answers["ui-framework"] === 'no') { _%>
+<%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
 import { Layout } from "~/components/layout";
 <%_ } _%>
 
 export default function BaseLayout() {
     return (
         <>
-             <%_ if (answers["ui-framework"] === 'no') { _%>
+             <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
                 <Layout>
                     <Outlet />
                 </Layout>
diff --git a/refine-remix/plugins/data-provider-appwrite/app/routes/_auth.forgot-password.tsx b/refine-remix/plugins/data-provider-appwrite/app/routes/_auth.forgot-password.tsx
index 1f2a8253c..5bba63ad7 100644
--- a/refine-remix/plugins/data-provider-appwrite/app/routes/_auth.forgot-password.tsx
+++ b/refine-remix/plugins/data-provider-appwrite/app/routes/_auth.forgot-password.tsx
@@ -4,7 +4,7 @@
  <%_ if (answers["ui-framework"] === 'mui') { _%>
      import { AuthPage } from "@refinedev/mui";
  <%_ } _%>
- <%_ if (answers[`ui-framework`] === "no") { _%>
+ <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { AuthPage } from "@refinedev/core";
 <%_ } _%>
 
diff --git a/refine-remix/plugins/data-provider-appwrite/app/routes/_auth.login.tsx b/refine-remix/plugins/data-provider-appwrite/app/routes/_auth.login.tsx
index 419e3ab01..c3e642d5c 100644
--- a/refine-remix/plugins/data-provider-appwrite/app/routes/_auth.login.tsx
+++ b/refine-remix/plugins/data-provider-appwrite/app/routes/_auth.login.tsx
@@ -4,7 +4,7 @@
  <%_ if (answers["ui-framework"] === 'mui') { _%>
      import { AuthPage } from "@refinedev/mui";
  <%_ } _%>
- <%_ if (answers[`ui-framework`] === "no") { _%>
+ <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { AuthPage } from "@refinedev/core";
 <%_ } _%>
 
diff --git a/refine-remix/plugins/data-provider-appwrite/app/routes/_auth.register.tsx b/refine-remix/plugins/data-provider-appwrite/app/routes/_auth.register.tsx
index 6a9bca7d2..b8d4de56b 100644
--- a/refine-remix/plugins/data-provider-appwrite/app/routes/_auth.register.tsx
+++ b/refine-remix/plugins/data-provider-appwrite/app/routes/_auth.register.tsx
@@ -4,7 +4,7 @@
  <%_ if (answers["ui-framework"] === 'mui') { _%>
      import { AuthPage } from "@refinedev/mui";
  <%_ } _%>
- <%_ if (answers[`ui-framework`] === "no") { _%>
+ <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { AuthPage } from "@refinedev/core";
 <%_ } _%>
 
diff --git a/refine-remix/plugins/data-provider-appwrite/app/routes/_layout.tsx b/refine-remix/plugins/data-provider-appwrite/app/routes/_layout.tsx
index a8310bfc7..e7b3f99ae 100644
--- a/refine-remix/plugins/data-provider-appwrite/app/routes/_layout.tsx
+++ b/refine-remix/plugins/data-provider-appwrite/app/routes/_layout.tsx
@@ -15,14 +15,14 @@ import {
 
 import { Header } from "@components/header";
 import { authProvider } from "~/authProvider";
-<%_ if (answers["ui-framework"] === 'no') { _%>
+<%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
 import { Layout } from "~/components/layout";
 <%_ } _%>
 
 export default function BaseLayout() {
     return (
         <>
-             <%_ if (answers["ui-framework"] === 'no') { _%>
+             <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
                 <Layout>
                     <Outlet />
                 </Layout>
diff --git a/refine-remix/plugins/data-provider-strapi-v4/app/routes/_auth.forgot-password.tsx b/refine-remix/plugins/data-provider-strapi-v4/app/routes/_auth.forgot-password.tsx
index 67e6c36e2..444b0b0ed 100644
--- a/refine-remix/plugins/data-provider-strapi-v4/app/routes/_auth.forgot-password.tsx
+++ b/refine-remix/plugins/data-provider-strapi-v4/app/routes/_auth.forgot-password.tsx
@@ -4,7 +4,7 @@
  <%_ if (answers["ui-framework"] === 'mui') { _%>
      import { AuthPage } from "@refinedev/mui";
  <%_ } _%>
- <%_ if (answers[`ui-framework`] === "no") { _%>
+ <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { AuthPage } from "@refinedev/core";
 <%_ } _%>
 
diff --git a/refine-remix/plugins/data-provider-strapi-v4/app/routes/_auth.login.tsx b/refine-remix/plugins/data-provider-strapi-v4/app/routes/_auth.login.tsx
index ce932db85..8676c0da5 100644
--- a/refine-remix/plugins/data-provider-strapi-v4/app/routes/_auth.login.tsx
+++ b/refine-remix/plugins/data-provider-strapi-v4/app/routes/_auth.login.tsx
@@ -4,7 +4,7 @@
  <%_ if (answers["ui-framework"] === 'mui') { _%>
      import { AuthPage } from "@refinedev/mui";
  <%_ } _%>
- <%_ if (answers[`ui-framework`] === "no") { _%>
+ <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { AuthPage } from "@refinedev/core";
 <%_ } _%>
 
diff --git a/refine-remix/plugins/data-provider-strapi-v4/app/routes/_auth.register.tsx b/refine-remix/plugins/data-provider-strapi-v4/app/routes/_auth.register.tsx
index 036a38aef..9e7554799 100644
--- a/refine-remix/plugins/data-provider-strapi-v4/app/routes/_auth.register.tsx
+++ b/refine-remix/plugins/data-provider-strapi-v4/app/routes/_auth.register.tsx
@@ -4,7 +4,7 @@
  <%_ if (answers["ui-framework"] === 'mui') { _%>
      import { AuthPage } from "@refinedev/mui";
  <%_ } _%>
- <%_ if (answers[`ui-framework`] === "no") { _%>
+ <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { AuthPage } from "@refinedev/core";
 <%_ } _%>
 
diff --git a/refine-remix/plugins/data-provider-strapi-v4/app/routes/_layout.tsx b/refine-remix/plugins/data-provider-strapi-v4/app/routes/_layout.tsx
index a8310bfc7..e7b3f99ae 100644
--- a/refine-remix/plugins/data-provider-strapi-v4/app/routes/_layout.tsx
+++ b/refine-remix/plugins/data-provider-strapi-v4/app/routes/_layout.tsx
@@ -15,14 +15,14 @@ import {
 
 import { Header } from "@components/header";
 import { authProvider } from "~/authProvider";
-<%_ if (answers["ui-framework"] === 'no') { _%>
+<%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
 import { Layout } from "~/components/layout";
 <%_ } _%>
 
 export default function BaseLayout() {
     return (
         <>
-             <%_ if (answers["ui-framework"] === 'no') { _%>
+             <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
                 <Layout>
                     <Outlet />
                 </Layout>
diff --git a/refine-remix/plugins/data-provider-supabase/app/routes/_auth.forgot-password.tsx b/refine-remix/plugins/data-provider-supabase/app/routes/_auth.forgot-password.tsx
index 67e6c36e2..444b0b0ed 100644
--- a/refine-remix/plugins/data-provider-supabase/app/routes/_auth.forgot-password.tsx
+++ b/refine-remix/plugins/data-provider-supabase/app/routes/_auth.forgot-password.tsx
@@ -4,7 +4,7 @@
  <%_ if (answers["ui-framework"] === 'mui') { _%>
      import { AuthPage } from "@refinedev/mui";
  <%_ } _%>
- <%_ if (answers[`ui-framework`] === "no") { _%>
+ <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { AuthPage } from "@refinedev/core";
 <%_ } _%>
 
diff --git a/refine-remix/plugins/data-provider-supabase/app/routes/_auth.login.tsx b/refine-remix/plugins/data-provider-supabase/app/routes/_auth.login.tsx
index ce932db85..8676c0da5 100644
--- a/refine-remix/plugins/data-provider-supabase/app/routes/_auth.login.tsx
+++ b/refine-remix/plugins/data-provider-supabase/app/routes/_auth.login.tsx
@@ -4,7 +4,7 @@
  <%_ if (answers["ui-framework"] === 'mui') { _%>
      import { AuthPage } from "@refinedev/mui";
  <%_ } _%>
- <%_ if (answers[`ui-framework`] === "no") { _%>
+ <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { AuthPage } from "@refinedev/core";
 <%_ } _%>
 
diff --git a/refine-remix/plugins/data-provider-supabase/app/routes/_auth.register.tsx b/refine-remix/plugins/data-provider-supabase/app/routes/_auth.register.tsx
index 036a38aef..9e7554799 100644
--- a/refine-remix/plugins/data-provider-supabase/app/routes/_auth.register.tsx
+++ b/refine-remix/plugins/data-provider-supabase/app/routes/_auth.register.tsx
@@ -4,7 +4,7 @@
  <%_ if (answers["ui-framework"] === 'mui') { _%>
      import { AuthPage } from "@refinedev/mui";
  <%_ } _%>
- <%_ if (answers[`ui-framework`] === "no") { _%>
+ <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { AuthPage } from "@refinedev/core";
 <%_ } _%>
 
diff --git a/refine-remix/plugins/data-provider-supabase/app/routes/_layout.tsx b/refine-remix/plugins/data-provider-supabase/app/routes/_layout.tsx
index a8310bfc7..e7b3f99ae 100644
--- a/refine-remix/plugins/data-provider-supabase/app/routes/_layout.tsx
+++ b/refine-remix/plugins/data-provider-supabase/app/routes/_layout.tsx
@@ -15,14 +15,14 @@ import {
 
 import { Header } from "@components/header";
 import { authProvider } from "~/authProvider";
-<%_ if (answers["ui-framework"] === 'no') { _%>
+<%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
 import { Layout } from "~/components/layout";
 <%_ } _%>
 
 export default function BaseLayout() {
     return (
         <>
-             <%_ if (answers["ui-framework"] === 'no') { _%>
+             <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
                 <Layout>
                     <Outlet />
                 </Layout>
diff --git a/refine-remix/plugins/tailwindcss/app/global.css b/refine-remix/plugins/tailwindcss/app/global.css
new file mode 100644
index 000000000..d99ff9c0c
--- /dev/null
+++ b/refine-remix/plugins/tailwindcss/app/global.css
@@ -0,0 +1,104 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* 
+* These styles were added to improve the appearance of the example pages.
+* It is safe to delete them, and they are not intended to be used by Refine components.
+*/
+@layer base {
+    input {
+        @apply border border-gray-300 rounded-sm;
+    }
+
+    input[type="submit"] {
+        @apply bg-[#EFEFEF];
+    }
+
+    button {
+        @apply border border-gray-300 px-2 rounded-sm bg-[#EFEFEF];
+    }
+
+    h1 {
+        @apply text-2xl font-bold my-6;
+    }
+
+    ul {
+        @apply list-disc my-4;
+    }
+
+    a {
+        @apply text-blue-700 underline;
+    }
+
+    label {
+        @apply text-sm font-medium;
+    }
+
+    body {
+        @apply m-0 bg-white;
+    }
+
+    table {
+        @apply border border-black border-collapse;
+    }
+
+    table th,
+    table td {
+        @apply m-0 p-2 border-b border-r border-black;
+    }
+
+    table tr:last-child td {
+        @apply border-b-0;
+    }
+
+    table th:last-child,
+    table td:last-child {
+        @apply border-r-0;
+    }
+
+    .layout {
+        @apply flex gap-4;
+    }
+
+    @media (max-width: 751px) {
+        .layout {
+            @apply block;
+        }
+    }
+
+    .layout .content {
+        @apply flex flex-col flex-grow;
+    }
+
+    .breadcrumb {
+        @apply flex gap-6 p-2 px-4 border-b border-gray-300;
+        list-style-type: "/ ";
+    }
+
+    .breadcrumb a {
+        @apply text-blue-700 no-underline;
+    }
+
+    .menu {
+        @apply flex-shrink-0 p-2 pr-4 border-r border-gray-300;
+    }
+
+    .menu a {
+        @apply text-black;
+    }
+
+    .menu .active {
+        @apply font-bold;
+    }
+
+    @media (max-width: 751px) {
+        .menu {
+            @apply border-r-0 border-b border-gray-300;
+        }
+    }
+
+    .menu ul {
+        @apply pl-4;
+    }
+}
diff --git a/refine-remix/plugins/tailwindcss/meta.json b/refine-remix/plugins/tailwindcss/meta.json
new file mode 100644
index 000000000..ab0662175
--- /dev/null
+++ b/refine-remix/plugins/tailwindcss/meta.json
@@ -0,0 +1,4 @@
+{
+  "name": "Tailwind CSS",
+  "url": "https://refine.dev/docs/guides-concepts/general-concepts/#headless-concept"
+}
diff --git a/refine-remix/plugins/tailwindcss/package.json b/refine-remix/plugins/tailwindcss/package.json
new file mode 100644
index 000000000..9dc73ff2e
--- /dev/null
+++ b/refine-remix/plugins/tailwindcss/package.json
@@ -0,0 +1,7 @@
+{
+  "devDependencies": {
+    "tailwindcss": "^3.4.3",
+    "postcss": "^8.4.38",
+    "autoprefixer": "^10.4.19"
+  }
+}
diff --git a/refine-remix/plugins/tailwindcss/postcss.config.js b/refine-remix/plugins/tailwindcss/postcss.config.js
new file mode 100644
index 000000000..67cdf1a55
--- /dev/null
+++ b/refine-remix/plugins/tailwindcss/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};
diff --git a/refine-remix/plugins/tailwindcss/tailwind.config.ts b/refine-remix/plugins/tailwindcss/tailwind.config.ts
new file mode 100644
index 000000000..7e493683e
--- /dev/null
+++ b/refine-remix/plugins/tailwindcss/tailwind.config.ts
@@ -0,0 +1,9 @@
+import type { Config } from "tailwindcss";
+
+export default {
+    content: ["./app/**/*.{js,jsx,ts,tsx}"],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+} satisfies Config;
diff --git a/refine-remix/prompt.js b/refine-remix/prompt.js
index 64b720fe1..371097605 100644
--- a/refine-remix/prompt.js
+++ b/refine-remix/prompt.js
@@ -75,6 +75,11 @@ module.exports = {
                     name: "mui",
                     hint: "Installs Material UI package.",
                 },
+                {
+                    message: "Tailwind CSS",
+                    name: "tailwindcss",
+                    hint: "Installs Tailwind CSS package.",
+                },
             ],
             default: "no",
         },
@@ -194,7 +199,8 @@ module.exports = {
             when: function (answers) {
                 return (
                     typeof answers["svg"] === "undefined" ||
-                    answers["ui-framework"] === "no"
+                    answers["ui-framework"] === "no" ||
+                    answers["ui-framework"] === "tailwindcss"
                 );
             },
             pattern: ["app/components/app-icon/index.tsx"],
@@ -202,7 +208,10 @@ module.exports = {
         {
             plugin: ["_base"],
             when: function (answers) {
-                return answers["ui-framework"] !== "no";
+                return (
+                    answers["ui-framework"] !== "no" &&
+                    answers["ui-framework"] !== "tailwindcss"
+                );
             },
             pattern: [
                 "app/components/breadcrumb/index.tsx",
diff --git a/refine-vite/plugins/_base/extend.js b/refine-vite/plugins/_base/extend.js
index ce734aba3..801cd7bfa 100644
--- a/refine-vite/plugins/_base/extend.js
+++ b/refine-vite/plugins/_base/extend.js
@@ -28,6 +28,8 @@ module.exports = {
     extend(answers) {
         const uiFramework = answers["ui-framework"];
         const dataProvider = answers["data-provider"];
+        const isHeadless =
+            uiFramework === "no" || uiFramework === "tailwindcss";
 
         switch (uiFramework) {
             case "antd":
@@ -102,7 +104,7 @@ module.exports = {
         ];
 
         // update for headless
-        if (uiFramework === "no") {
+        if (isHeadless) {
             base._app.authPageProps = [
                 `
                 renderContent={(content) => (
@@ -160,16 +162,13 @@ module.exports = {
             base.selectedSvg = svgFromAnswers;
         }
 
-        if (
-            answers["ui-framework"] !== "no" &&
-            (answers["title"] || answers["svg"])
-        ) {
+        if (!isHeadless && (answers["title"] || answers["svg"])) {
             base._app.localImport.push(
                 'import { AppIcon } from "./components/app-icon";',
             );
         }
 
-        if (answers["ui-framework"] === "no") {
+        if (isHeadless) {
             base._app.localImport.push(
                 `import { Layout } from "./components/layout";`,
             );
@@ -200,7 +199,7 @@ module.exports = {
         } else if (dataProvider === "data-provider-supabase") {
             base.blogPostCategoryIdFormField = `"categoryId"`;
         } else {
-            if (uiFramework === "mui" || uiFramework === "no") {
+            if (uiFramework === "mui" || isHeadless) {
                 base.blogPostCategoryIdFormField = `"category.id"`;
             } else {
                 base.blogPostCategoryIdFormField = `["category", "id"]`;
@@ -209,7 +208,7 @@ module.exports = {
 
         // ## blogPostCategoryTableField
         if (base.isGraphQL) {
-            if (uiFramework === "no") {
+            if (isHeadless) {
                 base.blogPostCategoryTableField = `"category.title"`;
             }
             if (uiFramework === "antd") {
@@ -240,7 +239,7 @@ module.exports = {
                 { value: "rejected", label: "Rejected" },
             ]);
         }
-        if (uiFramework === "no" || uiFramework === "mui") {
+        if (isHeadless || uiFramework === "mui") {
             base.blogPostStatusOptions = JSON.parse(base.blogPostStatusOptions);
         }
 
@@ -252,17 +251,16 @@ module.exports = {
         }
 
         // ## Refine options.title
-        if (
-            answers["ui-framework"] !== "no" &&
-            (answers["title"] || answers["svg"])
-        ) {
+        if (!isHeadless && (answers["title"] || answers["svg"])) {
             if (!base._app.refineOptions) {
                 base._app.refineOptions = [];
             }
-            const textLine = answers["title"] ? `text: "${answers["title"]}",` : "";
+            const textLine = answers["title"]
+                ? `text: "${answers["title"]}",`
+                : "";
             const iconLine = answers["svg"] ? `icon: <AppIcon />,` : "";
             const template = `title: { ${textLine} ${iconLine} },`;
-            
+
             base._app.refineOptions.push(template);
         }
 
diff --git a/refine-vite/plugins/_base/src/App.css b/refine-vite/plugins/_base/src/App.css
index 7d0bec252..2b664c8b2 100644
--- a/refine-vite/plugins/_base/src/App.css
+++ b/refine-vite/plugins/_base/src/App.css
@@ -1,5 +1,6 @@
 body {
     margin: 0px;
+    background: white;
 }
 
 table {
diff --git a/refine-vite/plugins/auth-provider-auth0/src/pages/login.tsx b/refine-vite/plugins/auth-provider-auth0/src/pages/login.tsx
index 9c4661c14..feeb66fea 100644
--- a/refine-vite/plugins/auth-provider-auth0/src/pages/login.tsx
+++ b/refine-vite/plugins/auth-provider-auth0/src/pages/login.tsx
@@ -95,7 +95,7 @@ export const Login: React.FC = () => {
         );
     <%_ } _%>
 
-    <%_ if (answers["ui-framework"] === "no") { _%>
+    <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
         return(
             <div
                 style={{
diff --git a/refine-vite/plugins/auth-provider-custom/src/pages/forgotPassword/index.tsx b/refine-vite/plugins/auth-provider-custom/src/pages/forgotPassword/index.tsx
index c2778d964..350e2dd6f 100644
--- a/refine-vite/plugins/auth-provider-custom/src/pages/forgotPassword/index.tsx
+++ b/refine-vite/plugins/auth-provider-custom/src/pages/forgotPassword/index.tsx
@@ -1,4 +1,4 @@
-<%_ if (answers[`ui-framework`] === "no") { _%>
+<%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { AuthPage } from "@refinedev/core";
 <%_ } _%>
 <%_ if (answers["ui-framework"] === 'antd') { _%>
diff --git a/refine-vite/plugins/auth-provider-custom/src/pages/login/index.tsx b/refine-vite/plugins/auth-provider-custom/src/pages/login/index.tsx
index 45df0e9ab..318e16ab6 100644
--- a/refine-vite/plugins/auth-provider-custom/src/pages/login/index.tsx
+++ b/refine-vite/plugins/auth-provider-custom/src/pages/login/index.tsx
@@ -1,4 +1,4 @@
-<%_ if (answers[`ui-framework`] === "no") { _%>
+<%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { AuthPage } from "@refinedev/core";
 <%_ } _%>
 <%_ if (answers["ui-framework"] === 'antd') { _%>
diff --git a/refine-vite/plugins/auth-provider-custom/src/pages/register/index.tsx b/refine-vite/plugins/auth-provider-custom/src/pages/register/index.tsx
index 427219d03..509c34ee1 100644
--- a/refine-vite/plugins/auth-provider-custom/src/pages/register/index.tsx
+++ b/refine-vite/plugins/auth-provider-custom/src/pages/register/index.tsx
@@ -1,4 +1,4 @@
-<%_ if (answers[`ui-framework`] === "no") { _%>
+<%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
     import { AuthPage } from "@refinedev/core";
 <%_ } _%>
 <%_ if (answers["ui-framework"] === 'antd') { _%>
diff --git a/refine-vite/plugins/auth-provider-google/src/pages/login.tsx b/refine-vite/plugins/auth-provider-google/src/pages/login.tsx
index 4390edabd..a84ba3e25 100644
--- a/refine-vite/plugins/auth-provider-google/src/pages/login.tsx
+++ b/refine-vite/plugins/auth-provider-google/src/pages/login.tsx
@@ -129,7 +129,7 @@ export const Login: React.FC = () => {
         );
     <%_ } _%>
 
-    <%_ if (answers["ui-framework"] === "no") { _%>
+    <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
         return(
             <div
                 style={{
diff --git a/refine-vite/plugins/auth-provider-keycloak/src/pages/login.tsx b/refine-vite/plugins/auth-provider-keycloak/src/pages/login.tsx
index 351c17084..cafedeaf6 100644
--- a/refine-vite/plugins/auth-provider-keycloak/src/pages/login.tsx
+++ b/refine-vite/plugins/auth-provider-keycloak/src/pages/login.tsx
@@ -94,7 +94,7 @@ export const Login: React.FC = () => {
         );
     <%_ } _%>
 
-    <%_ if (answers["ui-framework"] === "no") { _%>
+    <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
         return(
             <div
                 style={{
diff --git a/refine-vite/plugins/tailwindcss/meta.json b/refine-vite/plugins/tailwindcss/meta.json
new file mode 100644
index 000000000..ab0662175
--- /dev/null
+++ b/refine-vite/plugins/tailwindcss/meta.json
@@ -0,0 +1,4 @@
+{
+  "name": "Tailwind CSS",
+  "url": "https://refine.dev/docs/guides-concepts/general-concepts/#headless-concept"
+}
diff --git a/refine-vite/plugins/tailwindcss/package.json b/refine-vite/plugins/tailwindcss/package.json
new file mode 100644
index 000000000..9dc73ff2e
--- /dev/null
+++ b/refine-vite/plugins/tailwindcss/package.json
@@ -0,0 +1,7 @@
+{
+  "devDependencies": {
+    "tailwindcss": "^3.4.3",
+    "postcss": "^8.4.38",
+    "autoprefixer": "^10.4.19"
+  }
+}
diff --git a/refine-vite/plugins/tailwindcss/postcss.config.js b/refine-vite/plugins/tailwindcss/postcss.config.js
new file mode 100644
index 000000000..49c0612d5
--- /dev/null
+++ b/refine-vite/plugins/tailwindcss/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};
diff --git a/refine-vite/plugins/tailwindcss/src/App.css b/refine-vite/plugins/tailwindcss/src/App.css
new file mode 100644
index 000000000..d99ff9c0c
--- /dev/null
+++ b/refine-vite/plugins/tailwindcss/src/App.css
@@ -0,0 +1,104 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* 
+* These styles were added to improve the appearance of the example pages.
+* It is safe to delete them, and they are not intended to be used by Refine components.
+*/
+@layer base {
+    input {
+        @apply border border-gray-300 rounded-sm;
+    }
+
+    input[type="submit"] {
+        @apply bg-[#EFEFEF];
+    }
+
+    button {
+        @apply border border-gray-300 px-2 rounded-sm bg-[#EFEFEF];
+    }
+
+    h1 {
+        @apply text-2xl font-bold my-6;
+    }
+
+    ul {
+        @apply list-disc my-4;
+    }
+
+    a {
+        @apply text-blue-700 underline;
+    }
+
+    label {
+        @apply text-sm font-medium;
+    }
+
+    body {
+        @apply m-0 bg-white;
+    }
+
+    table {
+        @apply border border-black border-collapse;
+    }
+
+    table th,
+    table td {
+        @apply m-0 p-2 border-b border-r border-black;
+    }
+
+    table tr:last-child td {
+        @apply border-b-0;
+    }
+
+    table th:last-child,
+    table td:last-child {
+        @apply border-r-0;
+    }
+
+    .layout {
+        @apply flex gap-4;
+    }
+
+    @media (max-width: 751px) {
+        .layout {
+            @apply block;
+        }
+    }
+
+    .layout .content {
+        @apply flex flex-col flex-grow;
+    }
+
+    .breadcrumb {
+        @apply flex gap-6 p-2 px-4 border-b border-gray-300;
+        list-style-type: "/ ";
+    }
+
+    .breadcrumb a {
+        @apply text-blue-700 no-underline;
+    }
+
+    .menu {
+        @apply flex-shrink-0 p-2 pr-4 border-r border-gray-300;
+    }
+
+    .menu a {
+        @apply text-black;
+    }
+
+    .menu .active {
+        @apply font-bold;
+    }
+
+    @media (max-width: 751px) {
+        .menu {
+            @apply border-r-0 border-b border-gray-300;
+        }
+    }
+
+    .menu ul {
+        @apply pl-4;
+    }
+}
diff --git a/refine-vite/plugins/tailwindcss/tailwind.config.js b/refine-vite/plugins/tailwindcss/tailwind.config.js
new file mode 100644
index 000000000..40eda6655
--- /dev/null
+++ b/refine-vite/plugins/tailwindcss/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+};
diff --git a/refine-vite/prompt.js b/refine-vite/prompt.js
index a6fbbb652..12874d512 100644
--- a/refine-vite/prompt.js
+++ b/refine-vite/prompt.js
@@ -75,6 +75,11 @@ module.exports = {
                     name: "mui",
                     hint: "Installs Material UI package.",
                 },
+                {
+                    message: "Tailwind CSS",
+                    name: "tailwindcss",
+                    hint: "Installs Tailwind CSS package.",
+                },
             ],
             default: "no",
         },
@@ -207,7 +212,8 @@ module.exports = {
             when: function (answers) {
                 return (
                     typeof answers["svg"] === "undefined" ||
-                    answers["ui-framework"] === "no"
+                    answers["ui-framework"] === "no" ||
+                    answers["ui-framework"] === "tailwindcss"
                 );
             },
             pattern: ["src/components/app-icon/index.tsx"],
@@ -215,7 +221,10 @@ module.exports = {
         {
             plugin: ["_base"],
             when: function (answers) {
-                return answers["ui-framework"] !== "no";
+                return (
+                    answers["ui-framework"] !== "no" &&
+                    answers["ui-framework"] !== "tailwindcss"
+                );
             },
             pattern: [
                 "src/components/breadcrumb/index.tsx",
diff --git a/refine-vite/template/src/App.tsx b/refine-vite/template/src/App.tsx
index fd9f41ae0..5e22e517f 100644
--- a/refine-vite/template/src/App.tsx
+++ b/refine-vite/template/src/App.tsx
@@ -96,7 +96,7 @@ function App() {
                                     key="authenticated-inner"
                                     fallback={<CatchAllNavigate to="/login" />}
                                 >
-                                    <%_ if (answers["ui-framework"] === 'no') { _%>
+                                    <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
                                         <Layout>
                                             <Outlet />
                                         </Layout>
@@ -174,7 +174,7 @@ function App() {
                     <Routes>
                         <Route
                             element={(
-                                <%_ if (answers["ui-framework"] === 'no') { _%>
+                                <%_ if (answers["ui-framework"] === "no" || answers["ui-framework"] === "tailwindcss") { _%>
                                     <Layout>
                                         <Outlet />
                                     </Layout>