htmlcssnext.jshtml-liststailwind-css

Is there a way to change tailwind default style option?


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.

I tried this

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

but it doesn't solve the problem.

Any help would be appreciated.


Solution

  • 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' },
          })
        })
      ]
    }