如何重置tailwindcss样式的特定容器子标签

Question

问题在这里出现。内容默认标签样式未显示，因此内容未显示为预期。 我已经尝试使用行CSS来解开parwindcss重置。

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

无论如何，我尝试使用parwindcss插件：

@tailwindcss/typography

尝试。我在父母中添加了

prose

课，并添加了样式。但是对于新线来说，它也需要空白的利润。有什么方法可以将标签重置为默认值。

在parwindcss中，前飞行负责通过执行完整的“重置”来确保不同浏览器之间的兼容性。如果您不想删除HTML元素的默认设置，则需要单独导入必要的组件而不是使用

@import "tailwindcss";

。

preflight.css

Preflight

Answer 1

直到tailwindcssv3

在v3中也适用，只是需要将tailwindcss的导入到CSS中。在3

/* 
   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

一个。

base
Preflight

-TailWindcss V3Docs

如果您只想将HTML元素的默认设置保留在

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

父级中，则可能需要更严格的规则来覆盖样式。要声明更严格的规则，值得阅读有关CSS特异性的信息。

CSS特异性

-MDN文档
• 我看到您正在使用CKEditor 5。让我们看一下文档建议的内容：

Answer 2

风格 - ckeditor 5docs

在生成的CSS中，每种样式都有一个父母，它比您的

.reset-default

提供了更强的CSS特异性。这是因为两个类的特异性大于1。
• ，然后定义文档的相应CSS样式：
.ck.ck-content

，如果您想覆盖原始样式，则至少需要3堂课：

.reset-default
• （当然，以任何顺序）。当然，这假定您将

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

  类应用于同一父母，我认为这是
.ck.ck-content.reset-default

类。

.reset-default

.ck此外，该文档提供了许多格式化的重要技巧。

风格：配置

-CKEditor 5docs