feat: tailwind 4.0

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/static_src/tailwind.config.js

@@ -1,79 +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: {
-        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'
-        }
-      }
-    }
-  },
-  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'),
-  ],
-}

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'),
-  ],
-}