[PR #2251] [CLOSED] enhance tailwind compatibility #3154

New Issue

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

claunia commented

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

📋 Pull Request Information

Original PR: https://github.com/radzenhq/radzen-blazor/pull/2251
Author: @duongphuhiep
Created: 8/11/2025
Status: ❌ Closed

Base: master ← Head: master

📝 Commits (1)

f36e178 enhance tailwind compatibility

📊 Changes

1 file changed (+93 additions, -91 deletions)

View changed files

📝 Radzen.Blazor/themes/components/blazor/_input.scss (+93 -91)

📄 Description

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

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/radzenhq/radzen-blazor/pull/2251 **Author:** [@duongphuhiep](https://github.com/duongphuhiep) **Created:** 8/11/2025 **Status:** ❌ Closed **Base:** `master` ← **Head:** `master` --- ### 📝 Commits (1) - [`f36e178`](https://github.com/radzenhq/radzen-blazor/commit/f36e1782c4679bd2b35fc090853dae235311412f) enhance tailwind compatibility ### 📊 Changes **1 file changed** (+93 additions, -91 deletions) <details> <summary>View changed files</summary> 📝 `Radzen.Blazor/themes/components/blazor/_input.scss` (+93 -91) </details> ### 📄 Description ## 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" /> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

claunia added the pull-request label 2026-01-29 18:22:10 +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#3154