Add tailwind and daisyUI

theme/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class ThemeConfig(AppConfig):
+    name = 'theme'

theme/static_src/package.json

@@ -0,0 +1,29 @@
+{
+  "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.10",
+    "@tailwindcss/typography": "^0.5.16",
+    "cross-env": "^7.0.3",
+    "postcss": "^8.5.1",
+    "postcss-import": "^16.1.0",
+    "postcss-nested": "^7.0.2",
+    "postcss-simple-vars": "^7.0.1",
+    "rimraf": "^6.0.1",
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/cli": "^4.0.0"
+  }
+}

theme/static_src/postcss.config.js

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

theme/static_src/src/styles.css

@@ -0,0 +1,75 @@
+/*
+* This is where you can configure the folders that Tailwind will scan.
+* 
+* For detailed documents, check the Tailwind docs at:
+*
+* https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources
+*
+* This default configuration will scan all folder in your root project directory.
+*
+* Here is an example configuration that will only scan your templates/ folder:
+* 
+* @import "tailwindcss" source(none);
+*
+* @source "../../../templates";
+*/
+
+@import "tailwindcss" source("../../../");
+
+
+/*
+* If you would like to customise you theme, you can do that here too.
+*
+* https://tailwindcss.com/docs/theme
+*
+*/
+
+@theme {}
+
+
+/*
+* You can install tailwind plugins like below.
+*
+* https://tailwindcss.com/docs/functions-and-directives#plugin-directive
+*
+*/
+
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+@plugin "@tailwindcss/aspect-ratio";
+
+
+@plugin "daisyui/theme" {
+  name: "acid";
+  default: false;
+  prefersdark: true;
+  color-scheme: "dark";
+  --color-base-100: oklch(98% 0 0);
+  --color-base-200: oklch(92% 0 0);
+  --color-base-300: oklch(87% 0 0);
+  --color-base-content: oklch(0% 0 0);
+  --color-primary: #CF36E0;
+  --color-primary-content: oklch(98% 0.003 247.858);
+  --color-secondary: #8040E0;
+  --color-secondary-content: oklch(98% 0.003 247.858);
+  --color-accent: #1070EB;
+  --color-accent-content: oklch(18.556% 0.052 122.962);
+  --color-neutral: oklch(43% 0 0);
+  --color-neutral-content: oklch(98% 0.003 247.858);
+  --color-info: #302FD9;
+  --color-info-content: oklch(98% 0.003 247.858);
+  --color-success: #20AA80;
+  --color-success-content: oklch(12% 0.042 264.695);
+  --color-warning: #EB8600;
+  --color-warning-content: oklch(18.202% 0.042 100.5);
+  --color-error: #E00202;
+  --color-error-content: oklch(98% 0.003 247.858);
+  --radius-selector: 0rem;
+  --radius-field: 0rem;
+  --radius-box: 0rem;
+  --size-selector: 0.3125rem;
+  --size-field: 0.3125rem;
+  --border: 1.5px;
+  --depth: 1;
+  --noise: 0;
+}

theme/static_src/tailwind.config.js

@@ -0,0 +1,57 @@
+/**
+ * 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
+ */
+
+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'
+    ],
+    theme: {
+        extend: {},
+    },
+    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/base.html

@@ -0,0 +1 @@
+{% load static tailwind_tags %}