Get up and running with Tailwind CSS and Next.js

Jamie Barton
Nov 23, 2018 · 4 min read
Illustration by Damian Kidd (Dribbble, Instagram) ❤️

Create a Next.js project

Initialize a new npm project

npm init -y

Install dependencies

npm install --save next react react-dom @zeit/next-css

Install devDependencies

npm install --save-dev tailwindcss autoprefixer cssnano postcss-easy-import

Configure npm scripts

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

Configure Next.js + CSS

const withCSS = require('@zeit/next-css')
module.exports = withCSS({})

Create a page

export default () => (
<div className="p-4 shadow rounded bg-white">
<h1 className="text-purple leading-normal">Next.js</h1>
<p className="text-grey-dark">with Tailwind CSS</p>
</div>
)

Start the server

npm run dev
This is Hyper by the creators of Next.js

Configure and integrate Tailwind

Create a Tailwind config file

./node_modules/.bin/tailwind init

Configure PostCSS

const tailwindcss = require('tailwindcss')module.exports = {
plugins: [
require('postcss-easy-import'),
tailwindcss('./tailwind.config.js'),
require('autoprefixer')
]
}

Using Tailwind

Import Tailwind into your CSS

@tailwind base;
@tailwind utilities;
body {
@apply bg-grey-light p-12;
}
@import "tailwindcss/preflight";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Import your CSS with Next.js

import '../styles/index.css'

Start the Next.js app

Links

Thanks to

Jamie Barton

Written by

Programmer Dad & Husband 🤘

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade