How do I modify the default styling of the Typography prose class in TailwindCSS?

user_1330456 0
Viewed 6580

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?

tailwind-css
2 Answers

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: {
           ....
        },
      },
    },
  },
}

Also worse to mention, if you change something in "other" breakpoints than just prose, for ex, 'prose-sm', 'prose-md', etc, changes does not inherits, so if you will change 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 :)

user_143050760

vue 3

For people wanting to customize their own Typography including font size and name for all breakpoints

tailwind config

inside tailwind.config.js in extend

extend: {
      fontSize: {
        'exampleFont': '36px',
      },

In your main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @screen md {
      .text-exampleFont {
        font-size: 48px;
      }
    }
    @screen lg {
      .text-exampleFont {
        font-size: 60px;
      }
    }
  }
}

yourComponent.vue

<div class="text-exampleFont">hello</div>
user_122375050
Related