npm package: @geoffcodesthings/tailwind-md-base
Description: A slightly opinionated collection of base markdown styles for Tailwind CSS.
Author: Geoff Selby
Latest version: 1.1.0

# Tailwind Markdown Base

**Tailwind Markdown Base** is a simple plugin that adds base styling for elements generated by markdown or a wysiwyg from a cms.

## Getting Started

### Installation

```sh
# Install with NPM
npm install --save @geoffcodesthings/tailwind-md-base

# Or use Yarn
yarn add @geoffcodesthings/tailwind-md-base
```

### Usage

```js
// tailwind.config.js
const tailwindMdBase = require('@geoffcodesthings/tailwind-md-base');

module.exports = {
  theme: {
    ...
  },
  plugins: [tailwindMdBase()],
};
```

## Configuration

### Wrapper Class

By default, Tailwind Markdown Base wraps its generated styles in a `.markdown` class. This, of course, is configurable in `tailwind.config.js`:

```js
// tailwind.config.js
const tailwindMdBase = require('@geoffcodesthings/tailwind-md-base');

module.exports = {
  theme: {
    markdownBase: {
      wrapperClass: 'content',
    },
  },
  plugins: [tailwindMdBase()],
};
```

> The example above would wrap the styles generated by the plugin with `.content` instead of the default `.markdown`.

### Default Config

With the exception of `wrapperClass`, the default config is simply **CSS-in-JS** syntax. This allows you to customize the styles as much as you need in a standardized manner.

```js
const defaultTheme = require('tailwindcss/resolveConfig')(
  require('tailwindcss/defaultConfig'),
).theme;

module.exports = {
  wrapperClass: 'markdown',

  h1: {
    fontSize: defaultTheme.fontSize['4xl'],
    fontWeight: defaultTheme.fontWeight.bold,
    marginTop: 0,
    marginBottom: defaultTheme.spacing[2],
  },

  h2: {
    fontSize: defaultTheme.fontSize['3xl'],
    fontWeight: defaultTheme.fontWeight.bold,
    marginTop: 0,
    marginBottom: defaultTheme.spacing[2],
  },

  h3: {
    fontSize: defaultTheme.fontSize['2xl'],
    fontWeight: defaultTheme.fontWeight.bold,
    marginTop: 0,
    marginBottom: defaultTheme.spacing[2],
  },

  h4: {
    fontSize: defaultTheme.fontSize.xl,
    fontWeight: defaultTheme.fontWeight.bold,
    marginTop: 0,
    marginBottom: defaultTheme.spacing[2],
  },

  h5: {
    fontSize: defaultTheme.fontSize.lg,
    fontWeight: defaultTheme.fontWeight.bold,
    marginTop: 0,
    marginBottom: defaultTheme.spacing[2],
  },

  h6: {
    fontSize: defaultTheme.fontSize.base,
    fontWeight: defaultTheme.fontWeight.bold,
    marginTop: 0,
    marginBottom: defaultTheme.spacing[2],
  },

  p: {
    marginTop: 0,
    marginBottom: defaultTheme.spacing[4],
  },

  a: {
    color: defaultTheme.colors.blue[500],
    textDecoration: 'none',
    '&:hover': {
      color: defaultTheme.colors.blue[600],
      textDecoration: 'none',
    },
  },

  blockquote: {
    borderColor: defaultTheme.colors.gray[300],
    borderLeftWidth: defaultTheme.borderWidth[4],
    fontWeight: defaultTheme.fontWeight.normal,
    fontStyle: 'italic',
    marginTop: defaultTheme.spacing[8],
    marginBottom: defaultTheme.spacing[8],
    paddingLeft: defaultTheme.spacing[6],
    color: defaultTheme.colors.gray[800],
    fontSize: defaultTheme.fontSize.lg,
  },

  code: {
    backgroundColor: defaultTheme.colors.gray[300],
    paddingLeft: defaultTheme.spacing[2],
    paddingRight: defaultTheme.spacing[2],
    paddingTop: defaultTheme.spacing.px,
    paddingBottom: defaultTheme.spacing.px,
    borderRadius: defaultTheme.borderRadius.default,
    fontSize: defaultTheme.fontSize.sm,
  },

  hr: {
    borderBottomWidth: defaultTheme.borderWidth.default,
    borderColor: defaultTheme.colors.gray[300],
    marginTop: defaultTheme.spacing[12],
    marginBottom: defaultTheme.spacing[12],
    borderRadius: defaultTheme.borderRadius.full,
  },

  ul: {
    listStyleType: defaultTheme.listStyleType.disc,
    listStylePosition: 'inside',
    marginTop: defaultTheme.spacing[4],
    marginBottom: defaultTheme.spacing[4],
  },

  ol: {
    listStyleType: defaultTheme.listStyleType.decimal,
    listStylePosition: 'inside',
    marginTop: defaultTheme.spacing[4],
    marginBottom: defaultTheme.spacing[4],
  },

  table: {
    width: '100%',
    color: defaultTheme.colors.gray[900],
    marginBottom: '1rem',
    padding: 0,
    borderCollapse: 'collapse',
    tr: {
      borderTopWidth: defaultTheme.borderWidth.default,
      borderColor: defaultTheme.colors.gray[700],
      backgroundColor: defaultTheme.colors.white,
      margin: 0,
      padding: 0,
      '&:nth-child(2n)': {
        backgroundColor: defaultTheme.colors.gray[100],
      },
      th: {
        fontWeight: defaultTheme.fontWeight.bold,
        borderWidth: defaultTheme.borderWidth.default,
        borderColor: defaultTheme.colors.gray[700],
        textAlign: 'left',
        margin: 0,
        padding: '6px 13px',
        '&:first-child': {
          marginTop: 0,
        },
        '&:last-child': {
          marginBottom: 0,
        },
      },
      td: {
        borderWidth: defaultTheme.borderWidth.default,
        borderColor: defaultTheme.colors.gray[700],
        textAlign: 'left',
        margin: 0,
        padding: '6px 13px',
        '&:first-child': {
          marginTop: 0,
        },
        '&:last-child': {
          marginBottom: 0,
        },
      },
    },
  },
};
```

### Additional Styles

We currently only have default styles for the the most common elements generated by markdown. However, because of the CSS-in-JS syntax, you may add styling for any element in you config.

For example, if you want to style `img` elements within the `.markdown` namespace, you can do so like this:

```js
// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
const tailwindMdBase = require('@geoffcodesthings/tailwind-md-base');

module.exports = {
  theme: {
    markdownBase: {
      img: {
        maxWidth: '100%',
        borderWidth: defaultTheme.borderWidth.default,
        borderColor: defaultTheme.colors.gray[600],
      },
    },
  },
  plugins: [tailwindMdBase()],
};
```

The above example would add the following to the generated CSS:

```css
.markdown > img {
  max-width: 100%;
  border-width: 1px;
  border-color: #718096;
}
```

## Contributing

There is plenty of room for improvement (support for more base styles, other enhancements, .etc). Contributions are welcome. If you have an idea for improvement, please submit an issue with a feature proposal first for discussion. Bug fixes can be PR'd directly. Be sure to write tests for any new features and make sure all tests pass before submitting any PR.