[PR #2251] enhance tailwind compatibility #3159

New Issue

claunia · 2026-01-29T18:22:10Z

claunia commented

2026-01-29 18:22:10 +00:00

Original Pull Request: https://github.com/radzenhq/radzen-blazor/pull/2251

State: closed
Merged: No

Problem:

Using a Tailwind CSS utility class to set the text color on a native <input> HTML element doesn't work in a Radzen project.

<input class="text-fuchsia-700 text-7xl" /> <!---it doesn't work-->

Root cause:

Radzen's stylesheet sets the style of the standard HTML input in an intrusive way:

input {
  color: ...
}

Meanwhile, the Tailwind CSS utility sets the color in a more gentle way:

@layer utilities {
   .text-fuchsia-700 {
     color:...
   }
}

The Tailwind CSS rule is more specific but cannot take precedence because it's defined inside a CSS layer. Tailwind follows the best practices of a modern CSS framework, using a CSS layer instead of !important everywhere.

Correction

Modifying a native style of an HTML tag directly without any specificity (such as @layer or .rz- class) is generally not recommended, Instead, these rules are now placed within a radzen CSS @layer. This ensures Radzen's styles are applied but allows other CSS frameworks, such as Tailwind, to properly override or extend them when needed, making the rule less intrusive and more compatible.

Note

This PR added only 2 lines of code, other changes are white-space indentation

**Original Pull Request:** https://github.com/radzenhq/radzen-blazor/pull/2251 **State:** closed **Merged:** No --- ## Problem: Using a Tailwind CSS utility class to set the text color on a native `<input>` HTML element doesn't work in a Radzen project. ```html <input class="text-fuchsia-700 text-7xl" />  ``` ## Root cause: Radzen's stylesheet sets the style of the standard HTML input in an intrusive way: ```css input { color: ... } ``` Meanwhile, the Tailwind CSS utility sets the color in a more gentle way: ```css @layer utilities { .text-fuchsia-700 { color:... } } ``` The Tailwind CSS rule is more specific but cannot take precedence because it's defined inside a CSS layer. Tailwind follows the best practices of a modern CSS framework, using a CSS layer instead of `!important` everywhere. ## Correction Modifying a native style of an HTML tag directly without any specificity (such as `@layer` or `.rz-` class) is generally not recommended, Instead, these rules are now placed within a `radzen` CSS `@layer`. This ensures Radzen's styles are applied but allows other CSS frameworks, such as Tailwind, to properly override or extend them when needed, making the rule less intrusive and more compatible. ## Note This PR added only 2 lines of code, other changes are white-space indentation <img width="2130" height="736" alt="image" src="https://github.com/user-attachments/assets/84d4ea34-9afd-4a63-87f5-26c0a6fa7f4a" />

claunia added the pull-request label 2026-01-29 18:22:11 +00:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#3159