Add tailwindcss

2024-03-15 07:26:20 +01:00 · 2024-03-15 07:26:20 +01:00 · 9a5489c170
commit 9a5489c170
parent 24123c99cf
17 changed files with 1833 additions and 102 deletions
--- a/theme/static_src/tailwind.config.js
+++ b/theme/static_src/tailwind.config.js
@ -0,0 +1,95 @@
+/**
+ * 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: {
+            colors: {
+                primary: {
+                    light: "#b3e6dd",
+                    DEFAULT: "#8dd9cc",
+                    dark: "#57c7b4",
+                },
+                secondary: {
+                    light: "#083D77",
+                    DEFAULT: "#083D77",
+                    dark: "#083D77",
+                },
+                kyellow: {
+                    light: "#FFED66",
+                    DEFAULT: "#FFED66",
+                    dark: "#FFED66",
+                },
+                klavender: {
+                    light: "#8E4162",
+                    DEFAULT: "#8E4162",
+                    dark: "#8E4162",
+                },
+                kred: {
+                    light: "#FF5E5B",
+                    DEFAULT: "#FF5E5B",
+                    dark: "#FF5E5B",
+                },
+                kindigo: {
+                    light: "#083D77",
+                    DEFAULT: "#083D77",
+                    dark: "#083D77",
+                },
+                kpink: {
+                    light: "#FBDAE4",
+                    DEFAULT: "#EF7799",
+                    dark: "#EF7799",
+                }
+            },
+        },
+        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'),
+        ],
+    },
+}