Using Tailwind UI and Next.js Together

This process has gotten much easier with the release of TailwindCSS 2.0. These instructions have been updated to reflect the installation process for TailwindCSS 2.0 and Next.js 10.

Next.js is an incredible framework for building server-side React applications. Tailwind CSS is a utility-first CSS framework that makes designing and building websites a breeze. And Tailwind UI is a commercial set of pre-baked components made in Tailwind CSS by two incredible designers, Adam Wathan and Steve Schoger. Using these tools together, I can develop whole web applications that look beautiful, from scratch, in record time.

To figure out the right way to set them up together, I pulled the relevant pieces of documentation from each of Next.js, Tailwind CSS and Tailwind UI and synthesized them into this guide. I reference and link to those parts of documentation where appropriate.

Set up Next.js with Tailwind CSS in development
Add Tailwind UI
Optimize for production with PurgeCSS

1. Set Up Next.js and Tailwind CSS in Development

The Next.js-specific TailwindCSS installation instructions do an excellent job of getting you setup with both of these in a project. Complete the steps there and come back here when you're done.

Confirm it works by running npm run dev and navigating in your browser to localhost:3000, where you should see a page that looks something like this:

Edit pages/index.js to use some Tailwind CSS classes to make sure its working:

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

export default function Home() {
  return (
    <div>
      <Head>
        <title>Next.js TailwindCSS</title>
        <link rel="icon" href="/favicon.ico"/>
      </Head>

      <div className="container mx-auto">
        <h1 className="text-lg text-center m-4">TailwindUI/Next.js</h1>
        <p className="bg-green-600">This is a test of the tailwind next integration.</p>
      </div>
    </div>
  )
}

If Next.js has put a Home.module.css file in the styles/ directory, you should delete that since that file just has the styling for the Next.js example page and should not be used anymore.

If it doesn't look like it working, you may need to stop the Next.js dev server and restart it because it may not pick up the changes to the postcss.config.js file unless you do a manual restart.

If you're still stuck, Next.js publishes an example app with Tailwind CSS so you can see how your matches up.

One thing that may have noticed that may throw you off is that since this process creates a postcss.config.js file, it completely overwrites the implicit defaults used by Next.js. On first glance, the defaults have a lot of stuff in it like postcss-flexbox-fixes and postcss-preset-env along with some configuration that we seem to have ignored. This is intentional.

Since by and large you won't be using CSS directly but will be using Tailwind CSS utility classes, you don't need that stuff and can just use the minimal postcss.config.js config from above.

2. Add Tailwind UI

The newest version of TailwindCSS and TailwindUI doesn't specifically require you to install TailwindUI-specific packages until you encounter that requirement by a particular TailwindUI component. For example, if you encounter a component that requires the @tailwindcss/forms plugin, you'll need to install it in your project with a npm install --save @tailwindcss/forms before you can use it.

There are some general and React-specific tips and tricks in the TailwindUI documentation.

If things don't seem to be working and you've installed a new package or updated your tailwind.config.js file, you may need to stop and restart the Next.js dev server for it to pick up the changes.

If you are going to use the recommended Inter var font recommended by the TailwindUI documentation, you'll need to put the <link> tag that it suggests in the index.js file <Head> tag:

...
<Head>
  <title>Next.js TailwindCSS</title>
  <link rel="icon" href="/favicon.ico" />
  <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
</Head>
...

To test that Tailwind UI is working properly, in pages/index.js, copy and paste in an element that does not have any Javascript (e.g., the Marketing Blog Section component).

You may need find-and-replace the class attribute to className if your IDE doesn't do this for your automatically.

That's it! Integrating TailwindUI with Next.js has gotten much simpler since TailwindCSS 2.0 arrived on the scene.

1. Set Up Next.js and Tailwind CSS in Development

2. Add Tailwind UI

The Founder Success Path