Setting up your Next JS app with Tailwind CSS and Jest

Contents

In this blog, we are going to talk about

• Quickstart
• Why Tailwind CSS?
• Set up Tailwind CSS
• Set up prettier for Tailwind

Quickstart

Run

npx create-next-app@latest --example with-jest YOUR_APP_NAME

the example uses typescript by default

If you want to initialize the next app without jest but with typescript. You can add a typescript flag to the command FYI

npx create-next-app@latest YOUR_APP_NAME --typescript

Want to know more about testing your Next JS app? You can find it here

setting up with rust compiler

Since the release of Next.js 12, Next.js now has a built-in configuration for Jest.

To set up Jest, install jest , testing-library/react, testing-library/jest-dom:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

Create a jest.config.js file in your project's root directory and add the following:

// jest.config.js
const nextJest = require('next/jest')

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})

// Add any custom config to be passed to Jest
const customJestConfig = {
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)

Why TailwindCSS?

Tailwind is a utility-first CSS framework packed with classes like flex, pt-4, m-2, text-center, and rotate-90 that can be composed to build any design, directly in your markup.

• Tailwind is opinionated about its implementation of CSS but those restrictions actually takeaway the cognitive load of deciding the padding, margin, shades, font sizes, or the class names
• Because there aren't any .css to look at, everything is right in the markup debugging become easier (No more confusing nesting)

Setup TailwindCSS

Install tailwindcss and its peer dependencies via npm

npm install -D tailwindcss postcss autoprefixer

then run the init command to generate both tailwind.config.js and postcss.config.js.

npx tailwindcss init -p

Tailwind should know where are your markups to generate CSS so, Add the paths to all of your template files in your tailwind.config.js file.

// tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

You can use add your custom colours, styling, etc to extend the key in the file.

Add the Tailwind directives to your CSS Add the tailwind directives for each of Tailwind’s layers to your ./styles/globals.css file.

/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

NB: If you are using eslint. It comes as a default for nextJS, You may see yellow squiggly lines, Nothing to worry

If it is bothering you...!

on your terminal navigate to the project folder then type

mkdir .vscode && cd .vscode && touch settings.json && cd ..

or

1. create a .vscode folder in the project directory
2. create settings.json inside it

Now that you have the file in place add the following to settings.json

// settings.json
{
  "css.lint.unknownAtRules": "ignore"
}

Setup prettier for Tailwind

Prettier is an opinionated code formatted. Integrates with almost all code editors. supports many languages. you can add it from vscode extensions

I hope you are using prettier by now if not, please use it. It is going to save you a ton of time by formatting your code for you.

On your terminal type,

npm install -D prettier prettier-plugin-tailwindcss

That's pretty much it. you should see your classes shifting places as you save the file. It helps us in organizing the class names.

If you prefer to watch a video setting up prettier. Watch the video here

If you prefer to read. Read it here