# 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="using-tailwind" %} [using-tailwind](https://docs.keycloakify.dev/keycloakify/v10/customization-strategies/css-level-customization/using-tailwind) {% endcontent-ref %} Else you can skip directly to the next section: {% content-ref url="using-custom-assets" %} [using-custom-assets](https://docs.keycloakify.dev/keycloakify/v10/customization-strategies/css-level-customization/using-custom-assets) {% endcontent-ref %}