Simple Nextjs + Tailwind Implementation

Prerequisites. You will want to have a basic understanding of React and NodeJS. You will also need to make sure you have Node installed on your local machine to access command-line features.

Abridged

For anyone interested in jumping strait in, I added this abridged version so you can get up to speed quickly. I have also created this repository that you can use as a guide to download. If you are interested in all the details, scroll down for more details. Enjoy!

• First, you want to install the tech: npm i next react react-dom tailwindcss.

• Run npm init -y and update the /package.json file with the following:

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

• Create a /postcss.config.js file in your project root:

module.exports = {
  plugins: ['tailwindcss', 'autoprefixer']
}

• create a custom App in /pages/_app.js that imports tailwind css

import 'tailwindcss/tailwind.css'

const MyApp = ({ Component, pageProps }) => (
  <Component {...pageProps} />
)

export default MyApp

• Create a page in /pages/index.js with some tailwind and enjoy!

export default () => (
  <div className='bg-red-500'>I have a red background</div>
)

• (optional) Create a /tailwind.config.js file that purges your unused CSS:

module.exports = {
  purge: [
    './pages/*.js'
  ]
}

• Run it

  • dev: npm run dev

  • prod: npm run build && npm run start

Overview

I have been bored since I bought this domain. Thanks to that boredom, my personal site has been lacking a great design. I had simplistic styles, nothing flashy (all hand-coded). I had purchased my place on the web, and it was slowly deteriorating.

I heard about Tailwind early on when a friend of mine quickly bought into the idea, but I never personally looked into it. After hearing it come up more and more while interviewing for a senior front-end developer at my place of work, I decided it was time to look into it myself, while sharing my experiences with the rest of you!

Technology 101

Before we begin, I want to take a minute to go over each technology and the role that it will play in the application we build.

NextJS: A React Web Framework

NextJS is a web framework developed by Vercel (formally known as Zeit). Not only do they write cool frameworks, but they actually have a great automated deployment and hosting service.

In the early days of React everything was client-side. This posed a challenge to how search engines would interpret your pages since none of your content is available until the application mounts. If a bot or page crawler simply fetches the document, it would not be able to see any of the rich content or features that are loaded after the page is initially rendered. Eventually boilerplate repositories started showing up to provide more ways to render your content on the server. These boilerplates would provide a rendered page to the client, along with scripts to mount the page on the client back into a feature rich React application.

Boilerplates come with a nasty reality: they grow stale. Whether dependencies become deprecated or a bug is found, an update to your code will eventually need to take place. NextJS solves a lot of these hurtles for you by moving all of that code into the command-line and exposes a simple interface to take advantage of modern-day web tech.

Vercel was inspired by an approach in PHP where you would simply create folders and PHP files to create your application routes. They wanted to replicate the simplicity of that in a framework for newer languages. NextJS works similarly in that you have a pages directory that can be used to define the routes for your application.

Other technologies seem to have followed suit like Gatsby and NuxtJS (the Vue counterpart). These web frameworks have grown so much in popularity, they were a major talking point in Google's 2019 Dev Summit.

Needless to say, the need for a web framework in my opinion was long overdue. It was only a matter of time before someone was going to do it and it appears to have grown in popularity.

Tailwind: Utility-First CSS Framework

Tailwind is a self-defined "utility-first css framework". If you take a look at any of the documentation, you'll find that definition to be most appropriate.

The utilities are in a perfect middle between too rigid and too loose. They have adopted a lot of good philosophies around scaling sizes, colors, screens and element states. Tailwind also works in tandem with PostCSS to purge all unused utilities and give you an extremely small style footprint in your production environments.

Tailwind has grown a huge following in the last few years and has really done well to stand apart from other CSS frameworks.

Getting Everything Up and Running

To begin, you will want to get NextJS up-and-running. While the documentation suggests using their helper module via command-line, I find the best approach is to just do your by hand to better understand how the frameworks function.

Starting with NextJS

Feel free to skip this step, and all other NextJS-related steps if you have an existing application, but you might want to start fresh to make sure you have the right starting place. Create a new directory and run the following command from Terminal within that directory:

npm init -y

This will create a new /package.json file with all the defaults. Now, you will need to install NextJS and some dependencies to get the application ready to run:

npm i next react react-dom

What the above command does is adds the NextJS framework and additional dependencies into your application's /node_modules folder that are required to build and run our application.

Now you will need to set up a few things before the application can run. First, lets create a home page. Add the following lines of code to /pages/index.js:

export default () => (
  <div className='bg-red-500'>I have a red background</div>
)

You name the file /pages/index.js because that represents a blank request to that route. If you were to create another file called /pages/test.js that page would be access from http://localhost:3000/test. Feel free to read more at NextJS documentation.

Before you can run anything, you need to add some scripts to your /package.json file:

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

These are three basic commands that will get you started.

• npm run dev - This is primarily what you will run locally. You run this to immediately

• npm run build - This builds the source files into a distribution folder for later deployment.

• npm run start - After you have built the files, you can run this command to start the app. Note that this is primarily separated because you would build your app as part of the deployment pipeline, and your server would be in charge of starting the app.

Feel free to run npm run dev and go to http://localhost:3000 (which is the default location). You should see a page with I have a red background displayed (the background will be white, we will get to that in the next section). Feel free to edit the source files and hot-reloading should automatically show the app change before your very eyes.

Configure your NextJS App to support Tailwind

Tailwind comes with a few steps. Some are needed but others are option. Lets start first with installing the required module.

npm i -D tailwindcss

These modules are using the -D flag which installs the module as a developer dependency (a module only installed in development environments). Since Tailwind is really only used at build-time, there is no need to have it in your production environment.

NextJS comes pre-packaged with a bunch of modules. One of those modules is PostCSS. This tool is used to run additional operations on your CSS files (similar to CSS preprocessors, but technically different).

Create a /postcss.config.js file and put the following in there:

module.exports = {
  plugins: ['tailwindcss', 'autoprefixer']
}

It should be noted that creating this file overwrites the default behavior of NextJS, which should not matter for the purposes of this demonstration.

This will run tailwind as well as an autoprefixer for browser compatibility to our compiled CSS code.

There is one final optional step. The tailwind files are pretty large is size, and because of this we need to make sure we only load the utility classes we actually use in our application. In JavaScript this technique is called "tree shaking" is used to remove any unreferenced aspects of our source code. In CSS there is a great extension called PurgeCSS in which that same effect is used.

Again, this is optional, but you can create a file /tailwind.config.js to tell Tailwind where you reference the utility classes and it will remove anything unrefereed in the build files.

module.exports = {
  purge: [
    './pages/*.js'
  ]
}

The final step is to load the styles from tailwind. Create a file /pages/_app.js and put the following code in:

import 'tailwindcss/tailwind.css'

const MyApp = ({ Component, pageProps }) => (
  <Component {...pageProps} />
)

export default MyApp

This overrides the default application wrapper from NextJS and allows us to globally inject the tailwind files. You are good to run npm run dev and check out your page. You should see a red background now as we are successfully loading the tailwind system!

How did it turn out?

For my personal website, I would say it was a huge success. I am able to rapidly move elements around and change colors from a pool of available variables. Things I will be looking into in the future include customizing the theme to suit my website and integrating the styles directly into stylesheets (to clean up my DOM and document size a bit).

Feel free to let me know your thoughts on Twitter! I always love feedback as well as hear other perspectives on these matters!