Putting Tailwind and SCSS to Work in Your Next.js Application

In this short post, I will walk you through the process of adding Tailwind CSS to a Next.js application and integrating SCSS.

Let's start with setting up Next.js Project.

npx create-next-app@latest my-project

During setup, select 'Yes' when asked if you would like to use Tailwind CSS with this project:

...
Would you like to use Tailwind CSS with this project? … No / Yes
...

Navigate into your project:

cd my-project

If you already have the Next.js project installed and you need to add Tailwind CSS manually run the following commands in your terminal to install Tailwind CSS and its dependencies:

npm install tailwindcss postcss autoprefixer

Next, create a new PostCSS configuration file by running:

npx tailwindcss init -p

This command creates two files at the root of your project, tailwind.config.js and postcss.config.js. The tailwind.config.js file is where you can customize your Tailwind installation, and postcss.config.js is where PostCSS, a tool for transforming styles with JS plugins, is configured.

Now, let's make Tailwind work.

To set up Tailwind with Next.js, open tailwind.config.js and modify it as follows:

// tailwind.config.js
module.exports = {
  content: [
	'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
	'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
	'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Next, import Tailwind's base, components, and utilities styles into the globals.css as follows:

/* globals.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Installing and configuring SCSS with Tailwind

To use SCSS in a Next.js project, you'll need to install the sass module. Run the following command in your terminal:

npm install sass

To use SCSS with Tailwind CSS, you'll need to make a few changes. First, raname globals.css into globals.scss.

Then, in your _app.js file, make sure to import the globals.scss file, not globals.css.

import '../styles/globals.scss'

And there you have it! You've successfully installed and configured both SCSS and Tailwind CSS in your Next.js application.

For further reading, I'd recommend this insightful blog post by Laura Mayock, where she weighs the pros and cons of using Bootstrap versus Tailwind in your project.

Tailwind, Sure why would you bother?

Happy coding!