How to use SCSS with Tailwind in Next JS

Tailwind is a utility-first CSS framework packed with classes. It’s easy to use and can be composed to build any design, directly in your markup. Tailwind can be used in any framework like React JS, Next JS and even Vanilla JS. We are going to use SCSS with Tailwind in Next JS. This is A guide to using Tailwind with a common CSS preprocessor, especially Sass.

In this post, we will install Tailwind CSS in the Next JS Project and Also add the superpowers of SCSS to make it a bit more robust.

Benefits of Tailwind with SCSS –

Your builds will be faster. Since your CSS doesn’t have to be parsed and processed by multiple tools, your CSS will compile much quicker using only PostCSS.
No quirks or workarounds. Because Tailwind adds some new non-standard keywords to CSS like @tailwind @apply, theme() and more.

Also Read: How to Add Google Analytics in NextJS

Table of Contents

Creating a Next JS app with Tailwind

To create a new Next JS app use the following command. Make sure you have Node JS installed on your machine and also npm or yarn installed. And after installing the Next JS app navigate to your project directory.

npx create-next-app next-js-tailwind-scss
#or
yarn create-next-app next-js-tailwind-scss

cd next-js-tailwind-scss

2. Install tailwindcss and its peer dependencies via npm.

npm install -D tailwindcss postcss autoprefixer

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

npx tailwindcss init -p

4. 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: [],
}

Also Read: How to Highlight Code Syntax in Next JS

SCSS with Tailwind in Next JS

5. Install scss package via NPM

npm i scss --save-dev

6. Make a global.scss file ./styles/globals.scss and add the @tailwind directives for each of Tailwind’s layers to it.

// ./styles/globals.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

7. Run your build process with npm run dev

npm run dev

8. Start using the Tailwind Classes in your project

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

Also Read: How to use both Tailwind and Styled Components in Next JS

SCSS with Tailwind

9. Make a custom class in SCSS – Make a file in ./styles a folder named _button.scss. In the below example we are making a custom class .btn-link and added some tailwind pre-defined classes and also added a nested :hover to it.

// ./styles/_button.scss

.btn-link {
  @apply flexed py-1.5 px-4 md:px-5 rounded-md text-sm md:text-base font-semibold border-2 transition-all duration-500 ease-in-out text-mt-black2 border-mt-black2;

  &:hover {
    @apply bg-black text-white;
    box-shadow: 3px 6px 20px rgba(0, 0, 0, 0.336);
  }
}

10. To use this custom class we need to import _button.scss in the `global.scss`

// /styles/globals.scss

/* Tailwind base */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Components */
@import './button';

This is how we can use Tailwind with the power of SCSS in Next JS.

Also Read: How to use GitHub GraphQL API in React or Next JS