Colors from Tailwind  #212

Activity

1. Machy8

   transferred this issue fromstylify/packageson Mar 1, 2023
2. Machy8

   added

   📝documentationImprovements or additions to documentationImprovements or additions to documentation

   on Mar 1, 2023
3. Machy8 commented on Mar 1, 2023

   

   Machy8

   on Mar 1, 2023

   Last edited by Machy8

   Member

   More actions

   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'),
       ]
     }
   }
4. Machy8

   transferred this issue fromstylify/webon Mar 1, 2023
5. mzaini30 commented on Mar 1, 2023

   

   mzaini30

   on Mar 1, 2023

   Author

   More actions

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

   While there is free time, I made it earlier.

   ❤️React with ❤️1Reacted by Vladimír Macháček
6. Machy8 commented on Mar 1, 2023

   

   Machy8

   on Mar 1, 2023

   Member

   More actions

   Wow! Thanks! I will add a link to this package in the Docs.
7. Machy8 commented on Mar 4, 2023

   

   Machy8

   on Mar 4, 2023

   Member

   More actions

   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'
     }
   }