# 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://723341942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1pGOu8uVH5l8KqPEPmKi%2Fuploads%2FYRj1EdHquSXqJQlP7Qgp%2Fimage.png?alt=media&#x26;token=f564108f-4d25-48af-ba87-fa0d88f503a3" alt=""><figcaption></figcaption></figure>

Result:

<figure><img src="https://723341942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1pGOu8uVH5l8KqPEPmKi%2Fuploads%2FiIzA5Bi6tVevsp1YoKWo%2Fimage.png?alt=media&#x26;token=7bd4da1d-2f81-4965-8699-c286b7d340a4" 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/v10/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/v10/customization-strategies/css-level-customization/page-specific-styles)
{% endcontent-ref %}