-
Notifications
You must be signed in to change notification settings - Fork 269
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature Request: Disable the prose classes per element. #32
Comments
+1 - similar situation - html page laid out with a button within an article - prose completely overrides any styling on the button. I was looking for a no-prose/prose-off/plain utiity. |
+1 Example: If I want a h1 to be text-green-500 for example, it should override the color provided by the prose collection. Right now this does not work. Let me know what you think :) |
To do this you just need to use the |
@bwklein Definitely agree it would be nice to have some way to "escape" from the prose styling. We've done it many times on our own projects (never loved our solutions though) so it's definitely something we'd like to add. |
Meaning that I can override the prose class by using the important feature then the utility class I wish to apply?
… On 21 Jul 2020, at 15:55, Adam Wathan ***@***.***> wrote:
Therefore a utility class should always override a plugin/theme like prose, otherwise it's not a utility class.
To do this you just need to use the important feature in Tailwind. We have no ability to control how specificity works in CSS in any other way, just how CSS works.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub <#32 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA5KSZ4PF4XHYNNHG27ZXPDR4WM57ANCNFSM4PC3XMEA>.
|
I solved this by using the most generic
|
As a (potentially bad) suggestion, I think this can be accomplished using the - a: {
+ '*:not(.no-prose) a:not(.no-prose)': {
color: defaultTheme.colors.gray[900],
textDecoration: 'underline',
}, This seems like it might be bad from a performance perspective, but I'm not sure the best way to actually test this. This will disable 'prose' for anchor tag if itself, or any parent has the |
For me I have GIST script embed links in my markdown, when it renders the prose styling kinda messes it up a bit. But yeah the ability to turn it off in places would be super handy. |
I tried doing this: typography: {
default: {
css: {
pre: {},
}
}
} I was not surprised to see that it didn't work 😅 maybe we could do Edit: it looks like this does work: typography: {
default: {
css: {
pre: false,
code: false,
'pre code': false,
'code::before': false,
'code::after': false
}
}
} |
@JasonEtco agree with this. I need to disable the default styling of ul and ol due to conflicts with wordpress! |
@tomphilpotts You can do that already by following the example in @JasonEtco's comment 👍 |
Yes, this would be nice. Ran into this issue when using a Vue component inside of markdown with the Nuxt,js content module. Ended up having to do the same as @joemasilotti and using |
Also having this issue when using Vue components inside markdown with gridsome vue remark. The Also did some attempts with @JasonEtco solution, but I guess this only works for css rules that are already part of the prose style, not for custom rules. Attempted the following: typography: {
default: {
css: {
'section': false,
}
}
} Being a typography: {
default: {
css: {
'div.noprose': false,
}
}
} And wrapping the component inside a |
@adamwathan Do u have a way to propose? |
For anyone who doesn't want to lose the inline `code` style try with CSS like below which worked for me. /* prism.css */
pre code::after {
content: none !important;
} |
For those interested, there is a thread about this on Adams Twitter: https://twitter.com/adamwathan/status/1306643875994447874 TLDR; It' "impossible". That being said, there is workarounds suggested in those Tweets, but it very much depends on your setup. |
The best way I found to override 'prose' styles is to set
Now add any tailwind class to override 'prose' style. And if there are too many overrides needed, it's better to split divs and add prose to required divs. Really rooting for some official 'unprose' solution which compeletly disable prose styles for current and child divs. |
|
#32 (comment) work but when I add |
@larsroettig: For Tailwind 2.0 you have to use We've experimented with a bunch of ways to make this work, however there is always something that doesn't work. We can re-reset all the properties we know, but once you start extending the config it gets really tricky. <div class="prose">
<p>This is styled with prose</p>
</div>
<p>This is <strong>not</strong> styled with prose</p>
<div class="prose">
<p>This is styled with prose</p>
</div> One the reasons that it is hard to re-reset is for example css properties that cascade (like font-size). Once you <div class="text-xs text-blue-500">
<div class="prose">
<p>This is styled with prose</p>
</div>
</div> So I believe that the best solution to this is to split it up into multiple blocks of prose classes. |
This worked for me with Tailwind 2.0, though I had to specify every breakpoint found in const disabledCss = {
"code::before": false,
"code::after": false,
"blockquote p:first-of-type::before": false,
"blockquote p:last-of-type::after": false,
pre: false,
code: false,
'pre code': false,
'code::before': false,
'code::after': false
}
module.exports = {
...
theme: {
extend: {
typography: {
DEFAULT: { css: disabledCss },
sm: { css: disabledCss },
lg: { css: disabledCss },
xl: { css: disabledCss },
'2xl': { css: disabledCss },
}
},
}
} |
This is my try to implement unprose tag, work for almost all the case i need it : (to see in action : |
You can also add the following code to
Change it to your liking. I wanted to remove margin in some cases. Just add |
Doesn't work in all cases. |
what if plugin generate classes like this.
|
One approach to solving this for MDX users would be to use a class or data attribute to indicate which elements should be styled with pose: Before: .prose ul > li {
position: relative;
padding-left: 1.75em;
} After: .prose ul[data-prose=\\"true\\"] > li[data-prose=\\"true\\"] {
position: relative;
padding-left: 1.75em;
} Then people can configure MDX with custom I have a branch for this: DylanVann@96a8f3f It would be possible to make the data attribute configurable, but that would be a breaking change. This technique does require that you have a way to add the data attribute to the elements you want styled with prose. The way I'm doing this with MDX is: const getComponentWithDataAttribute = (TagName: string) => {
const Comp = (props: any) => (
<TagName data-prose="true" {...props} />
)
Comp.displayName = `${TagName}Component`
return Comp
}
export const mdxComponents = {
p: getComponentWithDataAttribute('p'),
strong: getComponentWithDataAttribute('strong'),
a: getComponentWithDataAttribute('a'),
ul: getComponentWithDataAttribute('ul'),
ol: getComponentWithDataAttribute('ol'),
li: getComponentWithDataAttribute('li'),
h1: getComponentWithDataAttribute('h1'),
h2: getComponentWithDataAttribute('h2'),
// etc.
} |
Since I was struggling with this myself: with the new JIT-compiler there now is the possibility to use the !important modifier. So given the following unwanted overwrite by prose (it would overwrite the font-medium style with prose-presets)
you can now simply change "font-medium" to "!font-medium" and overwrite prose behaviour to achieve the desired outcome. |
Another option for the original problem is to try replacing the link selector with something more specific: so replacing
The idea of an unprose class will not work in my case as the client wants to have inline links and anchor tags in their articles and it would require some html on their part, which we all know will not end well. |
@adamwathan and whoever else, Now that complex selectors in Never use selectors like To allow a few more "layers" (so that embedded components can have their own .prose p:not(.no-prose *),
.no-prose .prose p:not(.no-prose .no-prose *),
.no-prose .prose .prose p (surely anything more is overkill?) I've put together a custom PostCSS 8 plugin that transforms all the relevant Typography selectors to the above syntax. I run it after the Once (root) {
// assuming default TW breakpoints; customize as needed, or grab programmatically if feasible
const proseRegExp = /^\.(?:(?:sm|md|lg|xl|\\32xl)\\:)?prose(?:-\S+)? .+/;
const noProseClass = '.no-prose';
root.walkRules(rule => {
if (!proseRegExp.test(rule.selector)) return;
rule.selectors = rule.selectors.flatMap(selector => {
if (!proseRegExp.test(selector)) return [selector];
const [main, _pseudoEl] = selector.split('::');
const pseudoEl = _pseudoEl ? `::${_pseudoEl}` : '';
return [
`${main}:not(${noProseClass} *)${pseudoEl}`,
`${noProseClass} ${main}:not(${noProseClass} ${noProseClass} *)${pseudoEl}`,
`${noProseClass} .prose ${selector}`
];
});
});
} To finish the job, I manually "undo" the inheritable top-level |
Thanks! Reopening so the solution is on our radar to explore 👍🏻 |
Originally posted by @neupauer here:
I played with this approach and so far I'm pretty impressed with what can be done with this solution: https://play.tailwindcss.com/dwWUdjHbF5?file=css Here's what the typography selectors look like: .prose :where(ul > li p):not(:where(.unprose *)) {
margin-top: 2.75em;
margin-bottom: 2.75em;
color: red;
}
.prose :where(ul > li > *:first-child):not(:where(.unprose *)) {
margin-top: 1.25em;
color: blue;
}
.prose :where(ul > li > *:last-child):not(:where(.unprose *)) {
margin-bottom: 1.25em;
color: green;
} The only remaining issue is the styles that are directly set on One solution could be to just not set any styles directly on |
I wonder if performance differs much between the two approaches. A point in favor of my complex-selectors-in- Regardless of implementation, this feature is a game-changer. Suddenly devs can allow CMS-users to embed just about any component they want into WYSIWYG fields without having to worry about styling conflicts. And I'd urge you to consider accommodating a couple of "layers," as my previous post demonstrates. That way it even becomes possible to embed components that have their own WYSIWYG fields (I'm sure I'm not the only developer who's faced this situation). The final touch is container queries to make components that are usually full-width work well in the narrower |
Would |
The reason for the
Multiple "layers" can be added with the following selector (I wish for a better solution): there's a pattern in it, so it can probably be a configurable option for how many layers you need to support .prose :where(ul > li p):not(:where(.unprose *:not(:where(.unprose .prose *:not(:where(.unprose .prose .unprose *)))))) {} ... btw I have no idea how and why it works 🤷😄, but here is a demo https://play.tailwindcss.com/xgL5FccdSy?file=css |
I do see the benefit of Lack of Safari 13 support is a big deal, though, and would probably prevent a lot of users from upgrading for a year or two. Honestly, even Safari 12 is still a consideration for many major projects; earlier this month I had to fix something for a client only because it was broken in Safari 12, and they'd received multiple complaints about it over the course of a week. Must be mostly folks on old devices who haven't upgraded to macOS 10.13 / iOS 13, but there's enough of them to matter. I'd argue that as long as the selector is set up to "skip over" the |
Yes I agree, the - .prose :where(ul > li p):not(.unprose *)
+ .prose ul > li p:not(.unprose *) also with layers As adamwathan mentions in #203, there might be an option to preserve the old behavior. For example, adding // tailwind.config.js
module.exports = {
+ important: "#app",
} |
Yes, I have a working demo here: https://codepen.io/newcitymike/pen/bGBzrGP |
@MichaelAllenWarner So it looks like the browser support for Do you have to support Samsung Internet in your projects? It's a popular Android browser. Just trying to figure out if we need separate options for enabling both |
I'm not obligated to support Samsung beyond the content actually displaying on the page. My hunch is that a lot of developers would be in the same boat (Safari support is crucial, Samsung not so much), but it's just a hunch. In any case, I already have a working |
Thank you, this will do perfectly. |
thanks it works using repo https://github.com/dimaslanjaka/hexo-webpack/tree/d10bb76801e81b57f6de26329f9481069dd202bf const typographyShared = {
css: {
// codeblock are handled with highlight.js
// disable tailwind typography for codeblocks
pre: false,
code: false,
'pre code': false,
'code::before': false,
'code::after': false
}
};
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{html,js,jsx,ts,tsx}',
'./public/**/*.html',
// tw-elements
// './node_modules/tw-elements-react/dist/js/**/*.js',
// flowbite
'./node_modules/flowbite/**/*.js',
'./node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'
],
theme: {
extend: {
typography: {
DEFAULT: typographyShared,
sm: typographyShared,
md: typographyShared,
lg: typographyShared,
xl: typographyShared,
'2xl': typographyShared
}
}
},
variants: {
extend: {}
},
darkMode: 'class',
// tw-elements
// plugins: [require('tw-elements-react/dist/plugin.cjs')]
// flowbite
plugins: [require('@tailwindcss/typography'), require('flowbite/plugin')]
}; |
adding |
I'm not sure I support your response: He's making an argument that utilities should always override plugins. You're essentially saying "No they shouldn't, because given how we've implemented it, css precedence makes that impossible." That doesn't seem to address his "should" argument. It begs the question of why you can't implement it so that it works as he suggesst. I can think of several ways off the top of my head: one is to put the plugin evals higher in the outputted css, or prefix them or something like that. (Of course you can disagree with his assertion, but just saying "that's now how it works, given how it's implemented" is sort of a non-answer, no?) |
I must say, I find the For example, I'd expect the
|
In a section of text, from Markdown (
.Content
in Hugo), I have a shortcode that is rendering a button. Prose is overriding the styling of the font styling and is underlining the text in the button. I can't seem to override this with TW classes on that element. If I disable prose on the higher-level container, then it works as expected, but then I lose all the nice styling for the rest of the content.I am suggesting a 'no-prose' class that can disable the application of prose styles to that element and all children of it.
The text was updated successfully, but these errors were encountered: