Using Tailwind

This demo show basic usage of tailwind in a Keycloakify login theme.

We show how you can levrage tailwind @apply directive to customize the default style without having to modify the components, just by tagetting the standardized kc classes.

We allso show how to use tailwind the regular way, at the component level on ejected pages.

Before you start with this exemple it is strongly recommended you read the CSS Level Customization guide. This will teach you how to partially or completely disable the PatternFly stlyes inherited from the default theme.

CSS Customization

To use Tailwind in your Keycloakify project start by following the setup guide for Vite.

Installing with Vite - InstallationTailwind CSS

Beyond that, here is a demo setup of light modification of the starter template to incorporate tailwind:

GitHub - keycloakify/keycloakify-starter at tailwindGitHub

Preview on the 'tailwind' branch for the starter template

What has been done:

• Applying some custom tailwind utilities classes using the @apply directive.

• Using the Geist font, here, here and here.

• Ejecting the login.ftl page (npx keycloakify eject-page and login -> login.ftl) and applying a tailwind class.

Here is the summary of the changes:

Demo Tailwind · keycloakify/keycloakify-starter@e6c71f1GitHub