Some tailwind classes do not seem to work

[irinaz]

I am adding class p-4 , and it does not see to give me 1rem padding as it is expected based on https://v1.tailwindcss.com/docs/padding

Class | Properties

.p-0 | padding: 0; .p-1 | padding: 0.25rem; .p-2 | padding: 0.5rem; .p-3 | padding: 0.75rem; .p-4 | padding: 1rem; .p-5 | padding: 1.25rem; .p-6 | padding: 1.5rem; .p-8 | padding: 2rem;

[sikofitt]

@irinaz What part of the theme is this failing in?

[irinaz]

@sikofitt I added here example https://dev-webcamp-su.pantheonsite.io/styles-testing you can see that some styles from html are pulling styles (border-solid), but others do not

<p class="border-solid border-red-800 p-4 m-4">
    testing styles and layouts
</p>

[sikofitt]

I need to check how the build system is setup. But if I add the classes 'border' and 'border-black' The border shows up. I think border-solid just sets the style and not the width so it isn't showing up. It feels like when building tailwind it isn't adding the border-red and p-4 m-4 because it isn't used in any templates maybe?

We can try Safelisting these classes and see if that fixes the issue.

[sikofitt]

I'm wondering if it's better to create specific classes for what the theme needs using @apply instead of safelisting?

[irinaz]

@sikofitt , one of the challenges here is to define which classes / design element we want to include in the out of the box theme so site builders can apply pre-set classes on blocks / regions / as inline styles. I started document https://docs.google.com/document/d/15hdUDI_zDHMOFEEfYKCmiKpHiptUPGxc47ZKyl0BamQ/edit?tab=t.0#heading=h.32rjsu5ccko5 that should help define most used classes like su-list, su-card, etc, but also we might want to go with fanc(ier) displays like https://postdocs.stanford.edu/about/staff.