gregsullivan/_tw

Reset styles overide custom styles

DSGND opened this issue · 6 comments

DSGND commented

Hello,

Thanks for _tw, great job!

I'm using _tw only since few days.

Until now, I do not have issue related to add custom styles in components/*.css, coding while npm run watch, then compiling with npm run prod, my front end was OK.

Since today, Reset styles are compiled after my custom styles, so for instance, buttons are transparent because of thoses lines :

1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

How can I priorize custom styles to be compiled after Tailwind native styles ?

I should not have updated via npm update? 🤔 (What so ever, I reinstall quickly a new _tw theme, add my custom styles, but it was the same, reset styles overide my custom styles)

gregsullivan commented

Hi Dareth—Thanks for posting this!

Unfortunately, I'm not able to duplicate the issue. I generated a new theme, added styles to components.css, compiled, ran npm update, and the reset still always came first. Can you tell me the line numbers in style.css after running npm run dev of:

  • The button reset you pasted in above
  • The custom styles that aren't working

Thanks again!

DSGND commented

Hi @gregsullivan!
Thanks for your quick answer.
Compilation used to work well until yesterday. I've just updated node packages with npm update, I don't remember change anything else except CSS.
Here are the lines and the CSS in generated style.css :

  • Lines 242-252
button, [type="button"], [type="reset"], [type="submit"], .wp-element-button, .wp-block-button__link, .button, .gform_button {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--wp--preset--color--dark);
  background-color: var(--wp--preset--color--tertiary);
  background-image: none;
  border-radius: 4px;
  font-family: var(--wp--preset--font-family--condensed);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
  margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--30);
}
  • Lines 961-971
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}
gregsullivan commented

No problem at all! Unfortunately, I think to debug this I would need to see your project. Do you have a minimal example you can share?

The only thing I could think of off the top of my head that would cause this would be reordering the tailwind.css file.

DSGND commented

I've fixed it by extracting out the code from @layer compenents { … }.

But I'm now noticing that I don't really get how @layer works… :/

I presume that classes in my components/*.css embedded in @layer were sorted by base, components and utilities, and are compiled according to how tailwind.css orders them…

gregsullivan commented

Awesome, very happy to hear it! Please don't hesitate to reopen this or to post another issue if you run into other problems.

  • 👍1