有没有办法改变顺风默认样式选项？答案

【问题标题】：Is there a way to change tailwind default style option?有没有办法改变顺风默认样式选项？
【发布时间】：2021-10-20 06:11:25
【问题描述】：

我正在用 NextJS 建立一个博客。显然在 Tailwind 的 list style type 中，默认样式是 list-none。所以我的应用程序中的每个<ul> <li> 元素都没有样式。

我使用remark 处理.md 文件，我的函数返回<ul> <li> 没有类，所以在这种情况下，我无法通过手动编写类来指定它们。

有没有办法改变这个默认样式，让我的<ul> <li> 不是纯文本？
或者有什么方法可以为所有<ul> <li> 提供list-disc 类？
或者有什么方法可以将某些 <div>s 排除在 Tailwind 的样式之外？
其他方法？

我试过了

// tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     listStyleType: false,
    }
  }

但这并不能解决问题。

任何帮助将不胜感激。

【问题讨论】：

标签： html css next.js html-lists tailwind-css

【解决方案1】：

指令

您可以使用preprocessor，例如PostCSS，也可以使用@apply 或@layer 指令。

ul {
 @apply list-disc;
}

OR

@tailwind base;
@layer base{
 ul {
  @apply list-disc;
 }
}

基本样式

你也可以使用base styles

//tailwind.config.js

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addBase, theme }) {
      addBase({
        'ul': { list-style: 'disc' },
      })
    })
  ]
}

【讨论】：