Setting up Tailwind CSS with Next.js in two minutes

#tailwindcss #nextjs

(Welcome to my first post on dev.to!)

Tailwind CSS is a framework which supports you in creating front ends at pace. You can create visually stunning websites and applications without having to code a single line of CSS! It's great for getting projects off the ground quickly and ideal for prototypes (and full scale applications). Sounds amazing right?

Setting up tailwindcss in your next.js application is a breeze and this tutorial will show you how.

Step 1 - Set up Next.js

If you already have a Next.js application you can skip this step. Worth noting this tutorial assumes you are running Next.js version 10 or later.

To setup your Next.js all you need to do is run the following command in your favourite terminal:

npx create-next-app my-tailwind-app

Replace my-tailwind-app the the name of your application.

For the following steps your terminal location needs to be in your application root, so run:

cd my-tailwind-app

Step 2 - Install Tailwind

To use tailwind you need 3 packages, tailwind, postcss and autoprefixer.

# If you're using npm
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# If you're using yarn
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

Step 3 - Setup the config files

We need to set up two config files, one for tailwind and one for postcss. The simplest way to do this is to run:

npx tailwindcss init -p

Like magic tailwind.config.js and postcss.config.js will appear on your application root!

Step 4 - Start the purge

Tailwind is a big library and you don't want loads of unused styles in your production app which could lead to poor front end performance.

Tailwind can purge all the unused styles, speeding things up nicely for your users.

Update your tailwind.config.js with the following:

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

Here we are telling tailwind to look in our pages folder for the styles we use. This will cover off both JS and TypeScript files.

It's common to have other folders such as /components in our structure and you can easily add those folders to the purge array. For example:

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

Step 5 - Include tailwind in your application

Now all you need to do is include tailwind in the application. Simply update /pages/_app.js with the following:

import 'tailwindcss/tailwind.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

You will also want to remove the styling in your /pages/index.js application however you'll likely rewrite that file anyway.

All you need to do now is start writing your application! The docs over at https://tailwindcss.com/docs are fantastic and are a great resource to have to hand.

Enjoy building!