🌬️ Keywind

Keywind is a component-based Keycloak Login Theme built with Tailwind CSS and Alpine.js.

Installation

Keywind has been designed with component-based architecture from the start, and you can customize as little or as much Keywind as you need:

1. Deploy Keywind Login Theme
2. Create your own Login Theme
3. Specify parent theme in theme properties:

parent=keywind

4. Brand and Customize components with FreeMaker

Features

Styled Pages

• Login
• Password Reset
• Register

Examples

Color Theme

When you do need to customize a palette, you can configure your colors under the colors key in the theme section of tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: colors.red,
      },
    },
  },
}

Read more about Tailwind CSS configuration in the documentation.

Primary Button Size

You can inherit Keywind components in your own theme. For example, to resize the primary button you should create a styled theme/mytheme/components/button/primary.ftl file:

<#macro kw component="button" rest...>
  <${component}
    class="bg-primary-600 flex justify-center px-6 py-3 relative rounded-lg text-md text-white w-full focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2 hover:bg-primary-700"
    <#list rest as attrName, attrValue>
      ${attrName}="${attrValue}"
    </#list>
  >
    <#nested>
  </${component}>
</#macro>

Build

When you're ready to deploy your own theme, run the build command to generate a static production build.

yarn build