I have a TailwindCSS 2.0 project and I've installed all the plugins, including the Typography plugin. When I create a div class="prose", I can put any headings, paragraphs, lists, etc into it and it gets styled by the Typography plugin.
In my project, I want all the within the prose class to be a certain blue, by default. And I also want the links to be a certain link colour that I've defined in my config. These are just a couple of modifications that I want to make so that the default prose class styles everything with my styles. How do I go about that and what is the best practice for it?
Typography plugin can be extended
tailwind.config.js
module.exports = {
theme: {
typography: {
DEFAULT: { // this is for prose class
css: {
color: theme('colors.yourSpecificColor'), // change global color scheme
p: {
fontSize: '14px', // key can be in camelCase...
'text-align': 'center', // or as it is in css (but in quotes).
},
a: {
// change anchor color and on hover
color: '#03989E',
'&:hover': { // could be any. It's like extending css selector
color: '#F7941E',
},
},
ul: {
'> li': {
'&::before': { // more complex example - add before to an li element.
content: '',
....,
},
},
},
},
},
sm: { // and this is for prose-sm.
css: {
....
},
},
},
},
}
It's also worth mentioning that if you change something in "other" breakpoints than just prose, for example, 'prose-sm', 'prose-md', etc., changes do not inherit, so if you change the color to blue in prose
, it will not change in prose-sm
.
Customization can be found here
P.S. In example bellow I could messed up with amount of curly brackets, sorry, to hard to track :)