I’m using Tailwind’s Node CLI. I followed the directions in the documentation. The documentation doesn’t mention _pginfo/class.tracker.json, interesting file.
Correct, the page looks different in the browser than in Pinegrow. The browser is correctly showing the DaisyUI theme, while Pinegrow is displaying the dark theme. Yes, I’m talking about CSS theme, NOT Window > Theme > Light/Dark gray.
One appreciable difference is your tailwind config sets base to false. That removes the automatic application of foreground and background colors.
If base: true In my case Pinegrow sets it to the dark theme, even if I apply data-theme="light" to the <body> tag.
It displays correctly in the browser:
If I set base: false in tailwind config, Pinegrow renders this:
Changing data-theme="synthwave" and leaving base:false, Pinegrow renders it like this:
And the browser renders it like this… but I want the Synthwave purple background.
So I set base: true, and Pinegrow renders this:
And the browser renders this:
Here’s my tailwind.config.js:
/* Pinegrow generated Design Panel Begin */
const pg_colors = {
dustyBlue: {
'50': '#dce5ea',
'100': '#b7c5d2',
'200': '#92a6ba',
'300': '#6d89a3',
'400': '#476c8c',
'500': '#195176',
'600': '#164666',
'700': '#133b56',
'800': '#103046',
'900': '#0c2638',
'950': '#091c29',
},
red: {
'50': '#fef2f2',
'100': '#fee2e2',
'200': '#fecaca',
'300': '#fca5a5',
'400': '#f87171',
'500': '#ef4444',
'600': '#dc2626',
'700': '#b91c1c',
'800': '#991b1b',
'900': '#7f1d1d',
},
yellow: {
'50': '#fffbeb',
'100': '#fef3c7',
'200': '#fde68a',
'300': '#fcd34d',
'400': '#fbbf24',
'500': '#f59e0b',
'600': '#d97706',
'700': '#b45309',
'800': '#92400e',
'900': '#78350f',
},
green: {
'50': '#ecfdf5',
'100': '#d1fae5',
'200': '#a7f3d0',
'300': '#6ee7b7',
'400': '#34d399',
'500': '#10b981',
'600': '#059669',
'700': '#047857',
'800': '#065f46',
'900': '#064e3b',
},
blue: {
'50': '#eff6ff',
'100': '#dbeafe',
'200': '#bfdbfe',
'300': '#93c5fd',
'400': '#60a5fa',
'500': '#3b82f6',
'600': '#2563eb',
'700': '#1d4ed8',
'800': '#1e40af',
'900': '#1e3a8a',
},
indigo: {
'50': '#eef2ff',
'100': '#e0e7ff',
'200': '#c7d2fe',
'300': '#a5b4fc',
'400': '#818cf8',
'500': '#6366f1',
'600': '#4f46e5',
'700': '#4338ca',
'800': '#3730a3',
'900': '#312e81',
},
purple: {
'50': '#f5f3ff',
'100': '#ede9fe',
'200': '#ddd6fe',
'300': '#c4b5fd',
'400': '#a78bfa',
'500': '#8b5cf6',
'600': '#7c3aed',
'700': '#6d28d9',
'800': '#5b21b6',
'900': '#4c1d95',
},
pink: {
'50': '#fdf2f8',
'100': '#fce7f3',
'200': '#fbcfe8',
'300': '#f9a8d4',
'400': '#f472b6',
'500': '#ec4899',
'600': '#db2777',
'700': '#be185d',
'800': '#9d174d',
'900': '#831843',
},
gray: {
'50': '#e9eaec',
'100': '#ced1d5',
'200': '#b5b8bf',
'300': '#9ba0aa',
'400': '#838995',
'500': '#6b7280',
'600': '#595e6a',
'700': '#474b55',
'800': '#363940',
'900': '#25282d',
},
dust: {
'50': '#fcfcfd',
'100': '#f9f9fa',
'200': '#f5f5f7',
'300': '#f2f2f4',
'400': '#eeeef2',
'500': '#ebebef',
'600': '#cacace',
'700': '#ababad',
'800': '#8c8c8e',
'900': '#6e6e70',
'950': '#525254',
},
}
const pg_fonts = {sans: ["'Inter', sans-serif",
],
serif: ['"Times New Roman", Times, serif',
],
'Open Sans': ["'Open Sans', sans-serif",
],
}
const pg_backgrounds = {}
/* Pinegrow generated Design Panel End */
/** @type {import('tailwindcss').Config} */
//Unset default colors
delete pg_colors.gray;
delete pg_colors.red;
delete pg_colors.yellow;
delete pg_colors.green;
delete pg_colors.blue;
delete pg_colors.indigo;
delete pg_colors.purple
delete pg_colors.pink;
//done
module.exports = {
content: ["./*.{html,php,js}"],
daisyui: {
themes: [ "light", "dark" ], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "synthwave"]
darkTheme: "synthwave", // name of one of the included themes for dark mode
//darkMode: ["class", '[data-theme="light"]'],
base: true, // applies background color and foreground color for root element by default
styled: true, // include daisyUI colors and design decisions for all components
utils: true, // adds responsive and modifier utility classes
prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
logs: false, // Shows info about daisyUI version and used config in the console when building your CSS
themeRoot: ":root", // The element that receives theme color CSS variables
},
theme: {
extend: {
aspectRatio: {
'3/4': '3 / 4',
},
maxWidth: {
'1/2': '50%',
},
colors: pg_colors, //<-- Use the pg_colors for colors
fontFamily: pg_fonts, //<-- Use the pg_fonts for fonts
},
},
plugins: [
require('@tailwindcss/typography'),
require("daisyui")
],
}
It’s just too much work. I have an iPhone 6 for usability testing… but what a pain.
On the bright side, I might not have known what was happening if Pinegrow had the same version of NWjs on the Mac! This was a good learning experience. Thank you for your help.