Add tailwind and daisyUI

This commit is contained in:
badblocks 2025-02-26 17:18:48 -08:00
parent 80da7be559
commit 0b8e6c2d50
19 changed files with 2292 additions and 24289 deletions

1767
theme/static_src/package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

View file

@ -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"
}
}

View file

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

View file

@ -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;
}

View file

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