Learning Tailwind CSS and Next.js

Creating a blog using Tailwind CSS and Next.js

10 mins

"2021-05-19T19:05:27.220Z"

Introduction

I'm terrible at CSS and a lot of purely front end development in general. So as an exercise to improve, I rebuilt my blog using Tailwind CSS and Next.js. It was a surprisingly pleasant experience. If you're like me, a developer, but definitely not a designer, you might enjoy reading about to write a static blogging system utilizing these technologies. As a bonus, I am hosting this all on AWS and using CDK to deploy it.

Bootstrapping the Next.js Project

First up, create a new Next.js project using:

$ npx create-next-app nextjs-blog --use-npm

Change to the newly created directory and initialize git:

$ cd nextjs-blog 
$ git init .

Make sure everything is working ok:

$ npm run dev

> nextjs-blog@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
event - compiled successfully

Open a browser and navigate to http://localhost:3000 and you should see:

Welcome to Next.js

The setup is done. Lets add everything to git:

$ git add .
$ git commit -m 'Bootstrapped Next.js blog'
[main (root-commit) 1a8f1a4] Bootstrapped Next.js blog
 11 files changed, 5004 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 README.md
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 pages/_app.js
 create mode 100644 pages/api/hello.js
 create mode 100644 pages/index.js
 create mode 100644 public/favicon.ico
 create mode 100644 public/vercel.svg
 create mode 100644 styles/Home.module.css
 create mode 100644 styles/globals.css

Adding Tailwind CSS

Create a new branch so that we can make sure everything is good before merging to main:

$ git checkout -b rainkinz/add_tailwindcss

Now install the Tailwind CSS dependencies (See https://tailwindcss.com/docs/guides/nextjs for more information):

$ npm install --save-dev tailwindcss@latest postcss@latest autoprefixer@latest

Generate the tailwind.config.js and postcss.config.js files:

$ npx tailwindcss init -p

Configure tailwind.config.js to remove unused styles as per the Tailwind guide:

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

Include Tailwind in the CSS. In this case I'll add it to ./styles/globals.css. Replace everything in that file with:

@tailwind base;
@tailwind components;
@tailwind utilities;

Also, clean up some of the stuff we don't need:

rm styles/Home.module.css

remove the import from page/index.js and remove all the existing content. It should end up looking like this:

import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1>Our blog</h1>
      </main>
    </div>
  )
}

Add everything to git:

$ git add .
$ git commit -m 'setup tailwind'

The Tailwind setup is done.

Using Typescript

I would rather use Typescript. Next.js makes that easy. Simple create a tsconfig.json like so:

$ touch tsconfig.json

Then add the needed packages:

$ npm install --save-dev typescript @types/react

When you next run the app you'll see:

$ npm run dev

> nextjs-blog@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
We detected TypeScript in your project and created a tsconfig.json file for you.

event - compiled successfully

Finally rename ./pages/app.js to ./pages/app.tsx:

$ mv pages/_app.js pages/_app.tsx

Commit and test everything:

$ git add .
$ git commit -m 'Configured typescript'

Finally convert out pages/index.js, and _app.js to Typescript by changing the extension from .js to .tsx. Check it in to git and test.

And that's it for now. In the next post I'll actually start creating the Tailwind components I'm going to use in my blog project.

The completed code for the setup can be found here: https://github.com/rainkinz/nextjs-blog-example/tree/rainkinz/part-1_setup