frappe
Build failure in frappe-ui with Tailwind CSS v4.1.5 due to deprecated theme() usage in CSS
I'm integrating frappe-ui (v0.1.139, installed as a Git submodule) into a Vue 3 + Vite project using Tailwind CSS v4.1.5.
When running the production build, it fails with the following error:
[@tailwindcss/vite:generate:build] Could not resolve value for theme function: theme(colors.blue.200)
This is caused by the use of the theme() function inside a CSS <style> block in TextEditor.vue, such as:
background: theme('colors.blue.200');
In Tailwind CSS v4.x, the theme() function is no longer supported in CSS:
theme();
Environment: frappe-ui: v0.1.139 (installed as a submodule)
tailwindcss: v4.1.5
Build Tool: Vite
Framework: Vue 3 + TypeScript
Thank you for your great work on this UI library! Would love to see a patch or updated release that supports Tailwind 4.
I am also interested in TailwindCSS v4. We are beginning to build apps and would like to have that already solved rather than making a major effort later on.
I am also interested in TailwindCSS v4. We are beginning to build apps and would like to have that already solved rather than making a major effort later on.
I hope that is resolved ASAP and agree with u
I forked this repository and tried upgrading to Tailwind v4 using the upgrade guide. I got it to build but the histoire storybook would not build because histoire itself also still uses Tailwind v3. The workaround is to overide the vite config in histoire.config.js to cause it to not use any tailwind config. Even so, the built story book shows janky styles e.g. missing backgrounds on dropdowns and wierd checkbox.
Anyhow, I tried using my fork to write a frappe app frontend and while the vite server shows no errors, the browser shows errors like does not provide an export named 'default' for feather-icons and highlight.js.
So I changed vite.config.js to optimizeDeps feather-icons, lowlight and interactjs.
Finally the components showed up but no styling at all...
