Is there a way to change tailwind default style option?

user_14230002 0
Viewed 1465

I'm building a blog in NextJS. Apparently in Tailwind's list style type the default style is list-none. So every <ul> <li> elements in my app is not styled at all.

I use remark to process .md files and my function returns <ul> <li> without classes so in this case I can't specify the classes by manually writing them.

  • Is there any way to change this default styling so my <ul> <li> is not plain text?
  • or is there any way to give a list-disc class to all <ul> <li>?
  • or is there any way to exclude certain <div>s from being styled by Tailwind?
  • other approach?

I tried this

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

but it doesn't solve the problem.

Any help would be appreciated.

tailwind-css next.js html-lists css html
2 Answers

Directives

You can use a preprocessor like PostCSS you can use the @apply or use the @layer directive.

ul {
 @apply list-disc;
}

OR

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

Base styles

You can also use base styles

// tailwind.config.js

const plugin = require('tailwindcss/plugin')

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

You can disable the tailwind default nomalized stylings (preflight) from the tailwind.config.js like this:

module.exports = {
  corePlugins: {
    preflight: false,
  }
};
user_35195480
Related