NextJS + TailwindCSS Boilerplate

So I've decided to redesign my website, from now on I'll be trying to focus my content more around small tutorials and not so much the usual rants I like to throw here. This website / blog was pretty much built using NextJS, TailwindCSS and MDX.

Once I was done with it, I thought maybe someone can also benefic from a tutorial on how I've done it.

I might cover the MDX part eventually, but for now I don't feel 100% comfortable sharing a post on that.

Lets dive in!

NextJS

Although the good folks at Vercel created the npx create-next-app command, I usually like to start my apps as clean as possible, so in this tutorial we're actually starting with a clean / empty folder.

Let us create a folder for our project:

take nextjs-tailwind

Now that we have our folder we can init our node project, for that we can run:

npm init -y

If you're wondering what take does. Aside from creating a folder it also navigates inside it right away. Also, the -y to init our node project is to skip the questions this commands asks and set default values for us.

Go ahead and install the required packages to have our own NextJS application:

npm i react react-dom next

Awesome, now we'll do 2 things, first we'll change the scripts on our package.json file and then we'll create our first NextJS page.

Open our project in your favorite text editor, I keep switching between VSCode and Sublime Text, but for this one I'm actually using VSCode. Run:

code .

What code . does is to open the current directory with VSCode, handy nice shortcut.

Open package.json and change the scripts object with:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Now create our first page:

take pages && touch index.js

Navigate to pages/index.js, you should find an empty file, let us take care of that and create our first page, we'll call it Homepage:

function Homepage() {
  return <>Welcome to our homepage!</>
}

export default Homepage

Awesome! Guess we can go ahead and run npm run dev, we should be able to see Welcome to our homepage! when accessing http://localhost:3000.

For now we have all we need regarding NextJS. Let us move to Tailwind.

TailwindCSS

Alright, we'll need to install 3 packages to get Tailwind working on our project:

npm install tailwindcss postcss autoprefixer

Configuration files

By running this command it'll create both tailwind.config.js and postcss.config.js:

npx tailwindcss init -p

You can learn more about configuring Tailwind in the
configuration documentation.

Configure Tailwind to remove unused styles in production

// tailwind.config.js
module.exports = {
  purge: ['./pages/**/*.js', './components/**/*.js'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Good progress. Now we'll need to include Tailwind styles in our application. First we'll need to create an _app.js file inside our pages folder:

touch pages/_app.js

Inside it we'll put the default content that NextJS required:

import '../styles/base.css'

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

export default MyApp

This will throw an error because we still don't have our base.css file created, let us take care of that.

Styling

First, create a base.css file inside a brand new styles folder:

take styles && touch base.css

Now we can finally include Tailwind:

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

Restart your server and make sure everything is being loaded properly.

Now let us go into our pages/index.js file and apply some Tailwind handy classes to style a little bit our title:

function Homepage() {
  return (
    <div className="text-center my-12 font-black text-4xl">
      Welcome to our homepage!
    </div>
  )
}

export default Homepage

If you check our pages you'll notice that our title looks much better now, this is the beauty of Tailwind, with only classes we can achieve so much and be as original as we want.

The more you use Tailwind the easier it gets to remember what classes you should use to achieve what you want. When I started using it I kept checking their documentation to double check some classes, and I still do, not so often though.

So, make sure to check their documentation.