Shortcuts

It's quite common when you work on same set of utilities for multiple times. We provided this "shortcuts" feature allowing you to give the combinations of utilities names you can you use them everywhere inside your app without needing to duplicate yourself.

By simply adding the shortcuts field to your configurations:

// windi.config.js
export default {
  theme: {
    /* ... */
  },
  shortcuts: {
    'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
    'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  },
}
Config
CSS

CSS-in-JS syntax is also supported for complex utility

// windi.config.js
export default {
  theme: {
    /* ... */
  },
  shortcuts: {
    'btn': {
      'color': 'white',
      '@apply': 'py-2 px-4 font-semibold rounded-lg',
      '&:hover': {
        '@apply': 'bg-green-700',
        'color': 'black',
      },
    },
    'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  },
}
Config

The utility added by this configuration can also be directly wrapped with variant, such as sm:btn. The function of this feature is similar to the @apply directive, it will merge all utilities into one style.