How to reset specific container child tags from tailwind styles

I am using tailwindcss in django project. Tailwind css by default reset all tags default styles. I am creating a blog page. The blog content is created with ckeditor. I am using {{content|safe}} to load the content as html. The issue arise here. The content default tag styles are not showing so the content is not showing as expected.

I have tried with row css to unset the tailwind resets.

.reset-default * {
  all: unset; 
  box-sizing: border-box; 
}

.reset-default p, 
.reset-default a, 
.reset-default button {
  all: unset;
}

.reset-default a {
  text-decoration: initial; 
  color: initial; 
}

.reset-default button {
  background: initial; 
  border: initial; 
}

.btn-custom {
  padding: 10px 20px;
  background-color: #3490dc;
  color: white;
  border-radius: 5px;
}

But it didn't work, so I tried with a tailwind css plugin, @tailwindcss/typography. I added prose class in the parent and the styles are added. But for the newlines it also taking margins for blank lines. Is there any way to reset the tags to default.

In TailwindCSS, Preflight is responsible for ensuring compatibility between different browsers by performing a complete "reset". If you don't want to remove the default settings of HTML elements, you will need to import the necessary components individually instead of using @import "tailwindcss";, excluding the preflight.css.

/* 
   This is the shorter version,
   which includes the following 4 lines.
*/
/* @import "tailwindcss"; */

/*
   In order to exclude preflight.css,
   we need to manually write the parts added by the import.
*/
@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
/* @import "tailwindcss/preflight.css" layer(base); */
@import "tailwindcss/utilities.css" layer(utilities);

Until TailwindCSS v3

The same applies in v3, except that TailwindCSS needed to be imported differently into the CSS. Out of the 3 @tailwind imports, you should exclude the base one.

/* @tailwind base; */ /* Preflight will be injected here */
@tailwind components;
@tailwind utilities;

If you specifically want to keep the default settings of the HTML elements only within the .reset-default parent, you may need stricter rules to override the styles. To declare stricter rules, it's worth reading about CSS Specificity.

I see you're using CKEditor 5. Let's take a look at what the documentation suggests:

In the generated CSS, every styling has a parent of .ck.ck-content, which provides a stronger CSS specificity for the element than your .reset-default. This is because 2 classes have stronger specificity than 1.

Then, define the corresponding CSS styles for the document:

.ck.ck-content h3.category {
    font-family: 'Bebas Neue';
    font-size: 20px;
    font-weight: bold;
    color: #d1d1d1;
    letter-spacing: 10px;
    margin: 0;
    padding: 0;
}

.ck.ck-content p.info-box {
    padding: 1.2em 2em;
    border: 1px solid #e91e63;
    border-left: 10px solid #e91e63;
    border-radius: 5px;
    margin: 1.5em;
}

So, if you want to override the original styling, you will need at least 3 classes: .ck.ck-content.reset-default (in any order, of course). This assumes, of course, that you are applying the .reset-default class to the same parent, which I assume is the .ck class.

.reset-default.ck.ck-content * {
  all: unset; 
  box-sizing: border-box; 
}

.reset-default.ck.ck-content p, 
.reset-default.ck.ck-content a, 
.reset-default.ck.ck-content button {
  all: unset;
}

.reset-default.ck.ck-content a {
  text-decoration: initial; 
  color: initial; 
}

.reset-default.ck.ck-content button {
  background: initial; 
  border: initial; 
}

<div class="ck ck-editor reset-default">
  <p>...</p>
  <a>...</a>
  <button>...</button>
</div>

In addition, the documentation provides many great tips for formatting.

Вернуться на верх