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.
<ul> <li>
is not plain text?list-disc
class to all <ul> <li>
?<div>
s from being styled by Tailwind?I tried this
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
listStyleType: false,
}
}
but it doesn't solve the problem.
Any help would be appreciated.
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;
}
}
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' },
})
})
]
}