[PR #2248] [CLOSED] enhance tailwind compatibility #3152

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/2248
Author: @duongphuhiep
Created: 8/9/2025
Status: ❌ Closed

Base: master ← Head: master

📝 Commits (1)

77bf4c4 enhance tailwind compatibility

📊 Changes

1 file changed (+8 additions, -6 deletions)

View changed files

📝 Radzen.Blazor/themes/components/blazor/_input.scss (+8 -6)

📄 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.

_{🔄 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/2248 **Author:** [@duongphuhiep](https://github.com/duongphuhiep) **Created:** 8/9/2025 **Status:** ❌ Closed **Base:** `master` ← **Head:** `master` --- ### 📝 Commits (1) - [`77bf4c4`](https://github.com/radzenhq/radzen-blazor/commit/77bf4c43957f2f8962354a4c6a95870fca08c8a2) enhance tailwind compatibility ### 📊 Changes **1 file changed** (+8 additions, -6 deletions) <details> <summary>View changed files</summary> 📝 `Radzen.Blazor/themes/components/blazor/_input.scss` (+8 -6) </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. --- <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#3152