Adding tailwind typography plugin in Remix

Now that we added some markdown information to our Remix web site, we noticed the difficulty of the particular content material not rendering the headings.

It’s because Tailwind would not actually know what to render this as.
Thus, we will use the Tailwind Typography plugin to assist with this problem.



Putting in the Tailwind Typography plugin in Remix

The set up of this plugin is tremendous simple, as we merely have to put in the dependency with NPM:

npm set up -D @tailwindcss/typography
Enter fullscreen mode

Exit fullscreen mode

As soon as that is executed, we have to register it in our tailwind config file. This file is positioned on the root of our undertaking named: tailwind.config.js.

Inside this file add the plugin:

module.exports = {
  content material: ['./app/**/*.{ts,tsx,jsx,js}'],
  theme: {
    lengthen: {},
  },
  plugins: [require('@tailwindcss/typography')],
};
Enter fullscreen mode

Exit fullscreen mode

We are able to add the prose class to any ingredient we need to use this plugin on.

In our case, let’s add it to our root file so we will use it for our markdown information.

export default perform App() {
  return (
    <html lang='en' className='h-full'>
      ...
      <physique className='h-full p-4 prose'>
        <Outlet />
        ...
      </physique>
    </html>
  );
}
Enter fullscreen mode

Exit fullscreen mode

Observe the prose class on the physique. That is what’s going to make it lively.
If we now run our web site and think about a markdown rendered put up, we see it in motion.

You may also discover the finished code on GitHub.



Thanks for studying, and let’s join!

Thanks for studying my weblog. Be at liberty to subscribe to my e-mail e-newsletter and join on Facebook or Twitter



Add a Comment

Your email address will not be published. Required fields are marked *