How to use Torchlight.dev with tailwindcss typography plugin

Published at Sep 25, 2023

When using Torchlight with Tailwindcss, the documentation is giving you all the utility classes you need to apply. But if you use the typography plugin, you will have pre styled with a weird padding background before the torchlight part. Here is your fix.

One way to fix it

First, apply prose as you wish on your content, and tell prose to not mess with <pre> with torchlight style using prose-pre: modifier like this:

Copied!
<div class="content prose prose-pre:my-4 prose-pre:p-0"></div>

Then from the recommanded styling of torchlight, remove the part applying style to <pre>

Copied!
.content {
  pre { 
      @apply my-4 rounded overflow-x-auto; 
  } 
 
  pre code.torchlight {
      @apply block py-4 min-w-max;
  }
 
  pre code.torchlight .line {
      @apply px-4;
  }
 
  pre code.torchlight .line-number,
  pre code.torchlight .summary-caret {
      @apply mr-4;
  }
}

Another way

If you prefere, another way to fix this problem is to configure the typography plugin directly in tailwind.config.js. That's the path I decided to take for this blog.

Copied!
module.exports = {
    theme: {
        extend: {
            typography: (theme) => ({
                DEFAULT: {
                    css: {
                        pre: false,
                    },
                },
                lg: {
                    css: {
                        pre: false,
                    }
                }
              // ... same if you use sm, xl or 2xl
            }),
        }
    },
    plugins: [
        require('@tailwindcss/typography'),
    ],
}
#short #tailwindcss #torchlight.dev #css

Syntax highlighting provided by torchlight.dev