# Typography Third party

The typography pluginopen in new window adds some usefule typography utilities and generates text styles components.

See the plugin's documentationopen in new window for more detailed informations.

# Default configuration

The plugin is used with the following custom configuration:

require('tailwindcss-typography')({
  // Text styles component classes will be prefixed by `.type-...`
  componentPrefix: 'type-',
});
1
2
3
4

# Usage

When using the @studiometa/tailwind-configopen in new window package as a base for your Tailwind CSS configuration, you will be able to define text styles component via the textStyles property provided by this typography plugin.

module.exports = {
  theme: {
    textStyles: (theme) => ({
      heading: {
        // The `output: false` property will prevent generatin a `.type-heading`
        // class but its configuration can still be extended by others
        output: false,
        fontWeight: theme('fontWeight.bold'),
        lineHeight: theme('lineHeight.tight'),
      },
      // Will generate a `.type-title` class
      title: {
        extends: 'heading',
        fontSize: theme('fontSize.xl'),
        '@screen m': {
          fontSize: theme('fontSize.xxl'),
        },
      },
    }),
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

TIP

All the text styles component classes will be prefixed by .type-..., as defined in the above configuration.

Last Updated: 6/14/2021, 5:09:02 PM