Tailwind inline CSS not working
Music47ell opened this issue · comments
While testing the plugin locally, I tried replacing the CSS class name with Tailwind CSS classes but it didn't work.
For example:
Line 63 in 7a6e7cd
I tried replacing that line with this:
properties: { className: ['pl-4 -mx-4 border-l-4 border-gray-800'] },Do you have any idea why it didn't work? And how to make it work?
I think it should work but if it does not it might be due to how purgeCSS works, as it is not able to infer that these class names will be used. You can try adding them to the safelist in tailwind config and verify that it works. Otherwise, if you inspect the code using the browser console, do you see those class names injected?
When using the console to inspect the HTML output, I do see the classes as shown in the screenshot below.
But, not all Tailwind classes are applied.
For example: I don't see the blue border border-l-4 border-primary-500 or the line number before:pr-4 before:-ml-2 before:text-gray-400 before:content-[attr(line)] even though the classes are in the HTML output.
Just tried and verified that it would not work - reason being that mdx-bundler compiles all the code to HTML and CSS but it would not know about the tailwind tokens. One could possibly add tailwindcss and postcss to the build process so that it is aware but otherwise it only recognises them as css class names. The application itself has to map those class names to styles and add the appropriate style sheet.
What I want is to add a Tailwind option. Set it to true, and you wouldn't need to copy/paste the CSS style you mentioned here.
For example:
[require('rehype-prism-plus'), { ignoreMissing: true, tailwind: true }]I've tried it locally but Tailwind CSS classes didn't work.
the way most plugins do it is to export a css file that the user can than import directly
I guess copying the css styles is the better option