pankod · alicanerdurmaz · Jun 5, 2024 · May 31, 2024 · May 31, 2024 · May 31, 2024
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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("[email protected]");
                     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
@@ -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
@@ -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,24 +128,21 @@ 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";`,
             );
             base._app.localImport.push(`import "@styles/global.css";`);
         }
 
         // 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};