gregsullivan/_tw

Problems understanding how to customise the .prose styles

Closed this issue · 2 comments

Hi, thanks for all your work on this @gregsullivan, it's very well done. I'm embarking on my first project using TW/WP for a while, and I'm struggling to get my brain around how some of the parts are generated. Currently the issue I stumped on is how I might customise some of the styles that are generated for .prose . For example, in styles.css I see:

.prose :where(a):not(:where([class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

The design I'm working to doesn't need/want underlines on links, there are other styles to make them obvious.
Can you tell me where text-decoration: underline is being added? The only customisation I've been able to find is the colour (--tw-prose-links). Any help appreciated!

...ok almost as soon as I sent that, I realised I'd misunderstood – or rather not properly read – one of your code comments in tailwind-typography.config.js:

/**
 * Tailwind Typography’s default styles are opinionated, and
 * you may need to override them if you have mockups to
 * replicate. You can view the default modifiers here:
 *
 * https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js
*/

I see now that the linked file is defining all the prose stuff I've been looking for, when it's imported.

Ok so to answer my own question and for anyone else searching:

Adding the following to css blocking's tailwind-typography.config.js (underneath all the '--tw-prose-*' declarations) disables underlining of prose links, and also adds a hover underline state:

a: {
	textDecoration: 'none',
	fontWeight: '400',
},

'a:hover': {
	textDecoration: 'underline',
}

I think this has answered about 75 other questions I had all in one go! Sorry to have wasted your time reading this Greg. 😅

Hello—Thanks for posting your question! I'm happy to see you were able to sort it out.

I just wanted to flag that I definitely recognize integrating Tailwind Typography is something that could use further documentation, and it's one of my priorities here:

#39

Also, in the next few weeks I'll be releasing an updated version of _tw that once again supports Typography's modifier classes, which will also simplify some of these types of changes.

Thanks again!