Adding Tailwind to a NextJS Typescript Project

In this post, we will continue where we left off and add TailwindCSS to our boilerplate NextJS project. Tailwind is my favorite UI library, as it doesn’t make customizing your theme difficult, while also providing tons of time saving utilities and even pre-made components (& full pages!) with TailwindUI.

If you haven’t checked out the boilerplate from the last article, you can find it in the main branch of this repo. If you want to follow along, checkout the tailwind branch.

Let’s get started.

Install Tailwind, as well as some plugins that will be useful with:

yarn add @headlessui/react @heroicons/react @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/line-clamp @tailwindcss/typography

also add these devDependencies:

yarn add -D postcss prettier-plugin-tailwindcss tailwindcss autoprefixer

And then we are ready to start making some configuration files

Tailwind config lets us customize our tailwind theme and set defaults in a central file. It is super useful for adding fonts, default colors, or custom css that you can use inline within the React className.

touch tailwind.config.js in the root folder of the project and copy this code:

You’ll also need a postcss.config.js as Tailwind utilizes it under the hood.

The prettier-plugin-tailwindcss we installed will work without any extra config, unless you have tailwind.config.js in a different directory, in which case just add the path to your .prettierrc.json like so:

{
     ...,
    "tailwindConfig": "./styles/tailwind.config.js"
}

Now that we have all the dependencies installed, go ahead and integrate Tailwind by adding it to styles/globals.css

You must have the first three lines, but I’ve also added some modifications to the html and body for full-page defaults.

I’ll also delete the styles/Home.module.css for now, as we don’t currently need any bespoke page styling — most of our styling will happen in-line via classNames anyways.

At this point, you are free to use and customize Tailwind and your styling as needed. If you are following along, or just want a quickstart for the stack thus-far, you can view the code here

I added a few small changes to pages/index.ts utilizing some TailwindCSS just to verify, which you can find in the last commit for this branch here

That’s all for now, stay tuned for some more functionality in the next post, as we start bringing our project to life.

Check out the repo here: https://github.com/wk0/boilerplate-next/tree/tailwind

Stars are appreciated!

Also check out my website: https://wk0.dev (contact info available)