How to Use Tailwind Typography with NuxtJS

NuxtJS is a modern web development platform that makes it easy to build fast, statically generated websites and applications. With TailwindCSS (& @tailwindcss/typography) you can build beautiful blogs in minutes.

The following guide shows you how to install TailwindCSS and @tailwindcss/typography in three different situations:

1. If you're creating a new NuxtJS project from scratch

If you're starting from scratch, installing TailwindCSS and @tailwindcss/typography is a breeze. First, make sure you have the latest version of NodeJS installed. You can get it on their website at this link.

Then, open up your favorite IDE terminal window, navigate to the root of wherever you'd like to create your project, and type the following:

npx create-nuxt-app

This will begin the execution of the create-nuxt-app program, a simple boilerplate app that lets you set up your NuxtJS environment in just a few moments.

You'll be asked a few questions to confirm your app settings. Since I'm a web developer and most often make statically generated websites for my clients, my setup usually looks like this:

Project name: yourprojectname
Programming language: JavaScript 
Package manager: Npm
UI framework: Tailwind CSS
Nuxt.js modules: Progressive Web App (PWA)
Linting tools: None
Testing framework: None
Rendering mode: Universal (SSR / SSG)
Deployment target: Static (Static/JAMStack hosting)
Development tools:
What is your GitHub username? yourgithubusername
Version control system: Git

Don't worry too much if you don't choose the perfect settings for your project. You can always change them later.

TailwindCSS will be installed for you by default since you selected it during the setup, so all we have to do is add @tailwindcss/typography . Go back to your terminal and type:

npm install @tailwindcss/typography

Congratulations! You've now installed the typography package! All we have to do is add a few configuration settings to our code, and voila - we'll be good to go!

At this point, you probably have a folder structure that looks something like this:

> assets
> components
> layouts
> middleware
> node_modules
> pages
> plugins 
> static
> store
.editorconfig
.gitignore
nuxt.config.js
package-lock.json
package.json
README.md

From here, open your nuxt.config.js file. Since TailwindCSS and @tailwindcss/typography are already installed, all you have to do is add an import statement at the top of your file, plus a short configuration object to the end of your export default object.

Let's do the import statement first. Add this to the very top of your file:

import tailwindTypography from '@tailwindcss/typography';

Once that's done, go to the end of your file (right before the final closing curly braces) and add the following to your nuxt.config.js :

  tailwindcss: {
      config: {
          plugins: [tailwindTypography],
      }
  },

To recap, your nuxt.config.js file should now look like this (barring any other plugins you may have decided to download or install):

import tailwindTypography from '@tailwindcss/typography'

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'mywebsitename',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  tailwindcss: {
      config: {
          plugins: [tailwindTypography],
      }
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
  ],

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {
      lang: 'en'
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
  
}

Great work! Now when you run your file, you'll have @tailwindcss/typography installed and ready to go. To use it in a project, all you need to do is add a prose class to the parent div.

If you want to change the size and width of your carefully-tuned text, you can also add some additional classes like prose-sm , prose-md , prose-lg , prose-xl , and so on. To change the colors of your link (and give your text a 'theme' color), you can add classes like prose-indigo and prose-blue .

Here's a short example showing prose , prose-md , and prose-blue classes:

<div class="w-full p-8 prose prose-lg border-2 border-blue-500 prose-blue">
    <h2>Isn't this beautiful?</h2>
    <h3>100% TailwindCSS & @tailwind/typography, baby</h3>
    <p>Here's a bunch of filler text that I wrote to 
    show you the potential of @tailwindcss/typography. 
    This text is beautifully spaced and easy on the 
    eyes thanks to <a href="http://nuxtjs.org/">NuxtJS
    </a>, TailwindCSS, and Tailwind Typography.</p>
</div>

And here's what it looks like when all is said and done:

Isn't this beautiful?

100% TailwindCSS & @tailwind/typography, baby

Here's a bunch of filler text that I wrote to show you the potential of @tailwindcss/typography. This text is beautifully spaced and easy on the eyes thanks to NuxtJS' built-in support and easy installation of the required packages.

2. If you already have a NuxtJS project with TailwindCSS installed

If you've already got a project spun up and ready to go, then installing @tailwindcss/typography is easy.

Simply open up your NuxtJS project in your favorite IDE. I like Microsoft's Visual Studio Code, but it's up to you what you choose to use.

Navigate to the root of your NuxtJS project, open up a terminal instance, and type:

npm install @tailwindcss/typography

Then, look for your nuxt.config.js file. Add the following two snippets.

First this goes at the very top of your file (before the export default object):

import tailwindTypography from '@tailwindcss/typography'

export default {
  ...

And second, this goes at the very bottom of your file (before the final closing curly bracket):

  ...

  tailwindcss: {
    config: {
      plugins: [tailwindTypography],
    }
  },
}

If you're unsure of whether you did it properly, you can cross-reference your file with this sample.

Then, wait for NuxtJS to compile and build your project, and then you're good to go!

Here's a short example showing prose , prose-md , and prose-red classes:

<div class="w-full p-8 prose prose-lg border-2 border-red-500 prose-red">
    <h2>Isn't this beautiful?</h2>
    <h3>100% TailwindCSS & @tailwind/typography, baby</h3>
    <p>Here's a bunch of filler text that I wrote to 
    show you the potential of @tailwindcss/typography. 
    This text is beautifully spaced and easy on the 
    eyes thanks to <a href="http://nuxtjs.org/">NuxtJS
    </a>, TailwindCSS, and Tailwind Typography.</p>
</div>

And here's what the above code looks like when rendered in a browser:

Isn't this beautiful?

100% TailwindCSS & @tailwind/typography, baby

3. If you already have a NuxtJS project, but don't have TailwindCSS installed

Lastly, if you already have a NuxtJS project, but you don't have TailwindCSS or the @tailwindcss/typography plugin installed, here's what you need to do.

First, open a new terminal window and type the following:

npm install -D @nuxtjs/tailwindcss tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

This installs TailwindCSS and all required dependencies.

From there, you need to install @tailwindcss/typography. For that, you simply type:

npm install @tailwindcss/typography

Then, look for your nuxt.config.js file. Add the following two snippets.

First this goes at the very top of your file (before the export default object):

import tailwindTypography from '@tailwindcss/typography'

export default {
  ...

And second, this goes at the very bottom of your file (before the final closing curly bracket):

  ...

  tailwindcss: {
    config: {
      plugins: [tailwindTypography],
    }
  },
}

If you're unsure of whether you did it properly, you can cross-reference your file with this sample.

And then you're done! After NuxtJS compiles and builds your project, head over to any page and add the required prose classes to see @tailwindcss/typography in action.

Not sure what those are?

Here's a short example showing prose , prose-md , and prose-indigo in action:

<div class="w-full p-8 prose prose-lg border-2 border-indigo-500 prose-indigo">
    <h2>Isn't this beautiful?</h2>
    <h3>100% TailwindCSS & @tailwind/typography, baby</h3>
    <p>Here's a bunch of filler text that I wrote to 
    show you the potential of @tailwindcss/typography. 
    This text is beautifully spaced and easy on the 
    eyes thanks to <a href="http://nuxtjs.org/">NuxtJS
    </a>, TailwindCSS, and Tailwind Typography.</p>
</div>

And here's what the above code looks like when rendered in a browser:

Isn't this beautiful?

100% TailwindCSS & @tailwind/typography, baby

I sincerely hope you enjoyed this short guide on how to install TailwindCSS & @tailwindcss/typography on NuxtJS!