In this article, I’ll show you how to setup Tailwind CSS with your Turborepo.

The GitHub repo for this blog is added in the references.

We have created a basic app template using the `npx create-turbo@latest`.

I have made a small change in that template, by moving pages, styles into the
`src` folder, so the folder structure would look something like:

```plain text
.
|-- apps
|   |-- docs
|   |   `-- src
|   |       |-- pages
|   |       `-- styles
|   `-- web
|       `-- src
|           |-- pages
|           `-- styles
`-- packages
    |-- config
    |-- tsconfig
    `-- ui
        `-- components
```

## 1. Installing Tailwind.

We’ll start off by installing tailwindcss, postcss and autoprefixer at the root
of your project.

```bash
yarn add -DW tailwindcss postcss autoprefixer
```

> Optionally you can also install `prettier-plugin-tailwindcss`for sorting those
> tailwind classes in the components. Check the references below to learn more.

Our root package.json would look like:

```json:package.json
{
  // ...
  "devDependencies": {
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.6",
    "prettier": "^2.5.1",
    "prettier-plugin-tailwindcss": "^0.1.7",
    "tailwindcss": "^3.0.23",
    "turbo": "latest"
  }
  // ....
}
```

---

## 2. Creating tailwind.config.js and postcss.config.js

In our `packages/config`, let’s create `tailwind.config.js` and
`postcss.config.js`

- In `tailwind.config.js`, add the following:

```javascript:tailwind.config.js
module.exports = {
  content: [
    '../../packages/ui/components/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}
```

- In `postcss.config.js`, add the following:

```javascript:postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}
```

---

## 3. Using the above configs in our apps and packages

- We have created the common configs, Now we are ready to use them in our
  `apps/web`, `apps/docs` or `app/{name}` directories.
- Again create `tailwind.config.js` and `postcss.config.js` in our `apps/{name}`
  directories and in `packages/ui`

Add the following in the files:

```javascript:{apps,packages}/{web,docs,ui}/tailwind.config.js
module.exports = require('config/tailwind.config')
```

```javascript:{apps,packages}/{web,docs,ui}/postcss.config.js
module.exports = require('config/postcss.config')
```

Lastly, in our `next.config.js` for both `web` and `docs` add this if it’s not
already present:

```javascript:next.config.js
const withTM = require('next-transpile-modules')(['ui'])

module.exports = withTM({
  reactStrictMode: true
})
```

---

That’s it! You are now ready to use Tailwind CSS with Turborepo!

### References

- [Github Repo for this blog](https://github.com/ShubhamVerma1811/turbo-tailwind)
- [Automatic Tailwind CSS Class Sorting](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier)


In this article, I’ll show you how to setup Tailwind CSS with your Turborepo.

Setup Tailwind CSS with Turborepo!

If you are into writing articles or into SEO stuff, you might know about the
meta tags.

One of them is the Open Graph meta tag. It is used to display a thumbnail of the
article sites like Twitter, Discord and many more.

```html
<meta property="og:image" content="http://example.com/image.jpg" />
```

We’ll need to handle the following:

- Styling
- Font family
- Responsiveness

There are many image manipulation libraries like
[Jimp](https://github.com/oliver-moran/jimp) or
[Sharp](https://github.com/lovell/sharp/), but they can’t handle the above
points.

You know what can handle it? It’s HTML!

So we will be using Puppeteer that would spin up a headless browser and take a
screenshot of the html page.

We will be using the following libraries:

- Express - For spinning up the server
- Puppeteer - For spinning up the browser
- Handlerbars - For rendering the html
- Tailwind CSS - For styling the html

And all this would be deployed on Vercel. This way we could use the Serverless
Functions.

Let’s get started.

Here is the file structure:

## File Structure

```plain text
.
|-- api
|   `-- index.ts
|-- package.json
|-- src
|   `-- templates
|       |-- basic
|       |   `-- index.hbs
|       `-- fancy
|           `-- index.hbs
|-- tailwind.config.js
|-- vercel.json
`-- yarn.lock
```

---

## Creating the HTML/HBS Template

The HTML code could be anything, that’s up to you. For sake of this blog, we are
using a simple template.

I am using Tailwind CDN for styling.
[Utility Classes FTW!](https://frontstuff.io/no-utility-classes-arent-the-same-as-inline-styles)

### Head of the HTML

We are importing fonts, and using TailwindCSS CDN for styling.

```html


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{title}}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Karla&display=swap"
      rel="stylesheet"
    />
    <script src="https://cdn.tailwindcss.com?plugins=line-clamp"></script>
  </head>
  
</html>
```

### Body of the HTML

Nothing much here apart from Tailwind CSS classes, just a title and date that
handlebars would dynamically update.

```html


<body
  class="image relative bg-black font-bold w-[2240px] h-[1260px] p-32 font-[Karla]"
>
  <h1 class="text-gray-300 text-4xl">SV.</h1>
  <h1
    class="text-white my-32 py-2 leading-[80px] text-6xl line-clamp-3 font-medium"
  >
    {{title}}
  </h1>
  <h1 class="text-white font-normal my-32 text-3xl line-clamp-3">
    {{date}} | by Shubham Verma
  </h1>

  <div class="bg-inherit w-full h-full absolute -z-10"></div>

  <h1 class="text-gray-300 mb-32 absolute bottom-0 text-4xl">shbm.fyi</h1>
</body>
```

---

## Creating the Server and the Handlerbars Template.

### Imports

```typescript
// api/index.ts
import chromium from 'chrome-aws-lambda' // required for deploying on Vercel
import express, { Request, Response } from 'express'
import { readFileSync } from 'fs'
import Handlebars from 'handlebars'
import path from 'path'

const app = express()
```

### Creating the get Route

**Overview of the get route:**

1. We spin up the puppeteer browser.
2. Get the title and date from the query string.
3. Compile the hbs template and pass in the title and date.
4. Render the html.
5. Take a screenshot of the html.
6. Close the browser.
7. Return the screenshot as a response.

In the very end we are adding this line

> module.exports = app;

> This is for Vercel to deploy a serverless function.

```typescript
app.get('/', async (req: Request, res: Response) => {
  try {
    // All these configurations are required for puppeteer, if you are deploying on Vercel!
    // https://github.com/vercel/community/discussions/124
    const browser = await chromium.puppeteer.launch({
      args: [...chromium.args, '--hide-scrollbars', '--disable-web-security'],
      defaultViewport: chromium.defaultViewport,
      executablePath: await chromium.executablePath,
      headless: true,
      ignoreHTTPSErrors: true
    })
    // const browser = await chromium.puppeteer.launch()
    const [page] = await browser.pages()

    const { template = 'basic', title, date } = req.query

    // Reading the template
    const _template = readFileSync(
      path.join(process.cwd(), `src/templates/${template}/index.hbs`),
      'utf8'
    )

    // Compiling the template
    const html = Handlebars.compile(_template)({
      title,
      // get date in this format - 21st April 2020
      date:
        date ??
        new Date().toLocaleDateString('en-GB', {
          day: 'numeric',
          month: 'long',
          year: 'numeric'
        })
    })

    // Rendering the html and taking a screenshot
    await page.setContent(html)
    const take = await page.$('.image')
    const ss = await take.screenshot()
    await browser.close()

    // Returning the buffer of the screenshot.
    res.setHeader('Content-Type', 'image/png')
    res.setHeader('Cache-Control', 's-max-age=1, stale-while-revalidate')
    res.send(ss)
  } catch (err) {
    console.error(err)
    res.send('Error')
  }
})

// Required if you are deplying Express on Vercel as a Serverless Function.
module.exports = app
```

---

## Deploying on Vercel

Create a vercel.json and add the following:

```json
// vercel.json

{
  "rewrites": [
    {
      "destination": "/api",
      "source": "/(.*)"
    }
  ]
}
```

All set! You can now deploy the server on Vercel.

You can try it out by going to
[https://og.shubhamverma.me/?title=Hey there](https://og.shubhamverma.me/?title=Hey)
.It will take time to load up, because first it’s serverless and second we are
spinning up puppeteer.

> Please don’t over do it. I’ve got Vercel Serverless Limits 😅

---

## References:

I have Open Sourced the code for this project on Github.

Here is the Repo link - https://github.com/ShubhamVerma1811/open-graph-api

Automate that shit of creating the images!

Creating Dynamic Open Graph images for your blogs!

Protecting Routes from unauthenticated users is a crucial part of any app.

In this blog, I’ll show you exactly how to do that with your NextJS pages using
Higher-Order Components 1

There can be several ways of authenticating a user like using cookies or JWT
tokens.2

I’ll be using JWT token as an example, where the `accessToken` is stored in the
`localStorage`

Let’s consider a page “/dashboard”. This page should be only accessed by
authenticated users

### In our `Dashboard.jsx`

```typescript
// pages/dashboard.jsx
import withAuth from 'HOC/withAuth.js'
const Dashboard = ({ user }) => {
  return (
    <div>
      <h1>Dashboard</h1>
      <h2>{user.name}</h2>
    </div>
  )
}

export default withAuth(Dashboard)
```

Notice that we are importing `withAuth.jsx` and exporting the page by passing it
as an argument. That is all we need to do for our pages.

---

### In our `withAuth.jsx`

I’ll show you two methods of implementations:

- Method 1: We don’t verify the token
- Method 2: We verify the token

### Method 1: (We don’t verify the token)

```typescript
// HOC/withAuth.jsx
import { useRouter } from 'next/router'
const withAuth = (WrappedComponent) => {
  return (props) => {
    // checks whether we are on client / browser or server.
    if (typeof window !== 'undefined') {
      const Router = useRouter()

      const accessToken = localStorage.getItem('accessToken')

      // If there is no access token we redirect to "/" page.
      if (!accessToken) {
        Router.replace('/')
        return null
      }

      // If this is an accessToken we just render the component that was passed with all its props

      return <WrappedComponent {...props} />
    }

    // If we are on server, return null
    return null
  }
}

export default withAuth
```

---

### Method 2: We need to verify the token.

```typescript
// HOC/withAuth.jsx
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import verifyToken from 'services/verifyToken'

const withAuth = (WrappedComponent) => {
  return (props) => {
    const Router = useRouter()
    const [verified, setVerified] = useState(false)

    useEffect(async () => {
      const accessToken = localStorage.getItem('accessToken')
      // if no accessToken was found,then we redirect to "/" page.
      if (!accessToken) {
        Router.replace('/')
      } else {
        // we call the api that verifies the token.
        const data = await verifyToken(accessToken)
        // if token was verified we set the state.
        if (data.verified) {
          setVerified(data.verified)
        } else {
          // If the token was fraud we first remove it from localStorage and then redirect to "/"
          localStorage.removeItem('accessToken')
          Router.replace('/')
        }
      }
    }, [])

    if (verified) {
      return <WrappedComponent {...props} />
    } else {
      return null
    }
  }
}

export default withAuth
```

---

Footers:

1. [React Higher-Order Components](https://reactjs.org/docs/higher-order-components.html)
2. [User authentication in NodeJS](https://debbie.hashnode.dev/a-beginners-guide-to-user-authentication-and-authorization-with-json-web-tokens-versus-sessions-in-nodejs)

---

Wasn’t that easy!

I hope this blog helped you. If you got any queries or feedback then let me know
😀


Protecting Routes from unauthenticated users is a crucial part of any app

Implement Protected Routes in NextJS!

A Raycast extension that let's you search Naitvebase documentation.

Search NativeBase Documentation - An extension for Raycast

This is a rehype plugin that allows you to resize images in markdown files like Obsidian.

Rehype Image Resize

A simple extension that enables symbols and outlines for a React files!