Marp
-
|
In #192, @yhatt proposed to use Tailwind CSS in Marp to implement certain styling options, such as columns. However, with the new Tailwind CSS, I no longer am able to import Tailwind with an import declaration in the style frontmatter ( Or, @yhatt, if other people find it useful, any chance of actually bundling Tailwind within Marp? Besides, if some people have good examples of uses of Tailwind within Marp, I would be very interested in seeing them! |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 5 replies
-
If you want to use Tailwind v3, just replacing CSS ---
marp: true
-style: @import url('https://unpkg.com/tailwindcss@^2/dist/utilities.min.css');
---
+<script src="https://cdn.tailwindcss.com/3.0.0"></script>
|
Beta Was this translation helpful? Give feedback.
-
|
It works. For some reason, activating Tailwind v3 seems to remove bullet points and indentation in the exported HTML, but I'm seeing you're updating the styles in #235 so I suppose that might get fixed :-) |
Beta Was this translation helpful? Give feedback.
-
|
A good to know thing is that Tailwind CSS has the opinionated base styles called Preflight. This will remove basic styles for list elements: https://tailwindcss.com/docs/preflight#lists-are-unstyled However, the most of Marp themes have expected default styles provided by browser and not compatible with Tailwind preflight. The previous CSS import had imported only utility classes ( To disable preflight in v3 Play CDN, add extra ---
marp: true
---
<script src="https://cdn.tailwindcss.com/3.0.0"></script>
<script>tailwind.config = { corePlugins: { preflight: false } }</script>
|
Beta Was this translation helpful? Give feedback.
-
|
This works great with HTML but when I export to PDF I can see the snippet on the first page and tailwind doesn't load. |
Beta Was this translation helpful? Give feedback.
-
I strongly believe keeping a project minimum is important for the ecosystem sustainability, so I'm following KISS principle and YAGNI principle while developing Marp. All stylings Tailwind CSS can do are available also in the plain CSS so I'm not going to work for the full integration with Tailwind CSS for now. As mentioned also in #192, the developer who think it is useful can try to add integration with Tailwind through Marp plugin: By overloading protected A below snippet is a minimum Marp plugin example to add the mutation logic for adding Tailwind transformation via PostCSS. (Not confirmed whether works) import plugin from '@marp-team/marpit/plugin'
import postcss from 'postcss'
import tailwindcss from 'tailwindcss'
export const marpTailwindPlugin = plugin(({ marpit }) => {
// Overload Marpit#renderStyle
const { renderStyle } = marpit
marpit.renderStyle = (...args) => {
const originalOutput = renderStyle(...args)
return postcss([tailwindcss]).process(originalOutput).css
}
})If it had been published to npm as like as // engine.js for Marp CLI
const { marpTailwindPlugin } = require('marp-plugin-tailwind')
module.exports = ({ marp }) => marp.use(marpTailwindPlugin) |
Beta Was this translation helpful? Give feedback.
-
|
Thanks a lot. I understand your decision to keep it minimal, and if it is as simple as adding a |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for sharing the snippet. It gives me this error: |
Beta Was this translation helpful? Give feedback.
If you want to use Tailwind v3, just replacing CSS
@importto<script>tag should work.<script>tag(s) can run powerful scripts in …