I am trying to use slds classes by extending app extends=”force:slds” but the slds classes are not being loaded

I am new to Salesforce development, am trying to include slds classes in my component

That’s my application and component
am trying to include the padding classes in my component
slds-p-top_xx-small, slds-p-top_xx-large, but they are not working.

Could you please help

 <aura:application extends="force:slds">
    <c:Space_Component />
 </aura:application>


 <aura:component>
<div class="heroSpaceClass slds-grid slds-wrap">
    <center>
        <div class="slds-p-top_xx-large supFocussed">Support tailored to you</div>
        <div class="slds-p-top_xx-small personalizeExp">Sign in to maximize your support experience and save time</div>
        <div><button class="slds-p-top_xx-large slds-button slds-button--brand signInBtn">Sign in</button></div>
    </center>
   </div>
  </aura:component>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The new SLDS styles that use “_” will be available in Summer 17. Until then, you need to replace “_” with “–” in order for them to work (e.g. “slds-p-top–xx-large”). Also, do not use CENTER, but instead use slds-align–absolute-center or slds-text-align–center to align your text to the middle. Also, when using grid, make sure you specify a size (e.g. slds-size–12-of-12 for full width).

Here’s the updated code:

<aura:component>
    <div class="heroSpaceClass slds-grid slds-wrap slds-text-align--center">
        <div class="slds-p-top--xx-large slds-size--12-of-12 supFocussed">Support tailored to you</div>
        <div class="slds-p-top--xx-small slds-size--12-of-12 personalizeExp">Sign in to maximize your support experience and save time</div>
        <div class="slds-size--12-of-12 slds-p-top--xx-large"><button class="slds-button slds-button--brand signInBtn">Sign in</button></div>
    </div>
</aura:component>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0