coracle/flotilla
1
3
Fork 9
Code Issues 31 Pull Requests 1 Actions Packages Projects 5 Releases Wiki Activity

163-tailwind-v4-upgrade #166

Closed
priyanshu_bharti wants to merge 3 commits from priyanshu_bharti/flotilla:163-tailwind-v4-upgrade into dev
pull from: priyanshu_bharti/flotilla:163-tailwind-v4-upgrade
merge into: coracle:dev
Conversation 3 Commits 3 Files Changed 49
+74 -58
2 changed files with 74 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1fb96c4f6a - Show all commits
src/app.css
+48 -33
View File
@@ -1,8 +1,11 @@
@import "@welshman/editor/index.css";
@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;
@config "../tailwind.config.js";
@source inline("bg-success");
@source inline("bg-warning");
@source inline("w-4");
@source inline("h-4");
/* Fonts */
@@ -54,16 +57,16 @@
[data-theme] {
@apply bg-base-300;
--base-100: oklch(var(--b1));
--base-200: oklch(var(--b2));
--base-300: oklch(var(--b3));
--base-content: oklch(var(--bc));
--primary: oklch(var(--p));
--primary-content: oklch(var(--pc));
--secondary: oklch(var(--s));
--secondary-content: oklch(var(--sc));
--neutral: oklch(var(--n));
--neutral-content: oklch(var(--nc));
--base-100: var(--color-base-100, oklch(var(--b1)));
--base-200: var(--color-base-200, oklch(var(--b2)));
--base-300: var(--color-base-300, oklch(var(--b3)));
--base-content: var(--color-base-content, oklch(var(--bc)));
--primary: var(--color-primary, oklch(var(--p)));
--primary-content: var(--color-primary-content, oklch(var(--pc)));
--secondary: var(--color-secondary, oklch(var(--s)));
--secondary-content: var(--color-secondary-content, oklch(var(--sc)));
--neutral: var(--color-neutral, oklch(var(--n)));
--neutral-content: var(--color-neutral-content, oklch(var(--nc)));
}
.mobile [data-tip]::before {
@@ -90,15 +93,20 @@
}
.px-sai {
@apply pl-sai pr-sai;
padding-left: var(--sail);
padding-right: var(--sair);
}
.py-sai {
@apply pt-sai pb-sai;
padding-top: var(--sait);
padding-bottom: var(--saib);
}
.p-sai {
@apply py-sai px-sai;
padding-top: var(--sait);
padding-right: var(--sair);
padding-bottom: var(--saib);
padding-left: var(--sail);
priyanshu_bharti marked this conversation as resolved
hodlbod commented 2026-04-07 19:45:59 +00:00
Review
Copy Link
Copy Source

Why switch away from @apply here?

Why switch away from `@apply` here?
priyanshu_bharti commented 2026-04-07 20:31:40 +00:00
Review
Copy Link
Copy Source

Hii @hodlbod
Tried reverting this block back to @apply, but Tailwind v4 fails with Cannot apply unknown utility class py-sai during build, so I kept explicit safe-area declarations here to keep the build stable.

The reason is Tailwind v4 fundamentally changed how @apply works. It can no longer apply custom CSS classes (like .py-sai) that are just written in standard CSS syntax inside a file. In v4, @apply is strictly meant for built-in Tailwind utilities (like bg-red-500) or utilities explicitly registered via the new v4 @utility directive.

Hii @hodlbod Tried reverting this block back to @apply, but Tailwind v4 fails with Cannot apply unknown utility class py-sai during build, so I kept explicit safe-area declarations here to keep the build stable. The reason is Tailwind v4 fundamentally changed how @apply works. It can no longer apply custom CSS classes (like .py-sai) that are just written in standard CSS syntax inside a file. In v4, @apply is strictly meant for built-in Tailwind utilities (like bg-red-500) or utilities explicitly registered via the new v4 @utility directive.
}
.mt-sai {
@@ -118,15 +126,20 @@
}
.mx-sai {
@apply ml-sai mr-sai;
margin-left: var(--sail);
margin-right: var(--sair);
}
.my-sai {
@apply mt-sai mb-sai;
margin-top: var(--sait);
margin-bottom: var(--saib);
}
.m-sai {
@apply my-sai mx-sai;
margin-top: var(--sait);
margin-right: var(--sair);
margin-bottom: var(--saib);
margin-left: var(--sail);
}
.top-sai {
@@ -166,11 +179,11 @@
}
.card2 {
@apply rounded-box p-4 text-base-content sm:p-6;
@apply rounded-box text-base-content p-4 sm:p-6;
}
.card2.card2-sm {
@apply p-2 text-base-content sm:p-4;
@apply text-base-content p-2 sm:p-4;
}
.column {
@@ -218,7 +231,8 @@
}
[data-tip]::before {
@apply ellipsize;
overflow: hidden;
text-overflow: ellipsis;
}
.content-padding-x {
@@ -234,7 +248,7 @@
}
.content-padding-y {
@apply content-padding-t content-padding-b;
@apply pt-4 pb-4 sm:pt-8 sm:pb-8 md:pt-12 md:pb-12;
}
.content-sizing {
@@ -242,7 +256,7 @@
}
.content {
@apply content-sizing content-padding-x content-padding-y;
@apply m-auto w-full max-w-3xl px-4 pt-4 pb-4 sm:px-8 sm:pt-8 sm:pb-8 md:px-12 md:pt-12 md:pb-12;
}
.heading {
@@ -258,7 +272,7 @@
}
.link {
@apply cursor-pointer text-primary underline;
@apply text-primary cursor-pointer underline;
}
.input input::placeholder {
@@ -292,7 +306,7 @@
}
.tiptap-suggestions__item {
@apply border-l-2 border-solid border-base-100;
@apply border-base-100 border-l-2 border-solid;
}
.tiptap-suggestions__selected {
@@ -313,12 +327,12 @@
.note-editor .tiptap {
--tiptap-object-bg: var(--base-200);
@apply input input-bordered h-auto min-h-32 rounded-box p-[.65rem] pb-6;
@apply input rounded-box h-auto min-h-32 p-[.65rem] pb-6;
}
.input-editor .tiptap {
--tiptap-object-bg: var(--base-200);
@apply input input-bordered h-auto p-[.65rem];
@apply input h-auto p-[.65rem];
}
/* link-content, based on tiptap */
@@ -337,7 +351,7 @@
/* content rendered by welshman/content */
.welshman-content a {
@apply link;
@apply text-primary cursor-pointer underline;
}
.welshman-content-error a {
@@ -355,7 +369,7 @@
}
.date-time-field {
@apply input input-bordered rounded-lg px-0;
@apply input rounded-lg px-0;
}
.date-time-field input {
@@ -381,7 +395,7 @@
emoji-picker {
--background: var(--base-100);
--border-color: var(--base-100);
--border-radius: var(--rounded-box);
--border-radius: var(--radius-box, var(--rounded-box));
--button-active-background: var(--base-content);
--button-hover-background: var(--base-content);
--indicator-color: var(--base-content);
@@ -411,7 +425,7 @@ body.keyboard-open .hide-on-keyboard {
/* chat view */
.chat__compose {
@apply relative z-compose mb-14 flex-grow md:mb-0;
@apply relative z-compose mb-14 grow md:mb-0;
}
.chat__compose .chat__compose-inner {
@@ -419,7 +433,8 @@ body.keyboard-open .hide-on-keyboard {
}
.chat__scroll-down {
@apply pb-sai fixed bottom-28 right-4 z-feature md:bottom-16;
padding-bottom: var(--saib);
@apply z-feature fixed right-4 bottom-28 md:bottom-16;
}
/* content visibility */
tailwind.config.js
+26 -25
View File
@@ -1,6 +1,7 @@
import {config} from "dotenv"
import daisyui from "daisyui"
import themes from "daisyui/src/theming/themes"
import daisyTheme from "daisyui/theme/index.js"
import themes from "daisyui/theme/object"
config({path: ".env.local"})
config({path: ".env"})
@@ -9,7 +10,6 @@ config({path: ".env"})
export default {
content: ["./src/**/*.{html,js,svelte,ts}"],
darkMode: ["selector", '[data-theme="dark"]'],
safelist: ["bg-success", "bg-warning", "w-4 h-4"],
theme: {
extend: {},
zIndex: {
@@ -25,27 +25,28 @@ export default {
toast: 9,
},
},
plugins: [daisyui],
daisyui: {
themes: [
{
dark: {
...themes["dark"],
primary: process.env.VITE_PLATFORM_ACCENT,
"primary-content": process.env.VITE_PLATFORM_ACCENT_CONTENT || "#EAE7FF",
secondary: process.env.VITE_PLATFORM_SECONDARY,
"secondary-content": process.env.VITE_PLATFORM_SECONDARY_CONTENT || "#EAE7FF",
},
light: {
...themes["winter"],
neutral: "#F2F7FF",
warning: "#FD8D0B",
primary: process.env.VITE_PLATFORM_ACCENT,
"primary-content": process.env.VITE_PLATFORM_ACCENT_CONTENT || "#EAE7FF",
secondary: process.env.VITE_PLATFORM_SECONDARY,
"secondary-content": process.env.VITE_PLATFORM_SECONDARY_CONTENT || "#EAE7FF",
},
},
],
},
plugins: [
daisyui({
themes: ["light --default", "dark --prefersdark"],
}),
daisyTheme({
name: "dark",
...themes["dark"],
"--color-primary": process.env.VITE_PLATFORM_ACCENT,
"--color-primary-content": process.env.VITE_PLATFORM_ACCENT_CONTENT || "#EAE7FF",
"--color-secondary": process.env.VITE_PLATFORM_SECONDARY,
"--color-secondary-content": process.env.VITE_PLATFORM_SECONDARY_CONTENT || "#EAE7FF",
}),
daisyTheme({
name: "light",
...themes["winter"],
"--color-neutral": "#F2F7FF",
"--color-neutral-content": "var(--color-base-content)",
"--color-warning": "#FD8D0B",
"--color-primary": process.env.VITE_PLATFORM_ACCENT,
"--color-primary-content": process.env.VITE_PLATFORM_ACCENT_CONTENT || "#EAE7FF",
"--color-secondary": process.env.VITE_PLATFORM_SECONDARY,
"--color-secondary-content": process.env.VITE_PLATFORM_SECONDARY_CONTENT || "#EAE7FF",
}),
],
}