search

crswll / tailwindcss-theme-swapper

A helper for getting tailwind values into css custom properties and switching them between media queries and classes. You can try it out here: https://play.tailwindcss.com/Gt21fePNvv
320 stars 15 forks source link

color used for fill #52

Closed xabatar closed 6 months ago

xabatar commented 6 months ago

Without the plugin we can use fill-color in Tailwind and the system will generate css like: .fill-color { fill: #b9d7fd; } But using the plugin for the same color will result in the following css entry: .fill-color { fill: color-mix(in srgb,var(--colors-color),#0000 0); }
where the --colors-color variable is #b9d7fd; The resulting color is a mix between black and the variable color, which is not the expected result. It should output the simple color as the fill and not use color-mix. Or if it can't be done without color mix, then the mixing color should be white and not black.

crswll commented 6 months ago

That looks like it's being minified by something and that's causing issues. Do you know what it's being minified by?

https://play.tailwindcss.com/xBaMPVhPtJ Screenshot 2024-05-04 at 9 44 58 AM

crswll commented 6 months ago

I created #53 to see if that helps with the minification issue (if it is a minification issue). Want to make sure here first. Can you try npm install crswll/tailwindcss-theme-swapper#simplify-transparency and let me know if that helps the situation?

xabatar commented 6 months ago

Thanks for your help. You are right. Is a minifying issue. I use VS Code with Tailwind installed with npm, and run the task with: "npx tailwindcss -i ./pricing/Content/css/dex-style-source.css -o ./pricing/Content/css/style.css --watch --minify"

I took out the minifying command the issue is gone.

Had this extension for minify: https://marketplace.visualstudio.com/items?itemName=olback.es6-css-minify. I seems is not maintained. Will look for a different solution.