feat: add tailwind remix

pankod · May 31, 2024 · 3c1ffc0 · 3c1ffc0
1 parent 9431afc
commit 3c1ffc0
Show file tree

Hide file tree

Showing 31 changed files with 74 additions and 59 deletions.
diff --git a/presets.js b/presets.js
@@ -124,5 +124,17 @@ module.exports = {
                 "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/tailwindcss/tailwind.config.js b/refine-nextjs/plugins/tailwindcss/tailwind.config.js
diff --git 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
@@ -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
@@ -15,15 +15,15 @@ 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-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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...plugins/tailwindcss/src/styles/global.css → ...-remix/plugins/tailwindcss/app/global.css b/...plugins/tailwindcss/src/styles/global.css → ...-remix/plugins/tailwindcss/app/global.css
diff --git a/refine-nextjs/plugins/tailwindcss/meta.json → refine-remix/plugins/tailwindcss/meta.json b/refine-nextjs/plugins/tailwindcss/meta.json → refine-remix/plugins/tailwindcss/meta.json
diff --git a/...e-nextjs/plugins/tailwindcss/package.json → ...ne-remix/plugins/tailwindcss/package.json b/...e-nextjs/plugins/tailwindcss/package.json → ...ne-remix/plugins/tailwindcss/package.json
diff --git a/...tjs/plugins/tailwindcss/postcss.config.js → ...mix/plugins/tailwindcss/postcss.config.js b/...tjs/plugins/tailwindcss/postcss.config.js → ...mix/plugins/tailwindcss/postcss.config.js
diff --git a/refine-remix/plugins/tailwindcss/tailwind.config.ts 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;