Using Tailwind

Even if you're only interested by Tailwind you should still read the other section of the CSS Level Customization first as it gives important context.

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

https://private-user-images.githubusercontent.com/6702424/345903122-3f06a287-03e3-4441-a4e9-e4ea6b76f388.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA5ODk4NDIsIm5iZiI6MTcyMDk4OTU0MiwicGF0aCI6Ii82NzAyNDI0LzM0NTkwMzEyMi0zZjA2YTI4Ny0wM2UzLTQ0NDEtYTRlOS1lNGVhNmI3NmYzODgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MTRUMjAzOTAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZGI5ZjU5MzkxY2MzYmQ3MTNkZWM5NWUwOWM3MDg1MGJlYjQ4ODdhZjVlMTRlOGZlMDllMmM3MzQwYTJmNTgyYyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.4EdrQ-RKBP3SDeZ865IYyO2wb2ctkHEkdV_JAqquFQIprivate-user-images.githubusercontent.com

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