This is the documentation for v10, checkout the latest version
Keycloakify
HomeGitHubStartersStorybookDiscordKeycloak-js Alternative
v10
  • Keycloakify
  • Release Notes & Upgrade Instructions
  • FAQ
v10
  • 👨‍💻Quick start
  • 🧪Testing your Theme
    • In Storybook
    • In a Keycloak Docker Container
    • With Vite or Webpack in dev mode
  • 🔩Integrating Keycloakify in your Codebase
    • In your React Project
      • In your Vite Project
      • In your Webpack Project
    • As a Subproject of your Monorepo
      • Turborepo
      • Nx Integrated Monorepo
      • Package Manager Workspaces
  • 🎨Customization Strategies
    • CSS Level Customization
      • Basic example
      • Removing the default styles
      • Applying your own classes
      • Page specific styles
      • Using Tailwind
      • Using custom assets
        • .css, .sass or .less
        • CSS-in-JS
    • Component Level Customization
      • Using custom assets
  • 🖋️Custom Fonts
  • 🌎Internationalization and Translations
  • 🎭Theme Variants
  • 📝Customizing the Register Page
  • 👤Account Theme
    • Single-Page
    • Multi-Page
  • 📄Terms and conditions
  • 🖇️Styling a Custom Page Not Included In Base Keycloak
  • 🔧Accessing the Server Environment Variables
  • 🎯Targetting Specific Keycloak Versions
  • 📧Email Customization
  • 🚛Passing URL Parameters to your Theme
  • 🤵Admin theme
  • 📥Importing the JAR of Your Theme Into Keycloak
  • 🔛Enabling your Theme in the Keycloak Admin Console
  • 🤓Taking ownership of the kcContext
  • 📖Configuration Options
    • --project
    • keycloakVersionTargets
    • environmentVariables
    • themeName
    • startKeycloakOptions
    • themeVersion
    • postBuild
    • XDG_CACHE_HOME
    • kcContextExclusionsFtl
    • keycloakifyBuildDirPath
    • groupId
    • artifactId
    • Webpack specific options
      • projectBuildDirPath
      • staticDirPathInProjectBuildDirPath
      • publicDirPath
  • FAQ & HELP
    • 😞Can't identify the page to customize?
    • 🤔How it Works
    • 😖Some values you need are missing from in kcContext type definitions?
    • ❓Can I use it with Vue or Angular
      • Angular
    • ⚠️Limitations
    • 🛑Errors Keycloak in Logs
    • 🙋How do I add extra pages?
    • 🤓Can I use react-hooks-form?
    • 🚀Redirecting you users to the login/register pages
    • 💟Contributing
    • ⬆️Migration Guides
      • ⬆️v9 -> v10
      • ⬆️CRA -> Vite
      • ⬆️v8 -> v9
      • ⬆️v7 -> v8
      • ⬆️v6 -> v7
      • ⬆️v6.x -> v6.12
      • ⬆️v5 -> v6
    • 🍪Google reCaptcha and End of third-party Cookies
    • 🔖Accessing the Realm Attributes
  • ⭐Sponsors
Powered by GitBook
On this page

Was this helpful?

  1. Customization Strategies
  2. CSS Level Customization

Using Tailwind

PreviousPage specific stylesNextUsing custom assets

Last updated 2 months ago

Was this helpful?

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

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

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

What has been done:

Here is the summary of the changes:

.

Using the font, , and .

Ejecting the page (npx keycloakify eject-page and login -> login.ftl) and .

🎨
Applying some custom tailwind utilities classes using the @apply directive
Geist
here
here
here
login.ftl
applying a tailwind class
CSS Level Customization
Install Tailwind CSS with Vite - Tailwind CSStailwindcss
GitHub - keycloakify/keycloakify-starter at tailwindGitHub
Logo
Demo Tailwind · keycloakify/keycloakify-starter@e6c71f1GitHub
Preview on the 'tailwind' branch for the starter template
Logo
Logo