feat: tailwind 4.0

config/settings/base.py

@@ -34,7 +34,6 @@ THIRD_PARTY_APPS = [
     "drf_spectacular",
     "gonk",
     "rest_framework_simplejwt",
-    "tailwind",
 ]
 
 PROJECT_APPS = [

config/urls.py

@@ -12,6 +12,7 @@ urlpatterns = [
     path("tpv/", include("shop.urls", namespace="shop")),
 ]
 
+
 if settings.DEBUG:
     urlpatterns.append(path("__debug__/", include(debug_toolbar.urls)))
     urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

requirements.txt

@@ -11,7 +11,6 @@ django-environ==0.10.0
 django-watchman==1.3.0
 django-silk==5.1.0
 django-storages==1.13.2
-django-tailwind==3.8.0
 django-unfold==0.42.0
 djangorestframework==3.15.2
 dj-database-url==1.0.0
@@ -24,5 +23,6 @@ psycopg2-binary==2.9.9
 pyDes==2.0.1
 redis==4.5.4
 requests==2.32.3
+pytailwindcss==0.2.0
 uvicorn==0.21.1
 xmltodict==0.13.0

tailwind.config.js

@@ -50,19 +50,6 @@ module.exports = {
         gray: colors.zinc,
         accent: colors.teal,
         primary: colors.rose,
-        secondary: {
-          50: '#d1daf5',
-          100: '#bac3e0',
-          200: '#a4accc',
-          300: '#8e96b8',
-          400: '#7a81a4',
-          500: '#656c91',
-          DEFAULT: '#52587e',
-          600: '#3f446b',
-          700: '#2c3259',
-          800: '#192047',
-          900: '#070e36'
-        }
       }
     }
   },

theme/management/commands/build_tailwind_theme.py

@@ -1,4 +1,8 @@
 import os
+import subprocess
+
+from dataclasses import dataclass
+
 from django.conf import settings
 from django.core.management.base import BaseCommand
 from django.template.loader import render_to_string
@@ -6,6 +10,13 @@ from django.core.management import call_command
 from web.models import WebSettings
 
 
+@dataclass
+class Color:
+    name: str
+    index: int
+    value: str
+
+
 class Command(BaseCommand):
     """
     Usage:
@@ -16,15 +27,29 @@ class Command(BaseCommand):
     def handle(self, *args, **options):
         web_settings = WebSettings.load()
         path = os.path.join(
-            settings.BASE_DIR, "theme", "static_src", "tailwind.config.js"
+            settings.BASE_DIR, "theme", "static", "css", "main.css"
         )
+
+        colors = []
+        for color_name, data in web_settings.theme_colors.items():
+            for index, value in data.items():
+                color = Color(color_name, index, value)
+                colors.append(color)
+
         result = str(
             render_to_string(
-                "theme/tailwind.config.template.js", context=web_settings.theme_colors
+                "theme/main.css.template", context={"colors": colors},
             )
         )
         with open(path, "w") as f:
             f.write(result)
 
-        call_command("tailwind", "build")
+        subprocess.run([
+            "tailwindcss",
+            "-i",
+            "theme/static/css/main.css",
+            "-o",
+            "theme/static/css/styles.css",
+            "--minify",
+        ])
         call_command("collectstatic", "--no-input")

theme/static/css/main.css

@@ -0,0 +1,36 @@
+@import "tailwindcss";
+
+
+@theme {
+    --font-display: "Satoshi", "sans-serif";
+    --breakpoint-3xl: 1920px;
+
+    --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
+    --ease-snappy: cubic-bezier(0.2, 0, 0, 1);  /* ... */
+
+    --color-primary-50: #fff1f2;
+    --color-primary-100: #ffe4e6;
+    --color-primary-200: #fecdd3;
+    --color-primary-300: #fda4af;
+    --color-primary-400: #fb7185;
+    --color-primary-500: #f43f5e;
+    --color-primary-600: #e11d48;
+    --color-primary-700: #be123c;
+    --color-primary-800: #9f1239;
+    --color-primary-900: #881337;
+    --color-primary-950: #4c0519;
+
+    --color-gray-50: #fafafa;
+    --color-gray-100: #f4f4f5;
+    --color-gray-200: #e4e4e7;
+    --color-gray-300: #d4d4d8;
+    --color-gray-400: #a1a1aa;
+    --color-gray-500: #71717a;
+    --color-gray-600: #52525b;
+    --color-gray-700: #3f3f46;
+    --color-gray-800: #27272a;
+    --color-gray-900: #18181b;
+    --color-gray-950: #09090b;
+}
+
+@variant dark (&:where(.dark, .dark *));

theme/static_src/.gitignore

@@ -1 +0,0 @@
-node_modules

theme/static_src/package.json

@@ -1,28 +0,0 @@
-{
-  "name": "theme",
-  "version": "3.8.0",
-  "description": "",
-  "scripts": {
-    "start": "npm run dev",
-    "build": "npm run build:clean && npm run build:tailwind",
-    "build:clean": "rimraf ../static/css/dist",
-    "build:tailwind": "cross-env NODE_ENV=production tailwindcss --postcss -i ./src/styles.css -o ../static/css/dist/styles.css --minify",
-    "dev": "cross-env NODE_ENV=development tailwindcss --postcss -i ./src/styles.css -o ../static/css/dist/styles.css -w",
-    "tailwindcss": "node ./node_modules/tailwindcss/lib/cli.js"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
-  "devDependencies": {
-    "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.10",
-    "cross-env": "^7.0.3",
-    "postcss": "^8.4.32",
-    "postcss-import": "^15.1.0",
-    "postcss-nested": "^6.0.1",
-    "postcss-simple-vars": "^7.0.1",
-    "rimraf": "^5.0.5",
-    "tailwindcss": "^3.4.0"
-  }
-}

theme/static_src/postcss.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  plugins: {
-    "postcss-import": {},
-    "postcss-simple-vars": {},
-    "postcss-nested": {}
-  },
-}

theme/static_src/src/styles.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

theme/templates/components/theme-switch.html

@@ -3,7 +3,7 @@
   id="theme-toggle"
   type="button"
   aria-label="switchtheme"
-  class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5">
+  class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5 cursor-pointer">
     {% include 'components/icons/moon.svg' %}
     {% include 'components/icons/sun.svg' %}
 </button>

theme/templates/theme/base.html

@@ -1,4 +1,4 @@
-{% load static tailwind_tags %}
+{% load static %}
 <!DOCTYPE html>
 <html lang="es">
 <head>
@@ -12,7 +12,7 @@
   <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
   <script src="https://unpkg.com/htmx.org@2.0.3"></script>
 
-  {% tailwind_css %}
+  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
   {% block extra_js %}
   {% endblock %}
 </head>

theme/templates/theme/main.css.template

@@ -0,0 +1,16 @@
+@import "tailwindcss";
+
+
+@theme {
+    --font-display: "Satoshi", "sans-serif";
+    --breakpoint-3xl: 1920px;
+
+    --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
+    --ease-snappy: cubic-bezier(0.2, 0, 0, 1);  /* ... */
+
+    {% for color in colors %}
+    --color-{{ color.name }}-{{ color.index }}: {{ color.value }};
+    {% endfor %}
+}
+
+@variant dark (&:where(.dark, .dark *));

theme/templates/theme/tailwind.config.template.js

@@ -1,90 +0,0 @@
-/**
- * This is a minimal config.
- *
- * If you need the full config, get it from here:
- * https://unpkg.com/browse/tailwindcss@latest/stubs/defaultConfig.stub.js
- */
-const colors = require('tailwindcss/colors')
-
-
-module.exports = {
-  content: [
-    /**
-     * HTML. Paths to Django template files that will contain Tailwind CSS classes.
-     */
-
-    /*  Templates within theme app (<tailwind_app_name>/templates), e.g. base.html. */
-    '../templates/**/*.html',
-
-    /*
-     * Main templates directory of the project (BASE_DIR/templates).
-     * Adjust the following line to match your project structure.
-     */
-    '../../templates/**/*.html',
-
-    /*
-     * Templates in other django apps (BASE_DIR/<any_app_name>/templates).
-     * Adjust the following line to match your project structure.
-     */
-    '../../**/templates/**/*.html',
-
-    /**
-     * JS: If you use Tailwind CSS in JavaScript, uncomment the following lines and make sure
-     * patterns match your project structure.
-     */
-    /* JS 1: Ignore any JavaScript in node_modules folder. */
-    // '!../../**/node_modules',
-    /* JS 2: Process all JavaScript files in the project. */
-    // '../../**/*.js',
-
-    /**
-     * Python: If you use Tailwind CSS classes in Python, uncomment the following line
-     * and make sure the pattern below matches your project structure.
-     */
-    // '../../**/*.py'
-  ],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        {% if gray %}
-        gray: {
-          {% for k, v in gray.items %}
-            {{k}}: '{{v}}'{% if not forloop.last %},{% endif %}
-          {% endfor %}
-        },
-        {% else %}
-        gray: colors.zinc,
-        {% endif %}
-        {% if accent %}
-        accent: {
-          {% for k, v in accent.items %}
-            {{k}}: '{{v}}'{% if not forloop.last %},{% endif %}
-          {% endfor %}
-        },
-        {% else %}
-        accent: colors.teal,
-        {% endif %}
-        {% if primary %}
-        primary: {
-          {% for k, v in primary.items %}
-            {{k}}: '{{v}}'{% if not forloop.last %},{% endif %}
-          {% endfor %}
-        },
-        {% else %}
-        primary: colors.rose,
-        {% endif %}
-      }
-    }
-  },
-  plugins: [
-    /**
-     * '@tailwindcss/forms' is the forms plugin that provides a minimal styling
-     * for forms. If you don't like it or have own styling for forms,
-     * comment the line below to disable '@tailwindcss/forms'.
-     */
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/aspect-ratio'),
-  ],
-}

web/templates/components/cart/add_to_cart.html

@@ -11,7 +11,7 @@
   <button class="w-full flex justify-center rounded-lg bg-primary-700 px-5 py-2.5
                  text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4
                  focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800
-                 content-center items-center"
+                 content-center items-center cursor-pointer"
   >
     {% include 'components/icons/add_cart.svg' %}
     {% translate 'Añadir al carrito' %}

web/templates/components/cart/cart.html

@@ -35,7 +35,7 @@
                                             {% csrf_token %}
                                             <button
                                                     type="submit"
-                                                    class="inline-flex items-center text-sm font-medium text-red-700 hover:underline dark:text-red-400"
+                                                    class="inline-flex items-center text-sm font-medium text-red-700 hover:underline dark:text-red-400 cursor-pointer"
                                             >
                                                 {% include 'components/icons/x.svg' %}
                                                 {% translate 'Quitar' %}
@@ -360,7 +360,7 @@
                             </dl>
                         </div>
 
-                        <button class="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
+                        <button class="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 cursor-pointer">
                             {% translate 'Terminar pedido' %}
                         </button>
 

web/templates/components/cart/cart_navbar.html

@@ -3,7 +3,7 @@
         hx-on:click="htmx.toggleClass(htmx.find('#myCartDropdown1'), 'hidden'); htmx.addClass(htmx.find('#userDropdown1'), 'hidden')"
         id="myCartDropdownButton1"
         data-dropdown-toggle="myCartDropdown1" type="button"
-        class="inline-flex items-center rounded-lg justify-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white">
+        class="inline-flex items-center rounded-lg justify-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white cursor-pointer">
     {% include 'components/icons/cart.svg' %}
     <span class="hidden sm:flex">
     {% translate 'Carrito' %}</span>
@@ -39,7 +39,7 @@
 
             </span>
                     <button data-tooltip-target="tooltipRemoveItem1a" type="submit"
-                            class="text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-600"
+                            class="text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-600 cursor-pointer"
                     >
                         {% csrf_token %}
                         <span class="sr-only">{% translate 'Quitar' %}</span>

web/templates/components/default/form.html

@@ -23,7 +23,7 @@
   <footer class="flex justify-end">
     <button class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none
                    focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600
-                   dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+                   dark:hover:bg-primary-700 dark:focus:ring-primary-800 cursor-pointer"
     >
       {{ save_button_text }}
     </button>

web/templates/components/generic/navbar.html

@@ -48,7 +48,7 @@
             id="userDropdownButton1"
             data-dropdown-toggle="userDropdown1" type="button"
             aria-label="show menu"
-            class="inline-flex items-center rounded-lg justify-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white">
+            class="inline-flex items-center rounded-lg justify-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white cursor-pointer">
             {% include 'components/icons/user.svg' %}
             <span class="hidden sm:flex">
               {% translate 'Mi cuenta' %}
@@ -73,7 +73,7 @@
                 data-collapse-toggle="ecommerce-navbar-menu-1" aria-controls="ecommerce-navbar-menu-1"
                 aria-expanded="false"
                 aria-label="show menu"
-                class="inline-flex lg:hidden items-center justify-center hover:bg-gray-100 rounded-md dark:hover:bg-gray-700 p-2 text-gray-900 dark:text-white">
+                class="inline-flex lg:hidden items-center justify-center hover:bg-gray-100 rounded-md dark:hover:bg-gray-700 p-2 text-gray-900 dark:text-white cursor-pointer">
           <span class="sr-only">
             {% translate 'Abrir menú' %}
           </span>

web/templates/components/generic/toast.html

@@ -13,7 +13,7 @@
     <button type="button"
             class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2
             focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8
-            dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
+            dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700 cursor-pointer"
             data-dismiss-target="#toast-default" aria-label="Close"
             hx-on:click="htmx.toggleClass(htmx.find('#toast-default'), 'hidden')"
     >

web/templates/components/products/wishlist_button.html

@@ -3,7 +3,7 @@
   <form action="" hx-post="{% url 'web:delete_from_wishlist' pk=product.pk %}" hx-swap="none">
     <input type="hidden" name="product" value="{{ product.pk }}">
     {% csrf_token %}
-    <button aria-label="dislike">
+    <button class="cursor-pointer" aria-label="dislike">
       {% include 'components/icons/liked.svg' %}
     </button>
   </form>
@@ -11,7 +11,7 @@
   <form action="" hx-post="{% url 'web:add_to_wishlist' %}" hx-swap="none">
     <input type="hidden" name="product" value="{{ product.pk }}">
     {% csrf_token %}
-    <button aria-label="like">
+    <button class="cursor-pointer" aria-label="like">
       {% include 'components/icons/like.svg' %}
     </button>
   </form>

web/templates/components/users/info.html

@@ -18,7 +18,7 @@
 
   <button class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none
                    focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600
-                   dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+                   dark:hover:bg-primary-700 dark:focus:ring-primary-800 cursor-pointer"
   >
     {% translate 'Guardar' %}
   </button>

web/templates/components/users/retrieve_update_address.html

@@ -104,7 +104,7 @@
     <div class="flex justify-end">
         <button class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none
                    focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600
-                   dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+                   dark:hover:bg-primary-700 dark:focus:ring-primary-800 cursor-pointer"
         >
             {% translate 'Guardar' %}
         </button>
@@ -153,7 +153,7 @@
                 data-modal-target="accountInformationModal2" data-modal-toggle="accountInformationModal2"
                 class="inline-flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm
                        font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300
-                       dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-auto"
+                       dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-auto cursor-pointer"
         >
             {% include 'components/icons/edit.svg' %}
             {% translate 'Editar datos' %}

web/templates/users/login.html

@@ -51,7 +51,7 @@
             {% endfor %}
 
             <button
-              class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
+              class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 cursor-pointer">
               {% translate 'Iniciar sesión' %}
             </button>
 

web/templates/users/register.html

@@ -38,7 +38,7 @@
 
             <button class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none
                            focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center
-                           dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 mt-4">
+                           dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 mt-4 cursor-pointer">
               {% translate 'Crear cuenta' %}
             </button>
             <p class="text-sm font-light text-gray-500 mt-4 dark:text-gray-400">

web/templates/users/reset_password.html

@@ -30,7 +30,7 @@
 
             {% endfor %}
             <button
-              class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
+              class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 cursor-pointer">
               {% translate 'Restablecer contraseña' %}
             </button>
             <p class="text-sm font-light text-gray-500 mt-4 dark:text-gray-400">

web/templates/users/reset_password_confirm.html

@@ -31,7 +31,7 @@
 
             {% endfor %}
             <button
-              class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
+              class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 cursor-pointer">
               {% translate 'Restablecer contraseña' %}
             </button>
             <p class="text-sm font-light text-gray-500 mt-4 dark:text-gray-400">

web/templates/web/list_products.html

@@ -15,7 +15,7 @@
   class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
     hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
     focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
-    dark:hover:text-white dark:focus:ring-gray-700"
+    dark:hover:text-white dark:focus:ring-gray-700 cursor-pointer"
   hx-get="{% url 'web:list_products' %}{% querystring page=page.previous_page_number %}"
   hx-trigger="click"
   hx-target="#products"
@@ -29,7 +29,7 @@
   class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
     hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
     focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
-    dark:hover:text-white dark:focus:ring-gray-700"
+    dark:hover:text-white dark:focus:ring-gray-700 cursor-pointer"
   hx-get="{% url 'web:list_products' %}{% querystring page=page.next_page_number %}"
   hx-trigger="click"
   hx-target="#products"

web/templates/web/order.html

@@ -169,7 +169,7 @@
                         <input type="hidden" name="Ds_MerchantParameters" value="{{ merchant_parameters }}"/>
                         <input type="hidden" name="Ds_Signature" value="{{ signature }}"/>
 
-                        <button class="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
+                        <button class="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 cursor-pointer">
                             {% translate 'Pagar' %}
                         </button>
                     </form>