Configure Tailwind CSS for a Next.js App

In this article, we’ll build on what we started in Bootstrap a Next.js Blog. We’ll get the TailwindCSS integrated into our project, add a bit of styling to verify everything works, and cleanup unnecessary CSS that came with the default project setup.

Install Dependencies

We’ll start by installing tailwindcss, postcss, and autoprefixer as dev dependencies.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Configure Tailwind

With those dependencies installed, let’s initialize Tailwind by running Tailwind’s init command with npx. Passing the -p flag will initialize tailwind along with a postcss config.

npx tailwindcss init -p

You should see a confirmation like the following

Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js

Our default tailwind.config.js will look like this

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

In order to properly build our CSS to include only the necessary classes based on what we’ve used in our code, we’ll need to add some entries to the content array.

We want to account for pages in the file based routing setup, any components we build, which we’ll put in the components directory, and since we’ll be supporting MDX, we want to check the content files for any ad-hoc styling we might apply in our MDX.

module.exports = {
- content: [],
+ content: [
+   './pages/**/*.{js,ts,jsx,tsx}',
+   './components/**/*.{js,ts,jsx,tsx}',
+   './content/**/*.md',
+ ],
  theme: {
    extend: {},
  },
  plugins: [],
}

With our config in place, let’s update the pages/_app.tsx file to pull in the css from tailwind. We won’t be using the supplied global.css file, so we can remove that import and add we’ll add an import from tailwind.css from the tailwindcss package.

-import '../styles/globals.css'
+import 'tailwindcss/tailwind.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

With this step done, we can run the app with npm run dev and verify that the preflight css reset that tailwind brings with it is being applied. Our “My Awesome Blog” h1 element shouldn’t be large and bold anymore.

To verify that tailwindcss styles work, let’s update the h1 in pages/index.tsx with the following styles.

export default function Home() {
  return (
    <div>
      <h1 className="text-sky-700 text-4xl font-black p-3">My Awesome Blog</h1>
    </div>
  )
}

The page should now reflect our styles from TailwindCSS.

Cleanup Unused CSS

We’ll rely on Tailwind for all our styling, so we won’t need the files that were generated when we bootstrapped our Next.js app.

We can get rid of these by deleting the whole styles folder at the project root.

Conclusion

With Tailwind installed and configured, we’re ready to style elements as we go, using utility classes, rather than creating and managing a bunch of our own bespoke classes.

If you haven’t used Tailwind before and you’re looking at all those classnames in the h1 example above and thinking “I don’t like this!”, my advice would be to give it a fair shot. I can honestly say I’ve never been as productive in styling apps as I am with Tailwind. The utility class names are well thought out and once you start using it, it’s fairly intuitive. I frequently find myself guessing at a class before looking to the docs and I’m right more often than not because the system just makes sense.