# Page specific styles So far the customization we have made applies to all the pages however you might want to have stylesheet specific to certain pages. You can do that by loading different stylesheet and applying different classes depending on the `kcContext.pageId`. Implementation example, instead of importing our stylesheet at the top of the KcPage.tsx component file we import them dynamically:

import {
    Suspense, 
    lazy,
    useMemo
} from "react";

export default function KcPage(props: { kcContext: KcContext }) {
    const { kcContext } = props;

    const { i18n } = useI18n({ kcContext });

    const classes = useCustomStyles(kcContext);

    return (
        <Suspense>
            {(() => {
                switch (kcContext.pageId) {
                    default:
                        return (
                            <DefaultPage
                                kcContext={kcContext}
                                i18n={i18n}
                                classes={classes}
                                Template={Template}
                                doUseDefaultCss={true}
                                UserProfileFormFields={UserProfileFormFields}
                                doMakeUserConfirmPassword={doMakeUserConfirmPassword}
                            />
                        );
                }
            })()}
        </Suspense>
    );
}

function useCustomStyles(kcContext: KcContext) {
    return useMemo(() => {
        
        // You stylesheet that applies to all pages.
        import("./main.css");
        let classes: { [key in ClassKey]?: string } = {
            // Your classes that applies to all pages
        };

        switch (kcContext.pageId) {
            case "login.ftl":
                // You login page specific stylesheet.
                import("./pages/login.css");
                classes = {
                    ...classes,
                    // Your classes that applies only to the login page
                };
                break;
            case "register.ftl":
                // Your account page specific stylesheet
                import("./pages/register.css");
                classes = {
                    ...classes,
                    // Your classes that applies only to the register page
                };
                break;
            // ...
        }

        return classes;

    }, []);
}

## What's next? At this point of the documentation, if you're looking for using tailwind you can go to this page: {% content-ref url="/pages/kqKroPv5EemBuicycA5n" %} [Using Tailwind](/documentation/v10/customization-strategies/css-level-customization/using-tailwind.md) {% endcontent-ref %} Else you can skip directly to the next section: {% content-ref url="/pages/Z9FAMVNdWEumpLPcJWxC" %} [Using custom assets](/documentation/v10/customization-strategies/css-level-customization/using-custom-assets.md) {% endcontent-ref %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://doc-old.keycloakify.dev/documentation/v10/customization-strategies/css-level-customization/page-specific-styles.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.