gray-matter | colour scheme for Sublime Text | Theme library

It was all ok, until I arrived at this section about the implementation of getStaticProps.

I wrote this code as the tutorial says:

I've been following JetBrains WebStorm guide to build this, here they've used bootstrap as their CSS but my choice of CSS framework was tailwind css.

The thing is when I install tailwind css or any other CSS based on tailwind css like flowbite, the MDX page loses it's styling.

Expected
What I Get after adding tailwind

• tailwind.config.js

The note's pages are markdown files converted into HTML used in a dynamic file (this works).

On the notes pages (with all the notes listed), I want to implement a search function:
I need to find a way to get the value of my search input into the getServerSideProps(). This way it can filter out the notes and only display the ones that you searched for.

Things to note:

• When I change the string 'searchTerm' in getServerSideProps() in the note page the search function works.

A method matter returns an object, like return {content, data}

The second call of the method (a method from a node module) overwrites previous vars set from return.

While what is given in the tutorial works for me, if I try using a separate component, getStaticProps or getInitialProps returns undefined as the props.

I am adding this question as I have wasted three days to understand the root cause of it and still not able to debug it.

Answer to this question didn't worked for me: Getting props as undefined in component returned from getStaticProps

Here is my code:

_app.js :