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.
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:
Now that we have all the dependencies installed, go ahead and integrate Tailwind by adding it to
You must have the first three lines, but I’ve also added some modifications to the
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)