Building a website with Next.js which required the installation of different dependencies can be frustrating. In this article, we will discuss how you can set up your app using Tailwind CSS and SASS.
Intro
Next.js is an open-source web development framework built on top of Node.js that enables server-side rendering and the generation of static webpages in React-based online apps.
Tailwind CSS is a highly configurable, low-level CSS framework that provides you with all of the building blocks you need to create personalized designs without having to struggle to override irritating opinionated styles.
SASS is a Cascading Style Sheets preprocessor programming language that may be interpreted or compiled. The scripting language itself is called SassScript. CSS is entertaining on its own, but stylesheets are becoming larger, more complicated, and more difficult to manage. A preprocessor can aid in this situation. Sass allows you to leverage capabilities that aren't currently available in CSS, such as variables, nesting, mixins, inheritance, and other useful features that make creating CSS more enjoyable. Nesting is one of the features I love using with sass as it gets rid of unnecessary mentioning of classes.
Installing Next.js
Installing next.js can be done with the following code below:
npx-create-next-app
The code above will install the required dependencies and a well-structured next.js app will be set up. To start the project run the code below:
npm run dev
You will see your application running on localhost:3000
Installing Sass
Next.js has built-In Sass Support. But before you can start using sass you need to install sass using the following code below:
npm install sass
Installing Tailwind css and postcss
Now let install tailwindcss into our next.js app with the following code below:
npm install -D tailwindcss postcss autoprefixer
After the installation is complete, run the following code below for the automatic creation of tailwind.config.js and postcss.config.js
npx tailwindcss init
Our tailwind.config.js file needs to look like the code below indicating the respective file types you will be using in your project.
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
** Stylesheet Creation **
In this step, we will be creating a style folder inside our next.js app and create a file named index.scss and then paste the following code into the file.
@tailwind base;
@tailwind components;
@tailwind utilities;
After the above step the next step is to import your index.scss file and tailwindcss/tailwindcss to your _app.js file in the pages folder of your next.js app .
import '../styles/index.scss'
import 'tailwindcss/tailwind.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
Congratulations your Next.js app is ready for building ✅ .
Conclusion
In this article, I have been able to cover various steps on how you will be able to build a project with Next.js, Tailwind-CSS, and SASS Looking for a fully functional source code check my Github repo