Tailwind CSS 是一个流行的实用优先 CSS 框架，它提供了一组用于常见样式（如边距、填充、颜色等）的预定义类。虽然 Tailwind 旨在为网站和应用程序的样式提供简单易用的解决方案，但有时我们需要覆盖默认样式或提供框架中未包含的自定义样式。在这种情况下，我们可以利用 !important 和 选择器策略 来应用我们的样式。

语法：

使用 !important： 要应用带有 !important 的样式，我们可以在类的属性值后面添加 !important 关键字。例如，要将元素的文本颜色设置为红色并覆盖任何现有样式，我们可以使用以下类：

text-red {
      color: red !important;
}

使用选择器策略： Tailwind 提供了一项称为“选择器策略”的强大功能，它允许我们使用类和选择器的组合来定位特定的元素或组件。我们可以使用 @layer 指令来定义我们自己的选择器策略。例如，要定位 INLINECODE00168dfe 元素的所有直接子级 INLINECODE6982f2fb 标签，我们可以使用以下选择器策略：

@layer components {
      nav > a {
        color: blue;
      }
}

方法 1：使用 !important：

应尽可能避免使用 !important，因为它会导致将来难以维护和调试样式。当我们使用 !important 时，本质上是在说我们的样式应始终优先于任何其他样式，如果我们忘记在哪里使用了它，可能会导致意外行为。但是，在某些情况下，我们可能需要使用 !important，例如在覆盖由第三方库定义的样式时，或者需要将样式应用于具有内联样式的元素时。

示例： 在此示例中，我们将看到 !important 的用法。

#### HTML

    



    

        GeeksforGeeks
    

     !important & selector strategy
    


    
    

        
            Click me
        
    

输出：

!Add both !important & selector strategy for tailwind configurationAdd both !important & selector strategy for tailwind configuration

方法 2：使用选择器策略：

使用选择器策略是比使用 !important 更好的方法，因为它允许我们定位特定的元素或组件而不影响页面上的其他元素。选择器策略也更易于维护和调试，因为它们在样式和组件之间提供了清晰的分离。在定义选择器策略时，我们应尝试使它们尽可能具体，并避免使用会影响整个页面的全局选择器。

示例：

#### HTML

    



    

        GeeksforGeeks
    

    !important & selector strategy
    



    

        
            GFG
        
        
        
            GFG
        
        
        
            GFG
        
    

输出：