Colors from Tailwind

[mzaini30]

Describe the problem

Difficult for getting beautiful colors without using Tailwind colors

Describe the proposed solution

<div class="color:blue-500 background:red-500">Hello</di>

Alternatives considered

Importance

would make my life easier

[Machy8]

Hi,
Do you have for example any of your favorite Palette you would like to use? I will be happy to add a guide for that.

You can import CSS theme from other framework/library like https://open-props.style/ or some generated online and in Stylify config add the following:

const config = {
  compiler: {
    // This will enable css variables
    replaceVariablesByCssVariables: true,
    externalVariables: [
        // Name of used variables like color:$blue1
        'variable1', 'variable2', 'variable3', 'blue1',
        // It can also be a function for more dynamic check
        (variableName) => variableName.startsWith('-md'),
    ]
  }
}

[mzaini30]

Solved: https://www.npmjs.com/package/stylify-colors

While there is free time, I made it earlier.

[Machy8]

Wow! Thanks! I will add a link to this package in the Docs.

[Machy8]

Hi, in the latest release, there is a new option, that disables errors, while you use external css variables (if that was the case for you for example). This should make the variables usage a bit easier.

const config = {
  compiler: {
    // Enable css variables
    replaceVariablesByCssVariables: true,
    // Disable error for unresolved variable
    // error => default - will throw an error
    // warning => automatically during watch mode (in bundler, vite, webpack, nuxt...) - will only warn you
    // silent => disables all warnings
    undefinedVariableWarningLevel: 'warning'
  }
}