vincent15000's avatar

How to disable TailwindCSS for a div and all its children ?

Hello,

I need to disable TailwindCSS for a div and all its children.

I can only add a class to the div, because all the children are dynamically generated and I mustn't add any class to them.

I have tried to add these classes : all-revert, all-initial.

div.no-tailwindcss {
	all: unset;
}

But nothing works.

Do you know any solution to remove all effect of TailwindCSS on a little part of an HTML page ?

Thanks for your help.

Vincent

0 likes
14 replies
LaryAI's avatar
LaryAI
AI
3 years ago
Level 58

One solution is to use the @layer directive in your TailwindCSS configuration file to move the styles for the div and its children to a separate layer, and then disable that layer by setting its enabled property to false. Here's an example:

  1. In your tailwind.config.js file, define a new layer for the div and its children:
module.exports = {
  // ...
  layers: {
    'no-tailwindcss': {
      // Add any styles you want to disable here
      '.no-tailwindcss': {
        all: 'unset',
      },
    },
  },
};
  1. In your HTML, add the no-tailwindcss class to the div:
<div class="no-tailwindcss">
  <!-- Dynamically generated content here -->
</div>
  1. In your CSS, disable the no-tailwindcss layer:
@layer no-tailwindcss {
  /* This layer is disabled */
  @variants {
    .no-tailwindcss {
      all: unset;
    }
  }
}

This will prevent any TailwindCSS styles from being applied to the div and its children. Note that this solution requires TailwindCSS v2.2 or later.

1 like
newbie360's avatar

@vincent15000 if i understand your question correctly...

app.css add

[data-remove-styles] * {
  all: initial;
}

and then npm run build

<div data-remove-styles>
	...
</div>
1 like
Snapey's avatar
Snapey
3 years ago
Best Answer
Level 122

@vincent15000 I assume you are wanting to undo the css reset performed by tailwind ?

I doubt you could do that because its applied at the root element

How about displaying your content in an iFrame ?

1 like
Snapey's avatar

@vincent15000 iframe will have the default browser.styling - depending on what you load in its head

1 like
newbie360's avatar

@vincent15000 hmm why this not work ? when you want to undo the css , just remove the attribute data-remove-styles by any script, or you mean the CSS selector * not work ?

vincent15000's avatar

@MohamedTammam

I have read the documentation for preflight and it seems to be a way to customize the default styles for some tags.

I need to have TailwindCSS for the application, except for a specific div for which I need to do as if I had no TailwindCSS installed.

karolware's avatar

well i also had the same problem but i did my research and found a solution.

The Use of Custom Class that Replace default styles

i got this idea from an alticle from TronLite Technology you can check it out here: tronlitetechnology.com/view/default-browser-css-style from that article i got the idea of using the default browser style reusable components in an element to replace the default reference: tronlitetechnology.com/view/default-browser-css-style

Define the custom class to the container

in order to replace default tailwind CSS you have to use custom class in which you will replace with default style. using the below example in the div you have to bind class called custom content

Example code

<html>
<head>
<style>
.custom-content p {
  display: block !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  margin: 1em 0 !important;
  /* Add any other custom styles you want */
}

.custom-content blockquote {
  border-left: 4px solid #666 !important;
  padding-left: 10px !important;
  font-style: italic !important;
  /* Add any other custom styles you want */
}

.custom-content ul {
  /* description */
  display: block !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  padding-inline-start: 40px !important;
  list-style-type: disc !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  counter-reset: list-item !important;
  list-style-image: none !important;
  list-style-position: outside !important;
  margin: 1em 0 !important;
  padding: 0 0 0 30pt !important;
}

.custom-content ol {
  /* description */
  display: block !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  padding-inline-start: 40px !important;
  list-style-type: decimal !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  counter-reset: list-item !important;
  list-style-image: none !important;
  list-style-position: outside !important;
  margin: 1em 0 !important;
  padding: 0 0 0 30pt !important;
}

.custom-content b {
  font-weight: bolder !important;
}

.custom-content i {
  font-style: italic !important;
}

.custom-content h1 {
  display: block !important;
  font-weight: bold !important;
  font-size: 2em !important;
  margin-block-start: 0.67em !important;
  margin-block-end: 0.67em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}
.custom-content h2 {
  display: block !important;
  font-weight: bold !important;
  font-size: 1.5em !important;
  margin-block-start: 0.83em !important;
  margin-block-end: 0.83em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}
.custom-content h3 {
  display: block !important;
  font-weight: bold !important;
  font-size: 1.17em !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}
.custom-content h6 {
  display: block !important;
  font-weight: bold !important;
  font-size: 0.67em !important;
  margin-block-start: 2.33em !important;
  margin-block-end: 2.33em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}
.custom-content table {
  display: table !important;
  box-sizing: border-box !important;
  border-spacing: 2px !important;
  border-collapse: separate !important;
  text-indent: initial !important;
  border-color: gray !important;
}
.custom-content tr {
  display: table-row !important;
  border-color: inherit !important;
  vertical-align: inherit !important;
}
.custom-content td {
  display: table-cell !important;
  padding: 1px !important;
  vertical-align: inherit !important;
}
.custom-content u {
  text-decoration: underline !important;
}
.custom-content a {
  color: #0000EE !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}
.custom-content a:active {
  color: #FF0000 !important;
}
.custom-content a:visited {
  color: #551A8B !important;
}
.custom-content pre {
  border-radius: 0.5rem !important;
  padding: 1rem !important;
  font-family: monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  /* Add any other custom styles you want */
}

.custom-content code {
  margin: 0;
  white-space: pre-wrap;

}
.content-custom table td, table th,table tr {
    background-color: transparent !important;
    border-left: 4px solid #e6e9ec !important;
    border-bottom: 4px solid #e6e9ec !important;
    border-right: 4px solid #e6e9ec !important;
    border-top: 4px solid #e6e9ec !important;
    font-size: inherit !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 5px !important;
    font-weight: 600 !important;
}

.content-custom tr{
    background-color: transparent !important;
    border-left: 4px solid #e6e9ec !important;
    border-bottom: 4px solid #e6e9ec !important;
    font-size: inherit !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 5px !important;
    font-weight: 600 !important;

}
.content-custom .alignleft {
    float: left;
    margin: 0 1em 0 0;
}
.content-custom .ytp-cued-thumbnail-overlay-image {
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
}
.content-custom .html5-video-player {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    outline: 0;
    font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
    color: #eee;
    text-align: left;
    direction: ltr;
    font-size: 11px;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: manipulation;
    -ms-high-contrast-adjust: none;
}

</style>

</head>
<body>
<div class="custom-content'">
<!-- Raw HTML -->
</div>

</body>
</html>
1 like

Please or to participate in this conversation.