Как сбросить дочерние теги определенных контейнеров из стилей tailwind

Я использую tailwindcss в проекте django. Tailwind css по умолчанию сбрасывает все стили тегов по умолчанию. Я создаю страницу блога. Содержимое блога создается с помощью ckeditor. Я использую {{content|safe}} для загрузки содержимого в формате html. Здесь возникает проблема. Стили тегов содержимого по умолчанию не отображаются, поэтому содержимое отображается не так, как ожидалось.

Я пробовал с помощью row css отменить сброс настроек попутного ветра.

.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;
}

Но это не сработало, поэтому я попробовал использовать css-плагин tailwind, @tailwindcss/typography. Я добавил prose класс в родительский файл, и стили были добавлены. Но для новых строк также требуются поля для пустых строк. Есть ли какой-нибудь способ сбросить теги по умолчанию?

В TailwindCSS функция Preflight отвечает за обеспечение совместимости между различными браузерами путем выполнения полной "перезагрузки". Если вы не хотите удалять настройки HTML-элементов по умолчанию, вам нужно будет импортировать необходимые компоненты по отдельности вместо использования @import "tailwindcss";, исключая следующие 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);

До тех пор, пока не появится Tailwind CSS v3

То же самое относится и к версии 3, за исключением того, что TailwindCSS нужно было импортировать в CSS по-другому. Из 3 @tailwind импортированных данных вам следует исключить один base.

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

Если вы специально хотите сохранить настройки HTML-элементов по умолчанию только в родительском элементе .reset-default, вам могут потребоваться более строгие правила для переопределения стилей. Чтобы объявить более строгие правила, стоит почитать о специфике CSS.

Я вижу, вы используете CKEditor 5. Давайте посмотрим, что предлагается в документации:

В сгенерированном CSS у каждого стиля есть родительский элемент .ck.ck-content, который обеспечивает более высокую специфичность CSS для элемента, чем ваш .reset-default. Это происходит потому, что 2 класса обладают более высокой специфичностью, чем 1.

Затем определите соответствующие стили CSS для документа:

.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;
}

Итак, если вы хотите переопределить исходный стиль, вам понадобятся как минимум 3 класса: .ck.ck-content.reset-default (в любом порядке, конечно). Это предполагает, конечно, что вы применяете класс .reset-default к тому же родительскому классу, который, как я предполагаю, является классом .ck.

.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>

Кроме того, в документации содержится множество полезных советов по форматированию.

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