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:
const nextJest = require('next/jest')
const createJestConfig = nextJest({
dir: './',
})
const customJestConfig = {
moduleDirectories: ['node_modules', '<rootDir>/'],
testEnvironment: 'jest-environment-jsdom',
}
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.
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.
@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
- create a .vscode folder in the project directory
- create settings.json inside it
Now that you have the file in place add the following to 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
