# Applying your own classes

{% hint style="info" %}
If you're porting a pre-existing, non Keycloakify theme to Keycloakify this is the approach you would implement.
{% endhint %}

If you have an utility stylesheet that defines standardized classes you can apply them using the class object like so:

<figure><img src="https://content.gitbook.com/content/N2jP04ve5XD0mhCzbqnp/blobs/Lc47XRJwcPniVDLUiNLY/image.png" alt=""><figcaption></figcaption></figure>

Result:

<figure><img src="https://content.gitbook.com/content/N2jP04ve5XD0mhCzbqnp/blobs/vwRRVO2JzC24xtcDRReQ/image.png" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
If you want to implement this approach with **Tailwind** read [this](https://github.com/keycloakify/keycloakify-starter/blob/dd516e53e4dfa7c1ce02bab557420b999e87eca2/src/login/KcPage.tsx#L53-L65). But there's a section dedicated to Tailwind [here](https://doc-old.keycloakify.dev/documentation/v11/customization-strategies/css-level-customization/using-tailwind).
{% endhint %}

Up next:

{% content-ref url="page-specific-styles" %}
[page-specific-styles](https://doc-old.keycloakify.dev/documentation/v11/customization-strategies/css-level-customization/page-specific-styles)
{% endcontent-ref %}