Open mzaini30 opened 1 year ago
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'),
]
}
}
Solved: https://www.npmjs.com/package/stylify-colors
While there is free time, I made it earlier.
Wow! Thanks! I will add a link to this package in the Docs.
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'
}
}
Describe the problem
Difficult for getting beautiful colors without using Tailwind colors
Describe the proposed solution
Alternatives considered
-
Importance
would make my life easier