Add tailwindcss

theme/apps.py

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

theme/static_src/.gitignore

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

theme/static_src/package.json

@@ -0,0 +1,28 @@
+{
+  "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

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

theme/static_src/src/styles.css

@@ -0,0 +1,69 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+    p > a,
+    nav > a,
+    li > a {
+        @apply border-klavender border-b-2;
+    }
+
+    h1 {
+        @apply mt-8 mb-6 text-2xl sm:text-4xl lg:text-4xl leading-none font-extrabold tracking-tight text-gray-900 dark:text-white;
+    }
+
+    h2 {
+        @apply mt-6 mb-4 text-xl sm:text-3xl lg:text-3xl leading-none font-extrabold tracking-tight text-gray-900 dark:text-white;
+    }
+
+    h3 {
+        @apply mt-4 mb-2 text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight text-gray-900 dark:text-white;
+    }
+
+    h4 {
+        @apply mt-2 mb-1 text-lg sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight text-gray-900 dark:text-white;
+    }
+
+    p {
+        @apply my-2 mb-3 text-lg leading-relaxed;
+    }
+
+    @media print {
+        h1 {
+            @apply mt-6 mb-4 text-xl;
+        }
+
+        h2 {
+            @apply mt-4 mb-2 text-base;
+        }
+
+        h3 {
+            @apply text-base;
+        }
+
+        p {
+            @apply text-sm my-1;
+        }
+
+        .ppb {
+            page-break-before: always;
+        }
+    }
+
+    .primary-button {
+        @apply rounded-full bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
+    }
+}
+
+.tags {
+    @apply flex flex-col;
+}
+
+.tags ul {
+    @apply flex space-x-4;
+}
+
+.tags a {
+    @apply border-b-0 inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20;
+}

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