Styling React/Next.js using tailwind

24 November, 2021 — nodejs, nextjs — 1 min read

Quickest way to setup Next.js with Tailwinds CSS is to use the official nextjs example.

2021 is nearing end and my preferred way to build react app is Next.js with Tailwind.css

1yarn create next-app --example with-tailwindcss-emotion my-app
2cd my-app
3yarn dev

That's it. The dev server should be accessible at http://localhost:3000

As of Nov 2021, you may get following error(in the past above three lines would set you up).

1error - ./pages/_app.js
2TypeError: Cannot read property 'theme' of undefined

To solve this issue I had to make couple of changes.

Downgrade tailwindcss to 2.1.4 in package.json
comment out mode jit in tailwinds.config.js

With above changes done, I had to

delete node_modules and .next
install dependency

After making above two changes

1rm -rf node_modules
2rm -rf .next
3yarn
4yarn dev

The issue is described at https://github.com/vercel/next.js/issues/26337 kind of solved as well.

Refer to the patch below

1diff --git a/package.json b/package.json
2index 0c9a988..5f6f08f 100644
3--- a/package.json
4+++ b/package.json
5@@ -18,7 +18,7 @@
6     "autoprefixer": "^10.2.6",
7     "next": "latest",
8     "postcss": "^8.3.5",
9-    "tailwindcss": "^2.2.4",
10+    "tailwindcss": "2.1.4",
11     "xwind": "0.8.0"
12   }
13 }
14diff --git a/tailwind.config.js b/tailwind.config.js
15index d088de6..816a535 100644
16--- a/tailwind.config.js
17+++ b/tailwind.config.js
18@@ -1,7 +1,7 @@
19 const colors = require('tailwindcss/colors')
20
21 module.exports = {
22-  mode: 'jit',
23+  // mode: 'jit',
24   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
25   darkMode: 'class',
26   theme: {

Styling React/Next.js using tailwind

Comments