feat: tailwind 4.0

2025-01-23 14:30:02 +01:00
parent d5a4345600
commit 8039288b33
31 changed files with 108 additions and 1708 deletions
@@ -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>
@@ -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>
@@ -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 *));
@@ -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'),
-  ],
-}