How to Add Both !important & selector Strategy for Tailwind CSS Configuration ?

Last Updated : 26 Apr, 2023

Tailwind CSS is a popular utility-first CSS framework that provides a set of pre-defined classes for common styles such as margins, padding, colors, and more. While Tailwind aims to provide a simple and easy-to-use solution for styling websites and applications, sometimes we need to override the default styles or provide custom styles that are not included in the framework. In such cases, we can use !important, and selector strategies to apply our styles.

Syntax:

Using !important: To apply styles with !important, we can add the !important keyword after the value of a property in a class. For example, to make the text color of an element red and override any existing styles, we can use the following class:

text-red {
      color: red !important;
}

Using Selector Strategies: Tailwind provides a powerful feature called selector strategies, which allows us to target specific elements or components using a combination of classes and selectors. We can use the @layer directive to define our own selector strategies. For example, to target all <a> tags that are direct children of a <nav> element, we can use the following selector strategy:

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

Approach 1: Using !important: Using !important should be avoided whenever possible, as it can make it difficult to maintain and debug styles in the future. When we use !important, we are essentially saying that our styles should always take precedence over any other styles, which can lead to unexpected behavior if we forget where we used it. However, there are some cases where we may need to use !important, such as when we are overriding styles defined by third-party libraries or when we need to apply styles to an element that has inline styles.

Example: In this example, we will see the of !important.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet"> 
</head> 
  
<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h1> 
  
    <b> !important & selector strategy</b> 
    <br><br> 
      
    <div> 
        <button class="bg-green-500 !important"> 
            Click me 
        </button> 
    </div> 
</body> 
  
</html>

Output:

Add both !important & selector strategy for tailwind configuration

Approach 2: Using Selector Strategies: Using selector strategies is a better approach than using !important, as it allows us to target specific elements or components without affecting other elements on the page. Selector strategies are also more maintainable and easier to debug, as they provide a clear separation between styles and components. When defining selector strategies, we should try to keep them as specific as possible and avoid using global selectors that can affect the entire page.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet"> 
</head> 
  
<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h1> 
  
    <b>!important & selector strategy</b> 
    <br><br> 
  
    <div> 
        <button class=" p-4 bg-blue-500  
            hover:bg-red-500 !important"> 
            GFG 
        </button> 
          
        <button class=" p-4 bg-blue-500  
            hover:bg-yellow-500 !important"> 
            GFG 
        </button> 
          
        <button class=" p-4 bg-blue-500  
            hover:bg-purple-500 !important"> 
            GFG 
        </button> 
    </div> 
</body> 
  
</html>