How to Disable Tailwind on a Div or Component ?
Last Updated :
26 Apr, 2023
For a variety of reasons, you might wish to deactivate Tailwind on a certain div or component. In this article, we’ll go over how to disable Tailwind on a div or component in this article, along with understanding the different approaches to accomplish to achieve it.
Tailwind includes a set of CSS classes that can be used to style HTML elements. These classes are defined in the Tailwind configuration file and are generated dynamically based on the configuration file values. To disable Tailwind on a div or component, remove any classes that have been applied to it.
Approach 1: Remove the Tailwind classes manually: Manually removing the Tailwind classes is the quickest and easiest approach to turn off Tailwind on a div or component. The classes beginning with “p,” “m,” “w,” “h,” “flex,” “justify,” “items,” “align,” “rounded,” “shadow,” “font,” “leading,” “tracking,” and “z” need only be deleted. These classes specify how the element’s background, text, border, padding, margin, width, and height should be styled.
Example: In this example, we have a div element that has several Tailwind classes applied to it. These classes set the background color, text color, and padding of the element. To disable Tailwind, we manually remove all the classes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Disable Tailwind CSS on a div or component
</title>
<link href=
rel="stylesheet">
</head>
<body>
<div class="bg-blue-500 text-white p-2">
This div has Tailwind styles applied to it.
</div>
<div>
This div has no Tailwind
styles applied to it.
</div>
</body>
</html>
|
Output:
How to disable Tailwind on a div or component?
Approach 2: Use a utility class to remove all styles: The “remove-all” utility class from Tailwind eliminates all styles that have been applied to an element. To turn off Tailwind, add this class to your div or component. Here’s an illustration:
<div class="remove-all">
...
</div>
Example: In this example, we add a new utility class called remove-all to the div. This class doesn’t exist in Tailwind, so it won’t apply any styles to the element. By adding this class to the div, we effectively disable Tailwind on it.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Disable Tailwind CSS on a div or component
</title>
<link href=
rel="stylesheet">
</head>
<body>
<div class="remove-all bg-blue-500 text-white p-2">
This div has Tailwind styles applied to it.
</div>
<div class="remove-all">
This div has no Tailwind
styles applied to it.
</div>
</body>
</html>
|
Output:
How to disable Tailwind on a div or component?
Approach 3: Use a custom CSS class: You can also create a custom CSS class that removes all the styles applied to an element. Here’s an example:
.no-tailwind {
all: unset;
}
Example: In this example, we define a custom CSS class called no-tailwind that uses the all: unset; property to remove all styles from the element. We then add this class to the div along with the Tailwind classes we want to remove.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Disable Tailwind CSS on a div or component
</title>
<link href=
rel="stylesheet">
<style>
.no-tailwind {
all: unset;
}
</style>
</head>
<body>
<div class="bg-blue-500 text-white
p-2 custom-class">
This div has Tailwind styles
applied to it.
</div>
<div class="custom-class no-tailwind">
This div has no Tailwind styles applied to it.
</div>
</body>
</html>
|
Output:
How to disable Tailwind on a div or component?
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...