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.

[sikofitt]

Here I am a month later. Ooops. After playing around with the theme on the webcamp site I am seeing the same thing. I think classes should be chosen to safelist, like maybe p{b,t,y,x}-{1,2,3,4,5}, or margin classes. Another thing I noticed is that Stanford colors don't seem to work when I use text-cardinal, text-cardinal-dark, etc.

[irinaz]

@sikofitt , many more changes are coming this week, please feel free to make suggestions for module styles/classes in document

[sikofitt]

@irinaz Going to take a look at the document more thoroughly in about 30 minutes. 👍

[irinaz]

@sikofitt , document is very much work in progress, all your comments and suggestions are very much appreciated