DNN Forums

Ask questions about your website to get help learning DNN and help resolve issues.

Tailwind on DNN 10 is overwrite by _reset.scss (default.css)

 9 Replies
 2 Subscribed to this topic
 19 Subscribed to this forum
Sort:
Author
Messages
New Around Here
Posts: 23
New Around Here

Was trying to create a simple DNN 10 Theme using Tailwind CLI.
Nothing fancy on input.css, just

@import "tailwindcss";

Generate output by run cmd:
npx @tailwindcss/cli -i ./css/input.css -o ./css/output.css --watch

And play with UI.
But somehow all padding, margin, border, font got overwrite by _reset.scss (default.css)
Causing the UI that's suppose to be working, got mess up.

The DnnCssInclude priority was set to 110 but still got ovewrite by _reset.scss

I can remove the default.css with 40Fingers Stylehelper, but this will causing Edit Content & Module Settings UI got mess up

Wonder if there's a better solution.

 

Senior Member
Posts: 1322
Senior Member
3 Helpful Replier
Helpful Replier
Thanks for being such a helpful replier!
Lifesaver
Lifesaver
You're Life Saver!
New Poster
New Poster
Congrats on posting!
3 Engaged Reader
Engaged Reader
You are an engaged reader!

I'm no sure this has anything to do with the order as that should already be correct..
(default.css first skin.css after that)

I don't use Tailwind, but can't it deal with these resets? That seems weird to me..?

New Around Here
Posts: 23
New Around Here
Still cannot make it work, seems conflict with tailwind.
I'll exclude default.css and use another skin for Edit Layout.
Senior Member
Posts: 1322
Senior Member
3 Helpful Replier
Helpful Replier
Thanks for being such a helpful replier!
Lifesaver
Lifesaver
You're Life Saver!
New Poster
New Poster
Congrats on posting!
3 Engaged Reader
Engaged Reader
You are an engaged reader!

Hmm, I just tested injecting the reset.css into an online Tailwind editor and it did not seem to influence the layout.
Would you mind giving me a copy of the theme so I can test locally?
Because if that reset is influencing Themes, that's not good.

New Around Here
Posts: 23
New Around Here
Sure,
You can grab it on https://github.com/erw13n/TailwindTheme
New Around Here
Posts: 23
New Around Here
I think the problem is not DNN but Tailwind 4.
I try downgrade it to Tailwind 3.5 and seems working fine.
Senior Member
Posts: 1322
Senior Member
3 Helpful Replier
Helpful Replier
Thanks for being such a helpful replier!
Lifesaver
Lifesaver
You're Life Saver!
New Poster
New Poster
Congrats on posting!
3 Engaged Reader
Engaged Reader
You are an engaged reader!
Posted By Erwin on 6/28/2025 10:39 PM
I think the problem is not DNN but Tailwind 4.
I try downgrade it to Tailwind 3.5 and seems working fine.

Ah ok.
Thank you for letting us know :-)

 

 

Senior Member
Posts: 1607
Senior Member
MVP
MVP
You're an MVP!
New Poster
New Poster
Congrats on posting!
Posted By Erwin on 6/28/2025 1:39 PM
I think the problem is not DNN but Tailwind 4.
I try downgrade it to Tailwind 3.5 and seems working fine.

Yeah... this is why I was never a fan of this direction of DNN 10.  These new and untested dependencies are keeping us from really being able to support DNN 10 right now.  

 

New Around Here
Posts: 23
New Around Here
Tailwind 4 is introduction of CSS Cascade Layers.
All the styles that generated was now inside @layer.
Anything defined outside of @layer is stronger than @layer https://developer.mozilla...S/@layer#description

Since DNN default.css is not inside @layer, it's stronger than @layer.
A quick solution would be modify default.css, and wrap it in @layer, this will make Tailwind.css stronger than default.css
Growing Member
Posts: 61
Growing Member
4 Helpful Replier
Helpful Replier
Thanks for being such a helpful replier!
New Poster
New Poster
Congrats on posting!
4 Engaged Reader
Engaged Reader
You are an engaged reader!
2 Avid Reader
Avid Reader
Avid Reader art thou!
2 Most Liked
Most Liked
Congrats, your posts are really liked!

Erwin, very nice work proposing the fix!! 

Dnn.Platform - Issue #6686

These Forums are for the discussion of the open source CMS DNN platform and ecosystem.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. If you have (suspected) security issues, please DO NOT post them in the forums but instead follow the official DNN security policy
  2. No Advertising. This includes the promotion of commercial and non-commercial products or services which are not directly related to DNN.
  3. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  4. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  5. No Flaming or Trolling.
  6. No Profanity, Racism, or Prejudice.
  7. Site Moderators have the final word on approving / removing a thread or post or comment.
  8. English language posting only, please.

Would you like to help us?

Awesome! Simply post in the forums using the link below and we'll get you started.

Get Involved