x/web-app-template
Archived
Template
2
0
Fork 0
Code Issues 13 Pull Requests 4 Actions Packages Activity

fix(deps): migrate tailwindcss to v4
All checks were successful
Build Docker Image / Build-Docker-Image (push) Successful in 2m51s
Details

Browse Source
This commit is contained in:
Tim Wundenberg
2025-02-03 22:01:02 +01:00
parent 827a1271a4
commit 4a7551a7f7
7 changed files with 852 additions and 1291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
input.css Normal file
View File

@@ -0,0 +1,34 @@
@import 'tailwindcss';
@source './static/**/*.js';
@theme {
--animate-fade: fadeOut 0.25s ease-in;
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
}
/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}

3
main.css
View File

@@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

2069
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@@ -4,14 +4,15 @@
"description": "Your (almost) independent tech stack to host on a VPC.", "description": "Your (almost) independent tech stack to host on a VPC.",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"build": "mkdir -p static/js && cp -f node_modules/htmx.org/dist/htmx.min.js static/js/htmx.min.js && tailwindcss build -o static/css/tailwind.css --minify", "build": "mkdir -p static/js && cp -f node_modules/htmx.org/dist/htmx.min.js static/js/htmx.min.js && tailwindcss -i input.css -o static/css/tailwind.css --minify",
"watch": "mkdir -p static/js && cp -f node_modules/htmx.org/dist/htmx.min.js static/js/htmx.min.js && tailwindcss build -o static/css/tailwind.css --watch" "watch": "mkdir -p static/js && cp -f node_modules/htmx.org/dist/htmx.min.js static/js/htmx.min.js && tailwindcss -i input.css -o static/css/tailwind.css --watch"
}, },
"keywords": [], "keywords": [],
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"htmx.org": "2.0.4", "htmx.org": "2.0.4",
"tailwindcss": "3.4.17" "tailwindcss": "4.0.3",
"@tailwindcss/cli": "4.0.3"
} }
} }

26
tailwind.config.js
View File

@@ -1,26 +0,0 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./template/**/*.templ", "./static/**/*.js"],
theme: {
extend: {
animation: {
fade: 'fadeOut 0.25s ease-in',
},
keyframes: _ => ({
fadeOut: {
'0%': { opacity: '1' },
'100%': { opacity: '0' },
},
}),
},
},
// plugins: [
// require('daisyui'),
// ],
// daisyui: {
// themes: ["retro"],
// },
}

2
template/layout.templ
View File

@@ -21,7 +21,7 @@ templ Layout(slot templ.Component, user templ.Component) {
<body hx-headers='{"csrf-token": "CSRF_TOKEN"}'> <body hx-headers='{"csrf-token": "CSRF_TOKEN"}'>
<div class="h-screen flex flex-col"> <div class="h-screen flex flex-col">
<div class="flex justify-end items-center gap-2 py-1 px-2 h-12 md:gap-10 md:px-10 md:py-2 shadow"> <div class="flex justify-end items-center gap-2 py-1 px-2 h-12 md:gap-10 md:px-10 md:py-2 shadow-sm">
<a href="/" class="flex-1 flex gap-2"> <a href="/" class="flex-1 flex gap-2">
<img src="/static/favicon.svg" alt="web-app-template logo" /> <img src="/static/favicon.svg" alt="web-app-template logo" />
<span>web-app-template</span> <span>web-app-template</span>

2
template/workout/workout.templ
View File

@@ -27,7 +27,7 @@ Reps string
} }
templ WorkoutListComp(workouts []Workout) { templ WorkoutListComp(workouts []Workout) {
<div class="overflow-x-auto mx-auto max-w-screen-lg"> <div class="overflow-x-auto mx-auto max-w-(--breakpoint-lg)">
<h2 class="text-4xl mt-14 mb-8">Workout history</h2> <h2 class="text-4xl mt-14 mb-8">Workout history</h2>
<table class="table table-auto max-w-full"> <table class="table table-auto max-w-full">
<thead> <thead>