Apply Breakpoint on Tailwind Typography theme section?

[deadcoder0904]

I have a table which I want to be 75% wide on devices greater than md breakpoint & 90% wide on devices smaller than md breakpoint.

tailwind.config.js

const fullBleed = {
  width: '100%',
  gridColumn: '1 / -1',
}

const halfBleed = {
  ...fullBleed,
  width: '75%',
  marginLeft: 'auto',
  marginRight: 'auto',
}

module.exports = {
  theme: {
    extend: {
      typography: (theme) => ({
        DEFAULT: {
          css: {
            table: {
              ...halfBleed,
              marginBottom: theme('spacing.16'),
              fontSize: theme('fontSize.sm')[0],
              lineHeight: theme('fontSize.sm')[1].lineHeight,
              tableLayout: theme('tableLayout.fixed'),
            },
          },
        },
        md: {
          css: {
            table: {
              width: '90%',
            },
          },
        },
      }),
    },
    variants: {},
    plugins: [require('@tailwindcss/typography')],
  },
}

How do I achieve that?

[simonswiss]

Hey!

Using the md key will not apply responsive styles, but rather apply different styles when using the prose-md class.

For example:

<div class="prose">
  <table>...</table>
</div>

The table width will be 75%, but...

<div class="prose prose-md">
  <table>...</table>
</div>

The table will be 90% wide.

Instead of doing this, you want to use a media query in your DEFAULT.css.table object to apply responsive styles by default:

typography: (theme) => ({
  DEFAULT: {
    css: {
      table: {
        ...halfBleed,
        background: 'red',
        marginBottom: theme('spacing.16'),
        fontSize: theme('fontSize.sm')[0],
        lineHeight: theme('fontSize.sm')[1].lineHeight,
        tableLayout: theme('tableLayout.fixed'),
+        '@media (min-width: 768px)': {   
+          width: '90%'
+        },
      },
    },
  },
}),

You can probably interpolate theme('screens.md') in your media query instead of the hardcoded 768px too.

Hope it helps 👍

[deadcoder0904]

Thanks, that worked:

const fullBleed = {
  width: '100%',
  gridColumn: '1 / -1',
}

const almostFullBleed = {
  ...fullBleed,
  width: '90%',
}

module.exports = {
  extend: {
    typography: (theme) => ({
      DEFAULT: {
        css: {
          table: {
            ...almostFullBleed,
            marginLeft: 'auto',
            marginRight: 'auto',
            marginBottom: theme('spacing.16'),
            fontSize: theme('fontSize.sm')[0],
            lineHeight: theme('fontSize.sm')[1].lineHeight,
            tableLayout: theme('tableLayout.fixed'),
            '@media (min-width: theme("screens.md"))': {
              width: '75%',
            },
          },
        },
      },
    }),
  },
  plugins: [require('@tailwindcss/typography')],
}