Tailwind CSS With Next JS and Typography

Updated on -

Using the Tailwind CSS framework with Next.js means getting rid of CSS modules, Styled Components, and writing Vanilla CSS code by calling HTML element classes in CSS, etc.

Also in Next.js production mode, you only get the CSS code your page needs and no more unused CSS from hundreds of CSS styles.

Just to clear up any confusion, This method also works with Typescript and If you get stuck following the instructions or looking at the source code is enough for you to implement Tailwind CSS in Next.js, visit the GitHub repository.

Getting Started

First, you need to create a project with create-next-app.

Run the npm or yarn command from below. It will ask you to type your project name. Name anything you want and hit enter.

npx create-next-app
# or
yarn create next-app

Try running yarn dev or npm run dev command to check if your project was created successfully.

Now, delete the CSS import from /pages/_app.js and CSS files from styles folder and also replace the /pages/index.js file with the code below.

// index.js
import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Tailwind CSS with Next.js</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h1>Creating a project with Tailwind CSS, NextJS & Typography</h1>
    </div>
  )
}

Installing Tailwind CSS in Next.js with PurgeCSS & PostCSS

We are going to install Tailwind CSS npm packages in devDependencies. Because in production mode there will be only the CSS code we will use from Tailwind, not the whole Tailwind CSS file which will make our web app load slower.

Now, let me explain why use other packages.

Why should you use PurgeCSS with Tailwind CSS?

Based on docs, the uncompressed size of Tailwind CSS is 1680.1K and the compressed size is 133.3K.

This will make our web application heavy and we also don't want to import the unused CSS code on our website. That is the reason most people PurgeCSS.

PurgeCSS removes the unused CSS code from Tailwind at production build time.

So, whenever we will run npm run build it will keep only the CSS code we used from Tailwind.

It won't run at development mode so that we can apply Tailwind CSS classes in our browser developer tools.

Why should you use PostCSS Preset Env with Tailwind CSS?

PostCSS Preset Env convert our modern CSS with polyfills for old browsers support.

It's not the fault of Tailwind, It's just we don't use the old CSS code anymore like using flexbox not clearfix.

You can check out their GitHub docs for more information and options.

Let's add the npm packages, run:

npm install --save-dev tailwindcss postcss-preset-env
# or
yarn add -D tailwindcss postcss-preset-env

We also need to configure Tailwind to use PurgeCSS and add new features.

Run the next command. It will create a config file(tailwind.config.js) in your project folder.

npx tailwindcss init

Next, create a file called postcss.config.js in your project folder and paste the code from below.

// postcss.config.js
module.exports = {
  plugins: ["tailwindcss", "postcss-preset-env"],
};

I am going with the default setting, You can read the GitHub docs to change the default options.

Now, open the tailwind.config.js file and add the PurgeCSS configuration like below.

// tailwind.config.js
module.exports = {
  purge: ["./components/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}"],

  theme: { extend: {} },
  variants: {},

  plugins: [],
};

Then, go to the styles folder and create a CSS style sheet called styles.css and paste the code from below.

/* /styles/styles.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Next, open the pages/_app.js file and import the styles.css file which will be the global CSS of your Next.js web application.

// /pages/_app.js
import "../styles/styles.css";

That's it. You have implemented the Tailwind CSS framework in your Next.js application.

Let's add a button in pages/index.js to check if it's working.

import Head from "next/head";

export default function Home() {
  return (
    <div>
      ...
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
        Button
      </button>
    </div>
  );
}

Tailwind with Next JS

Yep, it's working.

I assume you already noticed that heading styles are gone. Because all headings, Lists are unstyled by default in Tailwind.

You have to manually style the headings, lists, pre, blockquote elements like the code below or you can add a responsive and customizable typography plugin in Tailwind or you can disable Preflight to bring the default HTML style back.

/* /styles/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* custom styles */
h1 {
  @apply text-2xl;
}
h2 {
  @apply text-xl;
}
h3 {
  @apply text-lg;
}
a {
  @apply text-blue-600 underline;
}

How to add typography in Tailwind CSS

It's easy. Just like styling a <div> element with a className.

First, let's install the Tailwind CSS plugin from the terminal.

# Using npm
npm install --save-dev @tailwindcss/typography

# Using Yarn
yarn add -D @tailwindcss/typography

Next, Open the tailwind.config.js and add the plugin like below.

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [require("@tailwindcss/typography")],
};

Then open index.js and add the prose max-w-none class in the parent div element.

Add some headings, lists, blockquote, etc. HTML tags in index.js to test if the typography plugin is working or not like the screenshot below.

typography with tailwindcss and nextjs

prose class added the beautiful typography style and the max-w-none class override the default max-width of the typography plugin.

You can also modify the default styles and make typography more responsive with this plugin.

Try running yarn build or npm run build then run yarn start or npm run start to run your application.

Open the developer tools in your browser and go to Network tab and refresh the page. Click on CSS stylesheets type to filter only CSS files from the list.

You will see a very low sized CSS is generated like the screenshot below.

purgecss with tailwind

Now, If you getting warning on your terminal like risk - There are upcoming breaking changes: removeDeprecatedGapUtilities, purgeLayersByDefault or defaultLineHeights, standardFontWeights, You should check out the Upcoming Changes tailwind documentation to update the tailwind.config.js file or check out the tailwind.config.js file from the github repository.

Conclusion

Tailwind CSS is more flexible and simple than bootstrap and other CSS frameworks. The combination of Tailwind CSS and React JS is awesome.

If you use Tailwind CSS as your primary framework I suggest you install Tailwind CSS Intellisense Plugin in vs code. This was helpful for me not to look at the docs every time. You just press Ctrl+space and it will show you every snippet with original CSS code.

By using our website you agree to our Cookie Policy.