Install Next.js with Pre-Commits, Tailwindcss and SASS [2021 edition]

next-sass-tailwind-boilerplate created by SeGl

You are just here to learn more about pre-commits in React or Next.js? Actually, we’ll skip that part. Have a look at the following post instead.

🚀 Or Check the final version, on Github 🚀

Instead we will clone my pre commit repo, and work with it:

git clone https://github.com/SeGl1990/next-boilerplate.git

Then, open your terminal, head to the root of the project and install all dependencies.

npm i

To be completely sure, we install once again:

npm i --save-dev husky@4.3.8 eslint babel-eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier @commitlint/cli lint-staged

SASS / SCSS Installation

The installation of SCSS / SASS is very intuitive. Open your terminal, head to the root folder of our project and run:

npm install sass

In the root folder of the next-boilerplate add a next.config.js

file and copy & paste:

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

Scss installation is completed, congratulations 🚀

Tailwind installation

Since we are using Next.js v10 and higher, we open our terminal, head to the root folder of our project and run:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

After successfull installation, we run another command:

npx tailwindcss init -p

The second command will initialize tailwind. It will automatically create a postcss.config.js and a tailwind.config.js

Head to the tailwind.config.js and overwrite the default file

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

The “purge” option will tree-shake unused styles in production builds. It will automatically check all “.js”, “.jsx”, “.ts” or “.tsx” files in the Page- or Components- folder and look for the respective tailwind classes.

Now, we navigate to the “styles ” folder. First we delete all default .css files.

❗ Make sure to delete the path to the .css files in the /pages/_app.js and /pages/index.js, as well❗

In the styles folder: let us create a new folder called “tailwind”. Inside we create two new files. _index.scss and _tailwind.scss.

In a further step we edit the _tailwind.scss file:

@import '~tailwindcss/base';
h1 {
@apply text-7xl; // 4.5rem;
@apply font-bold;
}
h2 {
@apply text-4xl; // 2.25rem;
@apply font-bold;
}
h3 {
@apply text-lg; // 1.125rem;
@apply font-bold;
}
a {
@apply no-underline;
@apply cursor-pointer;
}
@import '~tailwindcss/components';
@import '~tailwindcss/utilities';

You can create or update customizations yourself. For now we only need a few settings for h1, h2, h3 and a.

In the _index.scss file, we are going to forward our tailwind code:

// Global imports
@forward './tailwind';

Now we need a global file. Head back to the styles folder and create a globals.scssfile.

// tailwind import
@use "./tailwind/index" as *;

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
* {
box-sizing: border-box;
}

Feel free to create a styles/components folder and add your custom styles. Check my final repo for inspiration.

Only one step to go, we need to import globals.scssin /pages/_app.js

import '../styles/globals.scss'
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
export default MyApp

Congratulations. You can now add your own tailwind classes with sass/scss. Please have a look at my Github repo if you need some inspiration. 🤓

By the way, I update the dependencies once a month. This way everything is up to date.