NextJS + TailwindCSS Boilerplate
Published: 2021-02-05 12:52:36

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:

```plain
take nextjs-tailwind
```

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

```plain
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](https://code.visualstudio.com/) and [Sublime Text](https://www.sublimetext.com/), 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:

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

Now create our first page:

```bash
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`:

```jsx
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:

```bash
npm install tailwindcss postcss autoprefixer
```

### Configuration files

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

```bash
npx tailwindcss init -p
```

You can learn more about configuring Tailwind in the
[configuration documentation](https://tailwindcss.com/docs/configuration).

### Configure Tailwind to remove unused styles in production

```js
// 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:

```plain
touch pages/_app.js
```

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

```jsx
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:

```plain
take styles && touch base.css
```

Now we can finally include Tailwind:

```css
/* 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:

```jsx
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](https://tailwindcss.com/docs).