About themeReplacements

[flozero]

Hello, Thanks for your awesome works!

I know you have themeReplacements to replace the postcss variable. I didn't check how do you handle this. But can't you use something like this instead? It will be a bit less configuration even if it's not too much.

getComputedStyle(document.documentElement)
    .getPropertyValue('--my-variable-name'); // #999999

Thank you again!

[rogden]

Hi @f3ltron . Thanks for the feedback! Unfortunately the config viewer does not load your compiled css. It only parses the Tailwind config file. Therefor it doesn't have direct access to your CSS variables. A few others have mentioned this same issue so i'll take a closer look to see if there is a feasible path to make it happen.

[jdbdnz]

Is there an easy way to include a CSS file? I don't need tailwind-config-viewer to compile my CSS for me, there's plenty of tools for that. But I would like to simply add <link rel="stylesheet" href="/variables.css"> to the head section so my CSS variables work.

[RobbieTheWagner]

Is there an easy way to include a CSS file? I don't need tailwind-config-viewer to compile my CSS for me, there's plenty of tools for that. But I would like to simply add <link rel="stylesheet" href="/variables.css"> to the head section so my CSS variables work.

I would love to be able to do this as well. We have a CSS file with all our CSS variables.

[pohkit]

Is there an easy way to include a CSS file? I don't need tailwind-config-viewer to compile my CSS for me, there's plenty of tools for that. But I would like to simply add to the head section so my CSS variables work.

Me too! would be super super appreciate that we have the option to add/link our local variables.css in tailwind-config-viewer

[rogden]

@mavichow Hey there! Thanks for your comment. In your scenario, does your tailwind config colors etc. reference your CSS variables?

[pohkit]

Hey, my tailwind config is reference to CSS variables.

I came across this repo from https://tailwindcss.nuxt.dev/

My current Nuxt x TailwindCss setup is extending colours using variables:

// ./tailwind.config.js
theme: {
        extend: {
            colors: {
                //Primary/main
                'primary': {
                    DEFAULT: "var(--primary)",
                    '50': "var(--primary-50)",
                    '100': "var(--primary-100)",
                    '200': "var(--primary-200)",
                    '300': "var(--primary-300)",
                    '400': "var(--primary-400)",
                    '500': "var(--primary-500)",
                    '600': "var(--primary-600)",
                    '700': "var(--primary-700)",
                    '800': "var(--primary-800)",
                    '900': "var(--primary-900)"
                },
                'primary-content': "var(--primary-content)",
                //Secondary
                'secondary': {
                    DEFAULT: "var(--secondary)",
                    '50': "var(--secondary-50)",
                    '100': "var(--secondary-100)",
                    '200': "var(--secondary-200)",
                    '300': "var(--secondary-300)",
                    '400': "var(--secondary-400)",
                    '500': "var(--secondary-500)",
                    '600': "var(--secondary-600)",
                    '700': "var(--secondary-700)",
                    '800': "var(--secondary-800)",
                    '900': "var(--secondary-900)"
                },
                'secondary-content': "var(--secondary-content)",
                //Base/Background
                'base': {
                    DEFAULT: "var(--base)",
                    '50': "var(--base-50)",
                    '100': "var(--base-100)",
                    '200': "var(--base-200)",
                    '300': "var(--base-300)",
                    '400': "var(--base-400)",
                    '500': "var(--base-500)",
                    '600': "var(--base-600)",
                    '700': "var(--base-700)",
                    '800': "var(--base-800)",
                    '900': "var(--base-900)"
                },
                'base-content': "var(--base-content)",
            }
        },
    },

// ./assets/css/variable.css
html,
[data-theme="default"] {
    --primary           : #1E4855;
    --primary-50        : #63b0c8;
    --primary-100       : #54a8c3;
    --primary-200       : #3e95af;
    --primary-300       : #337b91;
    --primary-400       : #296273;
    --primary-500       : #1E4855;
    --primary-600       : #0f252c;
    --primary-700       : #010202;
    --primary-800       : #000000;
    --primary-900       : #000000;

    --primary-content   : #ffffff;

    --secondary         : #E9C46A;
    --secondary-50      : #ffffff;
    --secondary-100     : #fefcf8;
    --secondary-200     : #f9eed5;
    --secondary-300     : #f3e0b1;
    --secondary-400     : #eed28e;
    --secondary-500     : #E9C46A;
    --secondary-600     : #e2b139;
    --secondary-700     : #c6951d;
    --secondary-800     : #957016;
    --secondary-900     : #644b0f;

    --secondary-content : #ffffff;

    --base              : #ffffff;
    --base-50           : #ffffff;
    --base-100          : #ffffff;
    --base-200          : #ffffff;
    --base-300          : #ffffff;
    --base-400          : #ffffff;
    --base-500          : #ffffff;
    --base-600          : #e3e3e3;
    --base-700          : #c7c7c7;
    --base-800          : #ababab;
    --base-900          : #8f8f8f;
    
    --base-content      : #2b2b2b;
}

Everything works fine in my applications and I wonder if we have any settings to include in ./assets/css/variable.css so that I'm able to view the colours in the viewer route eg: http://localhost:3000/_tailwind

Understand the current repo have themeReplacements feature, but I'm just wondering it would be good if we can link variable.css in the _tailwind route instead of manually keying the variables one by one using themeReplacements method.

thanks & truly appreciate your response!

[RobbieTheWagner]

@mavichow Hey there! Thanks for your comment. In your scenario, does your tailwind config colors etc. reference your CSS variables?

@rogden I was able to make this work by downloading this whole repo and adding a script to copy over my CSS and include it. If there were an option to include the CSS as part of this package, that would fix this problem.

[pohkit]

@rwwagner90 Yup, all my variable is included in the Css file.

Understand we can manually hardcode the _tailwind viewer in node_modules...but that would be not an ideal solution for the approach.

If there were an option to include the CSS as part of this package, that would fix this problem.

Yup, would be super appreciate if we're able to do that eg: options.add_on_css: ['my_custom_css.css']